@charset "utf-8";
@import url('old_style.css');/* 기존 스타일 style.css임 */
@import url('base.css');

.innerDiv{ width: 1200px; margin: 0 auto; position: relative}
#realHeader{ width: 100%; height: 162px; background: #fff; padding-top: 41px;}
.header_tp{ position: absolute; left: 0; top: 0; width: 100%; height: 40px; background: #f6f6f6; border-bottom: 1px solid #cdcdcd}
.header_tp .innerDiv{ text-align: right;}
.header_tp .innerDiv>div{ display: inline-block;}
.header_tp .innerDiv>div:after{ content: ''; display: block; clear: both;}
.header_tp .innerDiv a, .header_tp .innerDiv span{ line-height: 40px; display: inline-block; font-size: 15px; font-weight: 400}
.header_tp .innerDiv .goLnk{ background: #80849d; color: #fff; position: absolute; right: 0; top: 0; width: 180px; text-align: center}
.header_tp .innerDiv .goLnk:after{ content: ''; display: block; width: 100%; height: 1px; background: #80849d; position: absolute; bottom: -1px; left: 0;}
.header_tp .innerDiv .userArea{ margin-right: 190px}
.header_tp .innerDiv .userArea a{ color: #323232; padding: 0 7px 0 0; font-size: 14px; display: block; float: left; letter-spacing: -0.05em}
.header_tp .innerDiv .userArea a:after{ content: '\2223'; display: inline-block; color: #afb1c0; margin-left: 7px}
.header_tp .innerDiv .userArea a:last-child:after{ display: none}
.header_tp .innerDiv span{ font-weight: 300; float: left; margin-right: 15px}
.header_tp .innerDiv span a:before{ content: ''; display: inline-block; background: url(../images/common/icon.png) no-repeat 0 0; width: 12px; height: 12px; margin-right: 3px}
.header_tp .innerDiv .userArea span a{ color: #0077a4}
.header_tp .innerDiv .userArea span a:after{ display: none}
.header_tp .innerDiv .usrSelect{ position: absolute; left: 0; top: 0; height: 41px}
.header_tp .innerDiv .usrSelect button[type="button"]{ display: inline-block; float: left; border: 1px solid #cdcdcd; border-top: 0; background: #f6f6f6; line-height: 40px; font-size: 15px; color: #4c4f56; margin-right: -1px; padding: 0 25px; cursor: pointer; position: relative;}
.header_tp .innerDiv .usrSelect button[type="button"].active{ color: #fff; font-weight: 500; background: #00a9dd; border: 0; overflow: hidden; line-height: 41px;}
.header_tp .innerDiv .usrSelect button[type="button"].active:after{ content: ''; display: block; position: absolute; width: 8px; height: 8px; bottom: -4px; background: #fff; transform: rotate(45deg); left: calc(50% - 8px / 2)}
#headerWrap{ height: 60px; background: #e3ecf3 url(../images/main/container.png) no-repeat 50% 60px; position: relative; z-index: 9}
#headerWrap:before{ content: ''; display: block; position: absolute; left: 0; top: 0; width: 100%; height: 60px; background: #0c4ca3}
#headerWrap #header{ width: 1200px; margin: 0 auto; position: relative; background: none}
#headerWrap #header:after{ content: ''; display: block; clear: both;}
#headerWrap #header .headerLogo{ float: left; margin: 0 0 0 30px; display: block; height: 85px; width: 188px; position: relative; font-size: 0; color: transparent}
#headerWrap #header .headerLogo:before{ content: ''; display: block; height: 78px; width: 188px; background: url(../images/common/ci.png) no-repeat 0 0; vertical-align: middle; margin-top: 3px}
#header>#gnb{ position: relative; border: 0; height: auto;}
#header>#gnb:after{ content: ''; display: block; clear: both}
#header>#gnb>li{ float:left; width: 210px}
#header>#gnb>li>a{ display: block; height: 60px; line-height: 60px; font-size: 20px; letter-spacing: -0.03em; color: #fff; text-align: center;  font-weight: 400; position: relative}
#header>#gnb>li>a:before, #header>#gnb>li>a:after{ content: ''; display: block; width: 4px; height: 4px; background: rgba(255,255,255,0.6); position: absolute; right: 0; top: 25px; transform: rotate(45deg);}
#header>#gnb>li>a:after{ top: 32px;}
#header>#gnb>li:last-child>a:before, #header>#gnb>li:last-child>a:after{ display: none}
#header>#gnb>li>ul{ position:absolute; top:60px; display:none; width: 199px; padding: 5px 0 50px 10px; min-height: 351px; background: rgba(245,248,250,0.5); border-right: 1px solid #fff; height: auto; float: none;}
#header>#gnb>li>ul.on{ background: #cadae8}
#header>#gnb>li>ul>li{ float: none; display: block; width: auto;}
#header>#gnb>li>ul>li>a{ display:block; font-size: 16px; color: #323232; font-weight: 300; padding: 8px 0 8px 10px; position: relative; word-break: keep-all;}
#header>#gnb>li>ul>li>a:before{ content: ''; display: block; width: 4px; height: 4px; vertical-align: middle; background: #4c4f56; position: absolute; left: 0; top: 18px}
#header>#gnb>li>ul>li>a:hover,#header>#gnb>li>ul>li>a:active,#header>#gnb>li>ul>li>a:focus{}
#header>a{ display: block; position: absolute; right: 0; top: 0; background: #0079c0; color: #00f2ff; line-height: 59px; padding: 0 42px; font-size: 18px; font-weight: 300}
.headerSch{ height: 102px; width: 1200px; margin: 0 auto; position: relative}
.headerSch:after{ content: ''; display: block; clear: both}
.headerSch>a{ display: block; position: absolute; left: 0; top: 22px; background: url(../images/common/ci.png) no-repeat; width: 207px; height: 56px; font-size: 0; color: transparent}
.headerSch>fieldset{ display: inline-block}
.headerSch>fieldset>div{ float: left; margin: 27px 0 0 360px; width: 470px; height: 50px; border: 3px solid #80849d; box-sizing: border-box; border-radius: 50px; text-indent: 20px; position: relative}
.headerSch>fieldset>div label, label.selectR{ display: inline-block; position: absolute; left: 20px; top: 0; width: 130px; height: 44px; font-size: 0; color: transparent}
.headerSch>fieldset>div label:after, label.selectR:after{ content: '\25BE'; display: block; position: absolute; right: 5%; top: 14px; width: 14px; height: 14px; border-radius: 100%; border: 2px solid #4c4f56; text-align: center; text-indent: 0; line-height: 14px; font-size: 18px; color: #4c4f56}
.headerSch>fieldset>div select{ height: 44px; line-height: 44px; width: 130px; font-size: 17px; color: #4c4f56; appearance: none; -webkit-appearance: none; -moz-appearance: none; border: 0; background: transparent; position: relative; z-index: 1}
.headerSch>fieldset>div select::-ms-expand{ display: none}
.headerSch>fieldset>div input[type='text']{ line-height: 44px; height: 44px; width: 50%; border: 0 !important; background: #fff; font-size: 17px; color: #323232; }
.headerSch>fieldset>div input[type='button']{ display: block; background: #4c4f56; position: absolute; right: -3px; top: -3px; height: 50px; border-radius: 50px; color: #fff; padding: 0 30px; font-size: 17px; cursor: pointer}
.headerSch>div{ float: right; margin: 15px 0 0; color: #4c4f56;  text-align: right;}
.headerSch>div>h2{ font-size: 17px; font-weight: 500}
.headerSch>div>h2 strong{ color: #0079c0}
.headerSch>div>p{ font-size: 14px;}
.headerSch>div>p.forecast{ color: #e83505; margin-top: 6px; position: relative; padding-left: 35px}
.headerSch>div>p.forecast:before{ content: ''; display: block; position: absolute; left: 0; top: 2px; background: url(../images/common/icon.png) no-repeat -79px -54px; width: 31px; height: 17px}
#container .innerDiv{ width: 1200px; margin: 0 auto; letter-spacing: -0.055em}
#container h2{ font-size: 20px; letter-spacing: -0.085em; font-weight: 500; display: inline-block}
#container{ position: relative; overflow: inherit; margin: 0; padding: 0}
.midSection:before{ content: ''; display: block; height: 405px; width: 100%; background: #e3ecf3 /*url(../images/main/container.png) no-repeat 50% 0 */; position: absolute; left: 0; top: 0; z-index: -1}
.midSection{ width: 1200px; margin: 0 auto; min-height: 355px; padding: 25px 0; z-index: 1}
.mapStatus{ float: left; width: 740px; height: 355px; background: #7db8e5}
.mapStatus .tabstyle{ position: relative; z-index: 1}
.mapStatus .tabstyle>h2{ padding: 15px 0 0 20px;}
.mapStatus .tabstyle>h2:after{ content: '지역을 클릭하시면 현황을 확인하실 수 있습니다. '; display: block; font-size: 14px; font-weight: 300; letter-spacing: -0.035em}
.mapStatus .tabstyle:before{ content: ''; display: block; background: url(../images/main/mainBg.png) no-repeat 0 0; position: absolute; z-index: 1; width: 179px; height: 271px; left: 74px; top: 74px}
.mapStatus .tabstyle:after{ content: ''; display: block; width: 325px; height: 355px; background: #fff; position: absolute; z-index: -1; top: 0;}
.mapStatus .tabstyle>div>div{ display: none; position: absolute; right: 0; top: 0; width: 415px; height: 355px}
.mapStatus .tabstyle>div>div:before{ content: ''; display: block; width: 14px; height: 14px; background: #fff; position: absolute; left: -7px; top: 48%; transform: rotate(45deg)}
.mapStatus .tabstyle>div.active>div{ display: block}
.mapStatus .tabstyle>div>h3{ position: absolute; z-index: 10;}
.mapStatus .tabstyle>div>h3.seoul{  left: 114px; top: 114px}
.mapStatus .tabstyle>div>h3.incheon{  left: 81px; top: 105px}
.mapStatus .tabstyle>div>h3.gangwon{  left: 157px; top: 108px}
.mapStatus .tabstyle>div>h3.gyeonggi{  left: 113px; top: 138px}
.mapStatus .tabstyle>div>h3.chungBuk{  left: 136px; top: 160px}
.mapStatus .tabstyle>div>h3.chungNam{  left: 75px; top: 165px}
.mapStatus .tabstyle>div>h3.sejong{  left: 121px; top: 179px}
.mapStatus .tabstyle>div>h3.deajeon{  left: 132px; top: 198px}
.mapStatus .tabstyle>div>h3.gyeongBuk{  left: 172px; top: 187px}
.mapStatus .tabstyle>div>h3.gyeongNam{ left: 140px; top: 246px}
.mapStatus .tabstyle>div>h3.deagu{  left: 170px; top: 220px}
.mapStatus .tabstyle>div>h3.ulsan{  left: 197px; top: 238px}
.mapStatus .tabstyle>div>h3.busan{  left: 190px; top: 254px}
.mapStatus .tabstyle>div>h3.jeonBuk{  left: 89px; top: 220px}
.mapStatus .tabstyle>div>h3.jeonNam{  left: 83px; top: 270px}
.mapStatus .tabstyle>div>h3.gwangju{  left: 87px; top: 253px}
.mapStatus .tabstyle>div>h3.jeju{  left: 79px; top: 327px}
.mapStatus .tabstyle>div>h3 a{ display: block; font-size: 13px; color: #4d4d4d; font-weight: 500; text-shadow: 1px 1px 0 #fff, -1px -1px 0 #fff;}
.mapStatus .tabstyle>div.active>h3 a{ color: #e83505; font-weight: 700;}
.mapStatus .tabstyle .tabContents > h3{ padding: 15px 0 0 20px; font-size: 20px; letter-spacing: -0.085em; font-weight: 400;}
.mapStatus .tabstyle .tabContents > h3 strong{ color: #000; font-weight: 500;}
.mapStatus .tabstyle .tabContents > h3 + p{ font-size: 14px; padding: 15px 0 0 20px; color: #282828}
.mapStatus .tabstyle .tabContents > div{ margin: 10px 20px 0 20px; height: 232px; overflow: hidden; overflow-y: auto}
.mapStatus .tabstyle .tabContents > div ul li{  float: left; margin: 0 3px 3px 0; width: calc(25% - 3px)}
.mapStatus .tabstyle .tabContents > div ul li a{ display: block; background: rgba(255,255,255,0.1); border: 1px solid #c8e2f0; box-sizing: border-box; text-align: center; height: 75px; font-size: 16px; font-weight: 300; color: #000; word-break: keep-all; letter-spacing: -0.085em; line-height: 1.1; padding-top: 8px; position: relative; overflow: hidden}
.mapStatus .tabstyle .tabContents > div ul li.step2 a{ border-color: #fff100; background: rgba(255,241,0,0.1);}
.mapStatus .tabstyle .tabContents > div ul li.step3 a{ border-color: #ff6c00; background: rgba(255,108,0,0.1);}
.mapStatus .tabstyle .tabContents > div ul li.step4 a{ border-color: #c10c2b; background: rgba(193,12,43,0.1);}
.mapStatus .tabstyle .tabContents > div ul li.step5 a{ border-color: #24070c; background: rgba(36,7,12,0.1);}
.mapStatus .tabstyle .tabContents > div ul li a strong{ font-size: 20px; display: block; color: #fff; position: absolute; bottom: 6px; width: 100%; font-weight: 500}
.mapStatus .tabstyle .tabContents > .more, .newMore{ position: absolute; right: 0; top: 0; display: block; width: 50px; height: 45px; background: #fff; color: transparent; font-size: 0; text-align: center; line-height: 40px}
.mapStatus .tabstyle .tabContents > .more:before, .newMore:before{ content: '\002B'; display: block; color: #323232; font-size: 25px;}
.myMenu{ float: right; width: 445px; background: #fff; height: 355px}
.myMenu>div{ margin-left: 20px; position: relative}
.myMenu>div h2{ display: inline-block; font-size: 20px; letter-spacing: -0.085em; font-weight: 500; color: #0079c0; padding: 15px 0 25px}
.myMenu>div h2 + .button{ margin: 15px 0 0 5px}
.myMenu>div .myMenuSlide li{ height: 105px;}
.myMenu>div .myMenuSlide li a{ display: block; margin-right: 10px; text-align: center}
.myMenu>div .myMenuSlide li a > span{ display: block; text-align: center;}
.myMenu>div .myMenuSlide li a > span.imgA{ background: #e6e6e6; border-radius: 100%; width: 65px; height: 65px;}
.myMenu>div .myMenuSlide li a > span.imgA img{ display: inline-block; height: 45px; margin-top: 10px}
.myMenu>div .myMenuSlide li a > span + span{ font-size: 15px; padding-top: 5px; line-height: 1.1; letter-spacing: -0.065em;}
.myMenu>div .bx-controls .bx-pager, .myMenu>div .bx-controls .bx-controls-auto, .myMenu>div .bx-controls .bx-controls-direction .bx-prev{ display: none}
.myMenu>div .bx-controls .bx-controls-direction{ position: absolute; right: 0; top: 68px; font-size: 0; color: transparent}
.myMenu>div .bx-controls .bx-controls-direction .bx-next{ width: 50px; height: 95px; display: block; background: #fff;}
.myMenu>div .bx-controls .bx-controls-direction .bx-next:before{ content: '\276F'; display: inline-block; color: #4c4f56; font-size: 28px; text-indent: 8px; margin-top: 10px;}
.myMenu> div>.setting{ display: block; position: absolute; top: 0; right: 0; background: #00a9dd; width: 50px; height: 45px; font-size: 0; color: transparent; text-align: center}
.myMenu> div>.setting:after{ content: ''; display: inline-block; background: url(../images/common/icon.png) no-repeat -13px 0; width: 16px; height: 16px; margin-top: 14px}
.myMenu .myScrap{ border-top: 2px solid #e3ecf3}
.myMenu .myScrap h2{ padding: 10px 0 10px}
.myMenu .myScrap > div{ height: 115px; overflow: hidden; overflow-y: auto; margin-right: 15px}
.myMenu .myScrap > div > ul >li{ display: inline-block; width: 48%; vertical-align: top;}
.myMenu .myScrap > div > ul >li a{ display:block; padding: 8px 0 8px 20px; position: relative; font-weight: 400}
.myMenu .myScrap > div > ul >li a:before, .myMenu .myScrap > div > ul >li a:after{ content: ''; display: block; position: absolute; left: 0; top: 12px}
.myMenu .myScrap > div > ul >li a:before{ width: 12px; height: 14px; background: #00a9dd}
.myMenu .myScrap > div > ul >li a:after{ content: '\02D6'; font-size: 13px; color: #fff; left: 4px; line-height: 1}
.myMenu .myScrap .setting{ top: -2px;}
.myMenu .forecastStatus{ display: none; position: absolute; left: -20px; top: 0; width: 445px; height: 355px; background: #fff; z-index: 1}
.myMenu .forecastStatus>h2{ background: #00a9dd; line-height: 45px; padding: 0; color: #fff; width: 100%; text-indent: 10px}
.myMenu .forecastStatus .forecast_tab>div{ position: relative}
.myMenu .forecastStatus .forecast_tab>div>h3{ position: absolute; width: 82px; height: 105px; top: 10px}
.myMenu .forecastStatus .forecast_tab>div:nth-child(1) h3{ left: 17px;}
.myMenu .forecastStatus .forecast_tab>div:nth-child(2) h3{ left: 104px;}
.myMenu .forecastStatus .forecast_tab>div:nth-child(3) h3{ left: 186px;}
.myMenu .forecastStatus .forecast_tab>div:nth-child(4) h3{ left: 268px;}
.myMenu .forecastStatus .forecast_tab>div:nth-child(5) h3{ left: 350px;}
.myMenu .forecastStatus .forecast_tab>div>h3 a{ display: block; margin: 0 5px; font-size: 14px; font-weight: 300; letter-spacing: -0.065em; line-height: 1.1; text-align: center; position: relative}
.myMenu .forecastStatus .forecast_tab>div.active>h3 a{ font-weight: 500; color: #000}
.myMenu .forecastStatus .forecast_tab>div>h3 a span{ display: inline-block; width: 72px; height: 65px; background: #e6e6e6; margin-bottom: 5px; position: relative; text-align: center}
.myMenu .forecastStatus .forecast_tab>div.active>h3 a span{ background: #81c75b}
.myMenu .forecastStatus .forecast_tab>div>h3 a span.b:before{ content: ''; display: block; position: absolute; background: url(../images/common/icon.png) no-repeat -31px 0; width: 23px; height: 26px; left: 8px; top: 13px}
.myMenu .forecastStatus .forecast_tab>div.active>h3 a span.b:before{ background-position: -56px 0}
.myMenu .forecastStatus .forecast_tab>div>h3 a span img{ height: 45px; position: relative; z-index: 1; top: 12px; filter: gray; -webkit-filter: grayscale(100%)}
.myMenu .forecastStatus .forecast_tab>div.active>h3 a span img{ filter: none; -webkit-filter: grayscale(0%)}
.myMenu .forecast_tab>div>div{ display: none; position: absolute; top: 135px; width: 100%; padding-top: 28px; height: 145px; border-top: 2px solid #eaeaea; background: #f8f8f8}
.myMenu .forecast_tab>div.active>div{ display: block}
.myMenu .forecast_tab .forecast_tabCont > span{ display: block; text-align: center; position: absolute; top: -18px; width: 100%;}
.myMenu .forecast_tab .forecast_tabCont > span select{ width: 30%; height: 35px; border: 1px solid #b2b2b2; line-height: 35px;}
.myMenu .forecast_tab .forecast_tabCont > span button{ background: #81c75b; line-height: 35px; padding: 0 10px; margin-left: -5px}
.myMenu .forecast_tab .forecast_tabCont > div{ margin: 0 15px 0 20px; height: 130px; overflow: hidden; overflow-y: auto;}
.myMenu .forecast_tab .forecast_tabCont > div li{ display: inline-block; width: 31%; margin:0 1% 5px 0; position: relative}
.myMenu .forecast_tab .forecast_tabCont > div li a{ display: block; background: #fff; border: 1px solid #b2b2b2; font-size: 14px; line-height: 33px; letter-spacing: -0.065em; text-indent: 5px}
.myMenu .forecast_tab .forecast_tabCont > div li button{ position: absolute; right: 0; top: 0; height: 35px; width: 30px; background: #fff; border: 1px solid #eb5d39; box-sizing: border-box; font-size: 0; color: transparent; cursor: pointer; text-align: center}
.myMenu .forecast_tab .forecast_tabCont > div li button:before, .myMenu .forecastStatus > button:before{ content: '\2715'; display: inline-block; color: #eb5d39; font-size: 18px}
.myMenu .forecast_tab .forecast_tabCont > div li button.signY{ border: 1px solid #098fb6;}
.myMenu .forecast_tab .forecast_tabCont > div li button.signY:before{ content: '\25CB'; color: #098fb6; font-size: 15px}
.myMenu .forecastStatus > button, .btnNewMore{ position: absolute; right: 0; top: 0; height: 45px; width: 50px; background: transparent; color: transparent; font-size: 0; text-align: center}
.myMenu .forecastStatus > button:before, .btnNewMore:before{ font-size: 25px; color: #fff}

.btmSection{ padding: 0 0 30px}
.btmSection>div{ margin-top: 20px}
.btmSection>div:first-child>div{ height: 216px; position: relative}
.btmSection>div:first-child>div>.snsBanner{ display: block; height: 147px; margin-bottom: 10px; background: #f8d251 url(../images/main/mainBg.png) -521px 0; text-align: center; font-size: 20px; letter-spacing: -0.085em; font-weight: 500; line-height: 50px}
.btmSection>div:first-child>div h2{ line-height: 55px; padding: 0 15px}
.diseaseBox{ width: 250px; background: #dfeaf2; margin-right: 14px}
.diseaseBox ul{ margin: 15px 10px 0}
.diseaseBox li{ margin: 8px 0; position: relative; padding: 0 45px 0 60px; height: 43px; overflow: hidden}
.diseaseBox li>i{ display: block; position: absolute; left: 0; top: 0; font-size: 14px; letter-spacing: -0.065em; font-weight: 300; text-align: center;}
.diseaseBox li>i:before{ content: ''; display: block; width: 46px; height: 23px; background: url(../images/common/icon.png) no-repeat 0 -27px}
.diseaseBox li.step2 i:before{ background-position: 0 -50px}
.diseaseBox li.step3 i:before{ background-position: 0 -73px}
.diseaseBox li.step4 i:before{ background-position: 0 -96px}
.diseaseBox li.step5 i:before{ background-position: 0 -119px}
.diseaseBox li i:after{ content: '보통'; display: block; clear: both; font-size: 14px; letter-spacing: -0.065em; font-weight: 300; text-align: center;}
.diseaseBox li.step2 i:after{ content: '낮음';}
.diseaseBox li.step3 i:after{ content: '높음';}
.diseaseBox li.step4 i:after{ content: '아주높음';}
.diseaseBox li.step5 i:after{ content: '위험';}
.diseaseBox li a{ display: block; line-height: 1.4; letter-spacing: -0.065em; font-weight: 300}
.diseaseBox li a.sms{ position: absolute; right: 0; top: 3px; width: 35px; height: 35px; border-radius: 100%; background: #c3d7e6; text-align: center;font-size: 0; color: transparent; padding-top: 0; margin-top: 0;}
.diseaseBox li a.sms:before{ content: ''; display: inline-block; width: 13px; height: 18px; background: url(../images/common/icon.png) no-repeat -81px 0; margin-top: 8px}
.diseaseBox .newMore{ background: #00a9dd}
.diseaseBox .newMore:before{ color: #fff}
.lnkBox a{ display: block; float: left; width: 168px; height: 100%; position: relative; text-align: center}
.lnkBox a:before, .lnkBox a:after{ content: ''; display: block; position: absolute; right: 0; top: 20px; width: 1px; height: calc(100% - 40px); background: #dadada;}
.lnkBox a:before{ content: '바로가기'; top: auto; bottom: 20px; width: auto; left: 50%; transform: translateX(-50%); height: 27px; background: #febc32; font-size: 14px; line-height: 27px; padding: 0 15px; border-radius: 3px}
.lnkBox a:last-child:after{ display: none}
.lnkBox a strong{ display: block; font-size: 16px; font-weight: 500; margin-bottom: 15px}
.lnkBox a strong:before{ content: ''; display: block; background: url(../images/common/icon.png) no-repeat; }
.lnkBox a:nth-child(1) strong:before{ background-position: -96px 0; width: 51px; height: 53px; margin: 17px auto 10px}
.lnkBox a:nth-child(2) strong:before{ background-position: -148px 0; width: 47px; height: 53px; margin: 17px auto 10px}
.lnkBox a:nth-child(3) strong:before{ background-position: -196px 0; width: 45px; height: 48px; margin: 19px auto 13px}
.lnkBox a:nth-child(4) strong:before{ background-position: -242px 0; width: 56px; height: 45px; margin: 20px auto 15px}
.lnkBox a span{ display: block; font-size: 14px; color: #8f9094; font-weight: 300; padding: 0 25px; line-height: 1.2}
.movBox{ width: 250px; background: #1d1d1d; z-index: 1; position: relative; overflow: hidden; text-align: center}
.movBox:before{ content: ''; display: block; width: 100%; height: 100%; position: absolute; background: url(../images/main/mainBg.png) no-repeat -225px 0; z-index: -1}
.movBox>h2{ color: #fff;}
.movBox>p{ border-top: 1px solid #fff; margin: 0 10px; font-size: 14px; color: rgba(255,255,255,0.8); padding: 20px 0 10px; line-height: 1.4; text-align: left; font-weight: 300}
.movBox>a{ display: inline-block; background: #282621; color: #fff; line-height: 60px; padding: 0 25px; border-radius: 5px; margin: 0 0 0 10px}
.btmSection>div:last-child>div{ height: 100px}
.btmSection .week{ width: 50%; background: #80849d; position: relative; z-index: 1}
.btmSection .week:after{ content: ''; display: block; background: url(../images/main/mainBg.png) no-repeat 0 -281px; width: 184px; height: 100px; position: absolute; right: 0; top: 0; z-index: -1}
.btmSection .week + .week:after{ background-position: -202px -281px; width: 152px; }
.btmSection .week h2{ width: 160px; padding: 15px 0 0 15px; height: 85px; color: #fff; background: #404461; position: absolute; z-index: 1}
.btmSection .week + .week  h2{ background: #646883}
.btmSection .week h2 span{ display: block; color: #ced0dc; font-size: 18px; font-weight: 400}
.btmSection .week .bx-wrapper{ margin-left: 175px;}
.btmSection .week li{ padding: 8px 15px 0}
.btmSection .week li a{ display: block; color: #fff; font-weight: 300; letter-spacing: 0}
.btmSection .week li a strong{ font-weight: 400}
.btmSection .week li a:before{ content: '\25AA'; color: #404461; margin-right: 10px; line-height: 27px}
.btmSection .week .bx-pager{ display: none}
.btmSection .week .bx-controls-direction{ position: absolute; left: 95px; z-index: 2; top: 15px}
.btmSection .week .bx-controls-direction a{ display: inline-block; width: 25px; height: 25px; background: #f2f3f4; margin: 0 1px; font-size: 0; color: transparent; text-align: center}
.btmSection .week .bx-controls-direction a:before{ content: '\276E'; display: inline-block; color: #404461; font-size: 16px}
.btmSection .week .bx-controls-direction a + a:before{ content: '\276F';}

/* 예찰요원 */
#forecasting .diseaseBox h2{ line-height: 45px}
#forecasting #headerWrap{ background: #e3ecf3}
/* #forecasting #header>#gnb>li>ul{ min-height: 791px; padding-bottom: 20px}
#forecasting #header>#gnb>li>ul>li>a{ padding: 5px 0 5px 10px;} */

/* 농업인 */
#farmer .header_tp .innerDiv .usrSelect button[type="button"].active{ background: #7bc23e; color: #fff}
#farmer #headerWrap:before{ background: #1fb25a;}
#farmer #header>#gnb>li>a{ color: #fff}
#farmer #header>a{ background: #108618; color: #fff}
#farmer .midSection:before{ background: #e3f3e4 /* url(../images/main/container.png) no-repeat 50% -816px*/;}
#farmer #headerWrap{ background: #e3f3e4 /* url(../images/main/container.png) no-repeat 50% -756px*/;}
#farmer #header>#gnb>li>ul.on{ background: #cae8ca}
#farmer .headerSch>div{ position: relative}
#farmer .headerSch>div>h2{ color: #0079c0; margin-right: 155px}
#farmer .headerSch>div>h2+p{ margin-right: 155px}
.headerSch>div>.weather{ position: absolute; right: 0; top: 0; width: 150px; height: 55px}
.headerSch>div>.weather span{ display: inline-block; line-height: 50px; vertical-align: top; width: 55px; background: url(../images/common/weather.png) no-repeat; height: 45px; font-size: 0; margin: 5px 0 0 0;}
.headerSch>div>.weather span.weather_icon1{ background-position: 0 0}
.headerSch>div>.weather span.weather_icon2{ background-position: -82px 0}
.headerSch>div>.weather span.weather_icon3{ background-position: -165px 0}
.headerSch>div>.weather span.weather_icon4{ background-position: -249px 0}
.headerSch>div>.weather span.weather_icon5{ background-position: -332px 0}
.headerSch>div>.weather span.weather_icon6{ background-position: 0 -93px}
.headerSch>div>.weather span.weather_icon7{ background-position: -82px -93px}
.headerSch>div>.weather span.weather_icon8{ background-position: -165px -93px}
.headerSch>div>.weather span.weather_icon9{ background-position: -249px -93px}
.headerSch>div>.weather span.weather_icon10{ background-position: -332px -93px}
.headerSch>div>.weather span.weather_icon11{ background-position: 0 -198px}
.headerSch>div>.weather span.weather_icon12{ background-position: -82px -198px}
.headerSch>div>.weather span.weather_icon13{ background-position: -165px -198px}
.headerSch>div>.weather span.weather_icon14{ background-position: -249px -198px}
.headerSch>div>.weather span.weather_icon15{ background-position: -332px -198px}
.headerSch>div>.weather span.weather_icon16{ background-position: 0 -281px}
.headerSch>div>.weather span.weather_icon17{ background-position: -82px -281px}
.headerSch>div>.weather span.weather_icon18{ background-position: -165px -281px}
.headerSch>div>.weather span.weather_icon19{ background-position: -249px -281px}
.headerSch>div>.weather span.weather_icon20{ background-position: -332px -281px}
.headerSch>div>.weather span.weather_icon21{ background-position: 0 -374px}
.headerSch>div>.weather span.weather_icon22{ background-position: -82px -374px}
.headerSch>div>.weather span.weather_icon23{ background-position: -165px -374px}
.headerSch>div>.weather span.weather_icon24{ background-position: -249px -374px}
.headerSch>div>.weather span.weather_icon25{ background-position: -332px -374px}
.headerSch>div>.weather span.weather_icon26{ background-position: 0 -468px}
.headerSch>div>.weather span.weather_icon27{ background-position: -82px -468px}
.headerSch>div>.weather span.weather_icon28{ background-position: -165px -468px}
.headerSch>div>.weather span.weather_icon29{ background-position: -249px -468px}
.headerSch>div>.weather span.weather_icon30{ background-position: -332px -468px}
.headerSch>div>.weather span+span{ font-size: 30px; font-weight: 500; margin: 0 8px 0 0; width: auto; background: none}
.headerSch>div>.weather span+span:after{ content: '\02DA\0043'; display: inline-block;}
#farmer .headerSch>div>p.forecast{ color: #4c4f56; margin-right: 0}
#farmer .headerSch>div>p.forecast:before{ background-position: -48px -54px}
#farmer .headerSch>div>p.forecast strong{ font-weight: 500; color: #e83505; margin-left: 5px}
#farmer .midSection{ min-height: 308px}
#farmer .midSection:before{ height: 358px;}
#farmer .midSection>div{ float: left; width: 890px; height: 308px; position: relative}
#farmer .midSection>div h2{ display: inline-block; width: 440px; height: 45px; box-sizing: border-box; line-height: 55px; margin-bottom: 15px; position: relative; text-indent: 35Px}
#farmer .midSection>div h2:before{ content: ''; display: block; background: url(../images/common/icon.png) no-repeat -156px -106px; width: 22px; height: 28px; position: absolute; left: 5px; top: 15px}
#farmer .midSection>div h2+a{ display: inline-block; height: 45px; line-height: 45px; background: #febc32; padding: 0 15px; vertical-align: top; border-radius: 5px; margin-left: 6px; font-size: 16px; letter-spacing: -0.065em; color: #404461}
#farmer .midSection>div h2+a:after{ content: '\276F'; display: inline-block; color: #404461; margin: 0 0 0 30px}
.midSection .lftSection .diagnoseSlide li a{ display: block; position: relative; border: 1px solid #7ac043; box-sizing: border-box; height: 248px; background: #fff}
.midSection .lftSection .diagnoseSlide li a strong{ display: block; height: 42px; overflow: hidden; padding: 155px 10px 0; font-size: 16px; line-height: 1.4; font-weight: 400; letter-spacing: -0.065em; color: #4c4f56}
.midSection .lftSection .diagnoseSlide li a span, .midSection .lftSection .diagnoseSlide li a em{ display: block; position: absolute;}
.midSection .lftSection .diagnoseSlide li a .imgArea{ width: calc(100% + 2px); height: 151px; left: -1px; top: -1px; overflow: hidden; background: #000}
.midSection .lftSection .diagnoseSlide li a .date, .midSection .lftSection .diagnoseSlide li a em{ height: 40px; line-height: 40px; text-indent: 10px; font-size: 14px; width: 100%; background: #f2f3f4; bottom: 0; color: #282828; font-weight: 300}
.midSection .lftSection .diagnoseSlide li a em{ width: auto; right: 10px; color: #eb5d39; font-size: 15px; font-weight: 400}
.midSection .lftSection .diagnoseSlide li a em:before, .midSection .lftSection .diagnoseSlide li a em:after{ content: '\2768'; display: inline-block;}
.midSection .lftSection .diagnoseSlide li a em:after{ content: '\2769'; margin-left: -8px;}
.midSection .lftSection .diagnoseSlide li a .imgArea img{ width: calc(100% + 2px); opacity: 0.6}
.midSection .lftSection .bx-controls{ position: absolute; top: 14px; right: 0; width: 160px; height: 31px}
.midSection .lftSection .bx-controls .bx-pager{ display: none}
.midSection .lftSection .bx-controls-direction{ float: right; width: 72px;}
.midSection .lftSection .bx-controls-auto{ float: left; width: 72px;}
.midSection .lftSection .bx-controls-auto>div{ display: block; float: left}
.midSection .lftSection .bx-controls a{ display: inline-block; width: 35px; height: 31px; font-size: 0; color: transparent; vertical-align: top; background: url(../images/common/icon.png) no-repeat -48px -72px}
.midSection .lftSection .bx-controls a.bx-start.active{ background-position: -122px -72px}
.midSection .lftSection .bx-controls a.bx-stop{ background-position: -85px -72px; margin-left: 2px}
.midSection .lftSection .bx-controls a.bx-stop.active{ background-position: -159px -72px;}
.midSection .lftSection .bx-controls a.bx-prev{ background-position: -48px -104px; margin-right: 2px}
.midSection .lftSection .bx-controls a.bx-next{ background-position: -85px -104px;}
.midSection .lftSection .newMore{ right: auto; left: 350px; background: #7ac043; border-radius: 5px;  width:90px}
.midSection .lftSection .newMore:before{ color: #000; content: '\002B\0020더보기'; font-size: 15px; font-weight: 300; line-height: 45px;}
#farmer .midSection .rgtBanner{ float: right; width: 290px; padding-top: 14px; height: 294px}
#farmer .midSection .rgtBanner>a{ display: block; width: 100%; height: 142px; background: #67d2ff; position: relative; z-index: 1; }
#farmer .midSection .rgtBanner>a:before{ content: ''; display: block; height: 142px; width: 130px; background: url(../images/main/mainBg.png) no-repeat -361px -218px; z-index: -1; position: absolute}
#farmer .midSection .rgtBanner>a:after{ content: ''; display: block; position: absolute; background: url(../images/common/icon.png) no-repeat -275px -48px; width: 82px; height: 82px; left: 13px; top: 36px}
#farmer .midSection .rgtBanner>a+a:after{ background-position: -195px -49px; width: 80px; height: 99px; left: 25px; top: 21px}
#farmer .midSection .rgtBanner>a+a{ margin-top: 10px; background: #01abe6}
#farmer .midSection .rgtBanner>a+a:before{ background-position: -361px -360px; width: 161px; position: absolute; right: 0}
#farmer .midSection .rgtBanner>a strong, #farmer .midSection .rgtBanner>a span{ display: block; position: relative;}
#farmer .midSection .rgtBanner>a strong{ padding: 25px 30px 0 106px; font-size: 20px; line-height: 1.1; font-weight: 400}
#farmer .midSection .rgtBanner>a + a strong{ padding: 27px 30px 0 110px; color: #fff; line-height: 1.4; font-weight: 300}
#farmer .midSection .rgtBanner>a + a strong em{ font-weight: 400; color: #ffe84a}
#farmer .midSection .rgtBanner>a span{ font-size: 15px; padding-left: 106px; color: #eb5d39; line-height: 1.5}
#farmer .midSection .rgtBanner>a span:after{ content: '자세히 알아보기'; display: inline-block; background: #0070b2; color: #fff; line-height: 25px; border-radius: 25px; padding: 0 20px; font-size: 14px; font-weight: 300; margin-top: 5px}
#farmer .damageInfo{ width: 940px}
#farmer .damageInfo>h2, #farmer .damageInfo>h2+div{ float: left; height: 216px;}
#farmer .damageInfo>h2{ width: 210px; padding: 0; background: #8cc63f; text-align: center; color: #fff; line-height: 30px}
#farmer .damageInfo>h2:before{ content: ''; display: block; background: url(../images/myMenu/imgNo_08.png) no-repeat 0 0 / auto 85px; width: 90px; height: 75px; margin: 10px auto 0}
#farmer .damageInfo>h2 span{ display: block; margin: 5px 10px 0; border-top: 1px solid #d3f9b6; font-size: 14px; line-height: 1.3; font-weight: 300; padding-top: 7px; letter-spacing: -0.045em}
#farmer .damageInfo>h2+div{ margin-left: 10px; width: calc(940px - 210px - 10px); position: relative}
#farmer .damageInfo>div>a{ position: absolute; right: 10px; top: 0; font-size: 15px; color: #2d2d2d; line-height: 42px}
#farmer .damageInfo>div>a:before{ content: ''; display: inline-block; background: url(../images/common/icon.png) no-repeat -299px 0; width: 28px; height: 27px; margin-right: 5px; vertical-align: middle}
#farmer .damageInfo>div>a strong{ font-size: 16px; color: #eb5d39; margin-right: 3px}
#farmer .damageInfo .selectArea{ height: 50px; vertical-align: top;}
#farmer .damageInfo .selectArea label{ width: 150px; height: 42px; position: relative; border: 1px solid #4c4f56; border-radius: 5px; box-sizing: border-box; font-size: 0; color: transparent; left: 0; line-height: 1.4;}
#farmer .damageInfo .selectArea label:after{ top: 12px;}
#farmer .damageInfo .selectArea label+select{ display: inline-block; margin: 0 5px 0 -152px; width: 150px; height: 40px; line-height: 40px; border: 0; appearance: none; -webkit-appearance: none; -moz-appearance: none; background: transparent; position:relative; z-index: 1; text-indent: 10px; font-size: 16px}
#farmer .damageInfo .selectArea button{ display: inline-block; background: #1fb25a; border-radius: 5px; line-height: 42px; color: #fff; padding: 0 10px;}
#farmer .damageInfo .selectArea label+select::-ms-expand{ display: none}
.damageList li{ float: left; padding-right: 10px; width: calc(25% - 10px)}
.damageList li a{ display: block; height: 165px; overflow: hidden; text-align: center; position: relative; background: #4c4f56}
.damageList li a img{ width: 100%; opacity: 0.5}
.damageList li a strong{ display: block; position: absolute; bottom: 0; left: 0; width: 100%;text-align: center; font-size: 18px; color: #fff; font-weight: 400}
.damageList li a strong span{ display: block; font-size: 14px; font-weight: 300; font-style: italic; color: rgba(255,255,255,0.7); border-top: 1px solid #fff; margin: 5px 8px 15px; padding-top: 5px; line-height: 1.1; letter-spacing: 0}
#farmer .damageInfo .nongSchedule>h2 strong{ color: #151368; font-weight: 700; margin-right: 5px}
#farmer .damageInfo .nongSchedule{ display: none; position: absolute; left: 0; top: 0; width: 710px; height: 216px; background: #8cc63f; z-index: 2}
#farmer .damageInfo .nongSchedule>h2{ line-height: 45px}
#farmer .damageInfo .nongSchedule>div{ background: #fff; margin: 0 5px 5px; padding: 2px; height: 163px; overflow: hidden}
#farmer .damageInfo .nongSchedule .btnNewMore:before{ content: '\2715'; display: inline-block; color: #fff}
.nongSchedule table{ width: 100%}
.nongSchedule table, .nongSchedule td{ table-layout: fixed}
.nongSchedule .tblSchedule{ border-top: 3px solid #70bc5c}
.nongSchedule .tblSchedule thead th{ border: 1px solid #70bc5c; background: #fff; font-size: 15px; font-weight: 600; color: #434343; line-height: 25px; text-align: center}
.nongSchedule .tblSchedule thead td{ background: #70bc5c; border: 1px solid #70bc5c; font-size: 0; text-indent: -1000000000px; line-height: 0; height: 7px}
.nongSchedule .tblSchedule thead td.bg2{ background: #8dc97d}
.nongSchedule .tblSchedule thead td.bg3{ background: #a9d79d}
.nongSchedule .tblSchedule tbody td{ background: #fff; border: 1px solid #ccc; empty-cells: show; text-align: center; vertical-align: middle; line-height: 1.1; color: #333; padding: 4px 0; letter-spacing: -0.085em; height: 29px;}
.nongSchedule .tblSchedule tbody td.empty{ border: 0 !important; height: 2px; padding: 0}
.nongSchedule .tblSchedule tbody td.bgYellow{ background: #e7ecbd}
.nongSchedule .tblSchedule tbody td.bgBlue{ background: #daedff}
.nongSchedule .tblSchedule tbody td.bgRed{ background: #ffe6d7}
.nongSchedule .tblSchedule tbody td.bgPurple{ background: #dedfff}
.nongSchedule .tblSchedule tbody td.bgGreen{ background: #e6ffde}
.nongSchedule .tblSection table{ border-top: 2px solid #ababab}
.nongSchedule .tblSection th, .nongSchedule .tblSection td{ border: 1px solid #dedede; font-size: 14px; padding: 5px 10px; word-wrap: break-word; white-space: normal;}
.nongSchedule .tblSection th{ background: #f5f5f5; font-weight: 600}
#farmer .btmSection>div:last-child>div{ height: 85px}
#farmer .btmSection>div:last-child>.fl-l a{ display: block; float: left; width: 243px; padding: 17px 0 0 85px; height: 85px; box-sizing: border-box; border: 1px solid #adafbb; background: #f7f7f7; margin-right: 10px; font-size: 18px; color: #4c4f56; font-weight: 400; position: relative}
#farmer .btmSection>div:last-child>.fl-l a:before, #farmer .btmSection>div:last-child>.fl-l a:after{ content: ''; display: block; position: absolute;}
#farmer .btmSection>div:last-child>.fl-l a:before{ background: #e0e0e0; border-radius: 100%; width: 64px; height: 64px; left: 10px; top: 10px}
#farmer .btmSection>div:last-child>.fl-l a:after{ background: url(../images/common/icon.png) no-repeat -329px 0; width: 35px; height: 46px; left: 25px; top: 20px}
#farmer .btmSection>div:last-child>.fl-l a+a:after{ background-position: -366px 0; width: 30px; height: 33px; top: 25px}
#farmer .btmSection>div:last-child>.fl-l a+a+a:after{ background-position: -397px 0; width: 32px; height: 28px; left: 27px; top: 25px}
#farmer .btmSection>div:last-child>.fl-l a span{ display: block; font-size: 15px; font-weight: 300}
#farmer .btmSection>div:last-child>.fl-r{ width: 440px; height: 85px; position: relative; z-index: 1;}
#farmer .btmSection>div:last-child>.fl-r:before{ content: ''; display: block; position: absolute; width: 100%; height: 100%; background: url(../images/main/mainBg.png) no-repeat 0 -502px; z-index: -1}
#farmer .btmSection>div:last-child>.fl-r>h2{ color: #fff; line-height: 85px; padding: 0 15px;}
#farmer .btmSection>div:last-child>.fl-r>h2:after{ content: '\276F'; display: inline-block; font-size: 14px; font-weight: 400; line-height: 85px; vertical-align: top; margin-left: 10px}
#farmer .btmSection>div:last-child>.fl-r>a{ display: inline-block; vertical-align: top; margin: 18px 5px 0; background: rgba(64,68,97,0.5); border: 1px solid #fff; box-sizing: border-box; color: #fff; padding: 0 16px; height: 50px; line-height: 48px}
#farmer .movBox{ text-align: left}
#farmer .movBox:before{ background-position: -225px -150px}
#farmer .movBox>p{ display: none; }
#farmer .movBox>a{ background: transparent; color: #ffe400; line-height: 55px; padding: 0; border-radius: 0; font-size: 15px; position: relative;  padding-left: 20px}
#farmer .movBox>a:before{ content: '\25B8'; display: block; position: absolute; width: 16px; height: 16px; border-radius: 100%; border: 2px solid #ffe400; box-sizing: border-box; font-size: 15px; line-height: 8px; left: 0; top: 19px; text-align: center}

/* 전문가 */
#expert .header_tp .innerDiv .usrSelect button[type="button"].active{ background: #febc32; color: #4c4f56}
#expert #headerWrap:before{ background: #ffdf01;}
#expert #header>#gnb>li>a:before, #expert #header>#gnb>li>a:after{ background: rgba(76,79,86,0.6);}
#expert #header>#gnb>li>a{ color: #404461}
#expert #header>a{ background: #febc32; color: #000}
#expert .midSection:before{ background: #f3f3e3 /* url(../images/main/container.png) no-repeat 50% -408px*/;}
#expert #headerWrap{ background: #f3f3e3 /*url(../images/main/container.png) no-repeat 50% -348px*/;}
#expert #header>#gnb>li>ul.on{ background: #e8e6ca}
#expert .expertMid{ float: left; width: 740px; height: 355px;}
#expert .midSection .myContext{ position: absolute; width: 735px; height: 70px; background: #8cc63f}
#expert .midSection .myContext ul li{ float: left; width: 33.3%; height: 70px; text-indent: 15px; font-size: 16px; line-height: 70px; position: relative; letter-spacing: -0.05em}
#expert .midSection .myContext ul li a{ display: block; position: absolute; right: 15px; top: 0; line-height: 70px; color: #fff; font-size: 18px;}
#expert .midSection .myContext ul li:first-child{ background: #69b131}
#expert .midSection .myContext ul li:first-child+li{ background: #76bf3d}
#expert .midSection .myContext ul li:first-child{ font-size: 18px; font-weight: 500; color: #fff}
#expert .midSection .myContext ul li:first-child a{ color: #ffeb61}
#expert .midSection .lftSection{ float: left; width: 734px; height: 273px; position: relative; margin-top: 82px;}
#expert .midSection .lftSection>h2{ width: 340px; border-color: #febc32}
#expert .midSection .lftSection>h2+a{ background: #ffdf01 !important}
#expert .midSection .lftSection .diagnoseSlide li a{ height: 213px; border-color: #febc32}
#expert .midSection .lftSection .diagnoseSlide li a strong{ padding: 123px 10px 0;}
#expert .midSection .lftSection .diagnoseSlide li a .imgArea{ height: 118px}
#expert .midSection .lftSection .newMore{ left: 250px; background: #febc32}
#expert .btmSection>div{ float: left; width: 890px;}
/* #expert .btmSection .diagnoseInfoBox{ background: #f7f7f7; border: 1px solid #adafbb; height: 220px; overflow: hidden;}
#expert .btmSection .diagnoseInfoBox>div{ float: left;}
#expert .btmSection .diagnoseInfoBox h2{ position: absolute; left: 0; top: 0; line-height: 45px}
#expert .btmSection .diagnoseInfoBox>div button{ float: left; display: block; margin: 8px 3px; background: #dcdcdc; line-height: 30px; padding: 0 20px; border-radius: 5px;}
#expert .diagnoseInfoBox>div.active button{ background: #febc32; font-weight: 500}
#expert .btmSection .diagnoseInfoBox h2 + div button{ margin-left: 210px}
#expert .diagnoseInfoBox>div ul{ display: none; width: 879px}
#expert .diagnoseInfoBox>div.active ul{ display: block; position: absolute; top: 45px; left: 8px} */
#expert .damageList li{ padding-right: 5px; width: calc(20% - 5px);}
#expert .damageList li a{ height: 168px}
#expert .btmSection .siteInfo{ height: 89px; margin-top: 20px; position: relative; z-index: 1; overflow: hidden}
#expert .btmSection .siteInfo:before{ content: ''; display: block; position: absolute; width: 100%; height: 100%; background: url(../images/main/mainBg.png) repeat-x 0 -502px; z-index: -1;}
#expert .btmSection .siteInfo h2{ position: absolute; height: 68px; width: 160px; background: #6d7188; color: #e0e4ff; font-weight: 300; line-height: 1.2; padding: 20px 0 0 20px}
#expert .btmSection .siteInfo h2:after{ content: '\276F'; display: block; font-size: 14px; font-weight: 300; line-height: 88px; vertical-align: top; position: absolute; right: 25px; top: 0}
#expert .btmSection .siteInfo ul{ margin: 5px 20px 0 195px}
#expert .btmSection .siteInfo ul li{ display: inline-block; width: 33%}
#expert .btmSection .siteInfo ul li a{ display: block; color: #fff; font-weight: 300; line-height: 1.2; padding: 4px 0}
#expert .btmSection .siteInfo ul li a:before{ content: '\2012'; display: inline-block; margin-right: 5px}
#expert .btmSection .fl-r{ width: 290px;}
#expert .btmSection .fl-r a{ display: block; float: left; width: 50%; height: 111px; border: 1px solid #d9d9d9; box-sizing: border-box; text-align: center; padding-top: 70px; margin-bottom: -1px; position: relative}
#expert .btmSection .fl-r a:before{ content: ''; display: block; background: url(../images/common/icon.png) no-repeat -357px -46px; position: absolute; top: 20px; width: 38px; height: 33px; left: 50%; transform: translateX(-50%);}
#expert .btmSection .fl-r a:nth-child(2):before{ background-position: -399px -46px; width: 31px; height: 36px}
#expert .btmSection .fl-r a:nth-child(3):before{ background-position: -357px -81px; width: 28px; height: 34px}
#expert .btmSection .fl-r a:nth-child(4):before{ background-position: -399px -83px; width: 31px; height: 37px}
#expert .btmSection .fl-r a:nth-child(5):before{ background-position: -357px -116px; width: 37px; height: 37px}
#expert .btmSection .fl-r a:nth-child(6):before{ background-position: -397px -122px; width: 37px; height: 27px; top: 27px}
#expert .btmSection .fl-r a:nth-child(odd){ margin-right: -1px}
#expert .headerSch>div{ position: relative}
#expert .headerSch>div>h2{ color: #0079c0; margin-right: 155px}
#expert .headerSch>div>h2+p{ margin-right: 155px}
#expert .headerSch>div>p.forecast{ color: #4c4f56; margin-right: 0}
#expert .headerSch>div>p.forecast:before{ background-position: -48px -54px}
#expert .headerSch>div>p.forecast strong{ font-weight: 500; color: #e83505; margin-left: 5px}
#expert .midSection .lftSection>h2{ display: inline-block; width: 335px; height: 45px; box-sizing: border-box; line-height: 55px; margin-bottom: 15px; position: relative; text-indent: 35px}
#expert .midSection .lftSection>h2:before{ content: ''; display: block; background: url(../images/common/icon.png) no-repeat -156px -106px; width: 22px; height: 28px; position: absolute; left: 5px; top: 15px}
#expert .midSection .lftSection>h2+a{ display: inline-block; height: 45px; line-height: 45px; background: #febc32; padding: 0 15px; vertical-align: top; border-radius: 5px; margin-left: 6px; font-size: 16px; letter-spacing: -0.065em; color: #404461}
 #expert .midSection .lftSection>h2+a:after{ content: '\276F'; display: inline-block; color: #404461; margin: 0 0 0 30px}

/* 전체 */
#allMain .header_tp .innerDiv .usrSelect button[type="button"].active{ background: #4c4f56; color: #fff}
#allMain #headerWrap:before{ background: #0c4ca3;}
#allMain #header>#gnb>li>a{ color: #fff}
#allMain #header>a{ background: #0079c0; color: #fff}
#allMain .midSection:before{ background: #e3ecf3 /* url(../images/main/container.png) no-repeat 50% -816px*/;}
#allMain #headerWrap{ background: #e3ecf3 /* url(../images/main/container.png) no-repeat 50% -756px*/;}
#allMain #header>#gnb>li>ul.on{ background: #cadae8}
#allMain .headerSch>div{ position: relative}
#allMain .headerSch>div>h2{ color: #0079c0; margin-right: 155px}
#allMain .headerSch>div>h2+p{ margin-right: 155px}
#allMain .midCenter{ border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; margin: -1px 0 30px;}
#allMain .midCenter>div{ padding: 10px 0; position: relative; z-index: 1;}
#allMain .midCenter .mainCenterSlide>div{ min-height: 55px;}
#allMain .midCenter .bx-controls{ position: absolute; right: 0; top: 2px}
#allMain .midCenter .bx-controls .bx-pager{ display: none}
#allMain .midCenter .bx-controls .bx-controls-direction>a{ display: block; background: url(../images/common/icon.png) no-repeat -363px -186px; width: 31px; height: 31px; margin: 3px 0; font-size: 0; color: transparent}
#allMain .midCenter .bx-controls .bx-controls-direction>a.bx-next{ background-position: -363px -219px}
#allMain .midCenter .mainNotiArea>div{ width: 50%; position: relative; vertical-align: top}
#allMain .midCenter .mainNotiArea>div h2{ float: left; line-height: 55px; text-indent: 10px}
#allMain .midCenter .mainNotiArea>div .newsLnk{ display: block; float: left; padding-right: 100px; width: 320px; line-height: 55px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;font-size: 18px; text-indent: 15px; color: #4c4f56; font-weight: 300; position: relative}
#allMain .midCenter .mainNotiArea>div .newsLnk span{ display: block; line-height: 55px; color: rgba(76,79,86,0.7); position: absolute; right: 10px; top: 0}
#allMain .midCenter .mainNotiArea>div .moreNew{ display: block; width: 50px; height: 45px; background: #00a9dd; position: absolute; right: 0; top: 5px; font-size: 0;}
#allMain .midCenter .mainNotiArea>div .moreNew:before{ content: '\2795'; display: block; color: #fff; text-align: center; line-height: 45px; font-size: 13px}
#allMain .midCenter .mainNotiArea>div + div .moreNew{ background: #7ac043}
#allMain .midCenter .diseaseBox{ background: #fff; padding-left: 20px;}
#allMain .midCenter .diseaseBox li{ float: left; width: calc(25% - 60px); padding: 0 0 0 60px; margin: 3px 0 0; height: 50px; overflow: hidden; position: relative}
#allMain .midCenter .diseaseBox li:after{ content: ''; display: block; width: 0; height: 100%; border-left: 1px dashed  #ccc; position: absolute; right: 20px; top: 0}
#allMain .midCenter .diseaseBox li:last-child:after{ display: none}
#allMain .midCenter .diseaseBox li>i{ top: 8px;}
#allMain .midCenter .diseaseBox li a{ font-size: 18px; line-height: 1.5; font-weight: 500}
#allMain .midCenter .diseaseBox li a span{ display: block; font-size: 16px; font-weight: 300}
#allMain .midSection{ min-height: 329px; padding: 20px 0 0}
#allMain .midSection:before{  height: 348px;}
#allMain .midSection>div{ float: left; width: 890px; height: 308px; position: relative}
#allMain .midSection>div h2{ display: inline-block; width: 440px; height: 45px; box-sizing: border-box; line-height: 55px; margin-bottom: 15px; position: relative; text-indent: 35px}
#allMain .midSection>div h2:before{ content: ''; display: block; background: url(../images/common/icon.png) no-repeat -156px -106px; width: 22px; height: 28px; position: absolute; left: 5px; top: 15px}
#allMain .midSection>div h2+a{ display: inline-block; height: 45px; line-height: 45px; background: #febc32; padding: 0 15px; vertical-align: top; border-radius: 5px; margin-left: 6px; font-size: 16px; letter-spacing: -0.065em; color: #404461}
#allMain .midSection>div h2+a:after{ content: '\276F'; display: inline-block; color: #404461; margin: 0 0 0 30px}
#allMain .midSection .rgtBanner{ float: right; width: 290px; padding-top: 14px; height: 294px}
#allMain .midSection .rgtBanner>a{ display: block; width: 100%; height: 142px; background: #67d2ff; position: relative; z-index: 1; }
#allMain .midSection .rgtBanner>a:before{ content: ''; display: block; height: 142px; width: 130px; background: url(../images/main/mainBg.png) no-repeat -361px -218px; z-index: -1; position: absolute}
#allMain .midSection .rgtBanner>a:after{ content: ''; display: block; position: absolute; background: url(../images/common/icon.png) no-repeat -275px -48px; width: 82px; height: 82px; left: 13px; top: 36px}
#allMain .midSection .rgtBanner>a+a:after{ background-position: -195px -49px; width: 80px; height: 99px; left: 25px; top: 21px}
#allMain .midSection .rgtBanner>a+a{ margin-top: 10px; background: #01abe6}
#allMain .midSection .rgtBanner>a+a:before{ background-position: -361px -360px; width: 161px; position: absolute; right: 0}
#allMain .midSection .rgtBanner>a strong, #farmer .midSection .rgtBanner>a span{ display: block; position: relative;}
#allMain .midSection .rgtBanner>a strong{ padding: 25px 30px 0 106px; font-size: 20px; line-height: 1.1; font-weight: 400}
#allMain .midSection .rgtBanner>a + a strong{ padding: 27px 30px 0 110px; color: #fff; line-height: 1.4; font-weight: 300}
#allMain .midSection .rgtBanner>a + a strong em{ font-weight: 400; color: #ffe84a}
#allMain .midSection .rgtBanner>a span{ font-size: 15px; padding-left: 106px; color: #eb5d39; line-height: 1.5}
#allMain .midSection .rgtBanner>a span:after{ content: '자세히 알아보기'; display: inline-block; background: #0070b2; color: #fff; line-height: 25px; border-radius: 25px; padding: 0 20px; font-size: 14px; font-weight: 300; margin: 5px 0 0 106px;}
#allMain .movBox{ text-align: left}
#allMain .movBox:before{ background-position: -225px -150px}
#allMain .movBox>p{ display: none; }
#allMain .movBox>a{ background: transparent; color: #ffe400; line-height: 55px; padding: 0; border-radius: 0; font-size: 15px; position: relative;  padding-left: 20px}
#allMain .movBox>a:before{ content: '\25B8'; display: block; position: absolute; width: 16px; height: 16px; border-radius: 100%; border: 2px solid #ffe400; box-sizing: border-box; font-size: 15px; line-height: 8px; left: 0; top: 19px; text-align: center}
#allMain .damageInfo{ width: 940px}
#allMain .damageInfo>h2{ height: 40px; line-height: 35px; padding-left: 0; text-indent: 35px; position: relative; top: -5px}
#allMain .damageInfo>h2:before{ content: ''; display: block; background: url(../images/common/icon.png) no-repeat -359px -157px; width: 28px; height: 27px; position: absolute; left: 0; top: 5px;}
#allMain .damageInfo>h2 span{ margin-left: 10px; font-size: 15px; letter-spacing: -0.035em; color: #0079c0; font-weight: 400}
#allMain .damageInfo>h2+div{ margin-left: 0; width: 100%; position: static}
#allMain .damageInfo>div>a{ position: absolute; right: 10px; top: -5px; font-size: 15px; color: #2d2d2d; line-height: 42px}
#allMain .damageInfo>div>a:before{ content: ''; display: inline-block; background: url(../images/common/icon.png) no-repeat -299px 0; width: 28px; height: 27px; margin-right: 5px; vertical-align: middle; font-size: 16px; color: #eb5d39; }
#allMain .btmSection>div:first-child{ margin-top: 0}
#allMain .damageInfo .nongSchedule>h2 strong{ color: #151368; font-weight: 700; margin-right: 5px}
#allMain .damageInfo .nongSchedule{ display: none; position: absolute; left: 0; top: 0; width: 100%; height: 216px; background: #8cc63f; z-index: 2}
#allMain .damageInfo .nongSchedule>h2{ line-height: 45px}
#allMain .damageInfo .nongSchedule div{ background: #fff; margin: 0 5px 5px; padding: 2px 2px 2px 190px; height: 163px; overflow: hidden; position: relative}
#allMain .damageInfo .nongSchedule .selectArea{ margin: 5px; padding: 0; height: auto; display: inline-block; background: transparent}
#allMain .damageInfo .nongSchedule .btnNewMore:before{ content: '\2715'; display: inline-block; color: #fff}
#allMain .damageInfo .nongSchedule .cropsImg{ position: absolute; overflow: hidden; width: 188px; height: 100%; left: 0; top: 0}
#allMain .damageInfo .nongSchedule .cropsImg img{ height: 100%}
#allMain .damageInfo .selectArea{ height: 48px; vertical-align: top;}
#allMain .damageInfo .selectArea label{ width: 150px; height: 35px; position: relative; background: #fff; border: 1px solid #4c4f56; border-radius: 5px; box-sizing: border-box; font-size: 0; color: transparent; left: 0; line-height: 1.4;}
#allMain .damageInfo .selectArea label:after{ top: 7px;}
#allMain .damageInfo .selectArea label+select{ display: inline-block; margin: 0 5px 0 -152px; width: 150px; height: 33px; line-height: 30px; border: 0; appearance: none; -webkit-appearance: none; -moz-appearance: none; background: transparent; position:relative; z-index: 1; text-indent: 10px; font-size: 16px}
#allMain .damageInfo .selectArea button{ display: inline-block; background: #58ae30; border-radius: 5px; line-height: 35px; color: #fff; padding: 0 10px;}
#allMain .damageInfo .selectArea label+select::-ms-expand{ display: none}
#allMain .damageList li a{ height: 175px}
#allMain .btmSection>div:last-child, #allMain .btmSection>div:last-child>div{ height: 215px;}
#allMain .btmSection>div .monthInfoBox{ width: 460px; position: relative}
#allMain .btmSection>div .monthInfoBox>div>h3{ position: absolute; width: 35%; left: 0; top: 0}
#allMain .btmSection>div .monthInfoBox>div:nth-child(2)>h3{ left: 35%}
#allMain .btmSection>div .monthInfoBox>div>h3 a{ display: block; line-height: 45px; text-align: center; background: #fff; border: 1px solid #adafbb; box-sizing: border-box; font-size: 16px;}
#allMain .btmSection>div .monthInfoBox>div.active>h3 a{ background: #4c4f56; border-color: #4c4f56; color: #fff; font-weight: 500}
#allMain .btmSection>div .monthInfoBox>div>div{ padding-top: 45px; display: none}
#allMain .btmSection>div .monthInfoBox>div>div ul{ padding: 10px 0}
#allMain .btmSection>div .monthInfoBox>div>div ul li{ position: relative}
#allMain .btmSection>div .monthInfoBox>div>div ul li a{ display: block; padding: 0 100px 0 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 16px; line-height: 30px;}
#allMain .btmSection>div .monthInfoBox>div>div ul li a span{ display: block; position: absolute; right: 10px; top: 0; line-height: 30px; color: rgba(76,79,86,0.7)}
#allMain .btmSection>div .monthInfoBox>div>div ul li a:before{ content: '\2013'; display: inline-block; margin-right: 5px }
#allMain .btmSection>div .monthInfoBox>div>div ul+a{ display: block; position: absolute; right: 0; top: 10px; line-height: 35px; padding: 0 10px}
#allMain .btmSection>div .monthInfoBox>div>div ul+a:before{ content: '\002B'; display: inline-block; margin-right: 5px;}
#allMain .btmSection>div .monthInfoBox>div.active>div{ display: block}
#allMain .btmSection>div .mainImLnk{ margin-left: 20px; width: 450px; background: #7ac043; position: relative}
#allMain .btmSection>div .mainImLnk:before{ content: ''; display: block; position: absolute; width: 100%; height: 95px; left: 0; bottom: 0; background: #58ae30}
#allMain .btmSection>div .mainImLnk a{ display: block; float: left; width: calc(25% - 30px); padding: 140px 15px 20px; height: 55px; text-align: center; position: relative; color: #fff; font-size: 16px; line-height: 1.3;}
#allMain .btmSection>div .mainImLnk a:before{ content: ''; display: block; background: url(../images/common/icon.png) no-repeat -32px -201px; width: 73px; height: 47px; position: absolute; top: 40px; left: 22px}
#allMain .btmSection>div .mainImLnk a+a:before{ background-position: -105px -201px; width: 56px; height: 51px; left: 27px}
#allMain .btmSection>div .mainImLnk a+a+a:before{ background-position: -161px -197px; width: 50px; height: 52px; left: 30px}
#allMain .btmSection>div .mainImLnk a+a+a+a:before{ background-position: -211px -201px; width: 57px; height: 52px;}
#allMain .btmSection>div .mainImLnk a:after{ content: ''; display: block; width: 0; height: 165px; border-left: 1px dotted #b0dc60; position: absolute; right: 0; top: 30px}
#allMain .btmSection>div .mainImLnk a:last-child:after{ display: none}
#allMain .btmSection>div:last-child .fl-r{ width: 250px; background: #7ac043; position: relative; z-index: 1}
#allMain .btmSection>div:last-child .fl-r:before{ content: ''; display: block;  background: url(../images/common/icon.png) no-repeat -269px -201px;position: absolute; width: 92px; height: 86px; top: 48px; right: 5px; z-index: -1}
#allMain .btmSection>div:last-child .fl-r h2{ text-indent: 10px; line-height: 45px;}
#allMain .btmSection>div:last-child .fl-r>p{ font-size: 15px; padding: 0 50px 15px 10px;}
#allMain .btmSection>div:last-child .fl-r>div{ position: absolute; bottom: 0; left: 0; width: calc(100% - 20px); background: #58ae30; padding: 0 10px 15px}
#allMain .btmSection>div:last-child .fl-r>div strong{ display: block; color: #fff; font-size: 18px; line-height: 38px; font-weight: 400}
#allMain .btmSection>div:last-child .fl-r>div a{ display: inline-block; line-height: 30px; width: 48%; font-size: 15px; background: #e9ffce; border-radius: 3px; text-indent: 8px}
#allMain .btmSection>div:last-child .fl-r>div a+a{ background: #c1f779; margin-left: 5px}
#allMain .damageList li a strong{ text-align: left; padding: 0 10px 10px; width: calc(100% - 20px)}
#allMain .damageList li a strong em{ display: block; font-size: 15px; color: #ffdf01}
#allMain .damageList li a span{ display: block; position: absolute; left: 0; top: 0; background: #e45a37; color: #fff; line-height: 35px; padding: 0 15px;}

.btnArea{ margin: 10px 0 30px; text-align: center}
.btnArea:after{ content: ''; display: block; clear: both}
.button,
.button *{ position:relative; margin:0; padding:0; display:inline-block; text-decoration:none !important; border:0; white-space:nowrap; vertical-align:top; overflow:visible; cursor: pointer; letter-spacing: -0.08em; color: #000;}
.button.small{ line-height: 28px; padding: 0 12px; font-size: 15px; border-radius: 3px}
.button.bgGreen{ background: #85c12d; color: #323232}

#footer .realFooter{ padding-bottom: 40px; font-size: 14px; color: #7a7e82;}
#footer .realFooter>div{ border-top: 2px solid #1e2e46}
#footer .footLogo{ display: block; background: url(../images/common/ci.png) no-repeat 0 -56px; width: 150px; height: 46px; position: absolute;  font-size: 0; color: transparent; left: 20px; top: 25px}
#footer address{ padding: 20px 0 0 190px; font-weight:300; letter-spacing: 0.01em; margin: 0}
#footer .innerDiv>p{ padding: 0 0 0 190px; font-weight: 300; letter-spacing: 0.04em; line-height: 1.5}
#footer .innerDiv>p.tel{  color: #000}
#footer .realFooter .innerDiv > ul{ position: absolute; right: 10px; top: 10px}
#footer .realFooter .innerDiv > ul li{ float: left;}
#footer .realFooter .innerDiv > ul li a{ display: block; font-size: 15px; padding: 0 5px; line-height: 30px; font-weight: 300;}
#footer .realFooter .innerDiv > ul li a:after{ content: '\2758'; display: inline-block; margin-left: 10px}
#footer .realFooter .innerDiv > ul li:last-child a{ color: #e83505; font-weight: 500}
#footer .realFooter .innerDiv > ul li:last-child a:after{ display: none}

.quickMenu{ position: fixed; top: 0; right: 0; height: 100%; z-index: 10; text-align: center}
.quickMenu>.quickM{ position: absolute; display: block; background: #4c4f56; width: 65px; height: 203px; cursor: pointer; text-align: center; font-size: 0; right: 0}
.quickMenu>a:before{ content: ''; display: inline-block; background: url(../images/common/icon.png) no-repeat 0 -157px; width: 30px; height: 138px; margin-top: 30px}
.quickMenu>div{ width: 125px; height: 100%; color: #fff; background: rgba(76,79,86,0.9); overflow-y: auto; display: none;}
.quickMenu.active>div{ display: block;}
.quickMenu.active .quickM{ display: none;}
.quickBox h2{ background: #33363c; color: #fff; line-height: 41px;}
.quickBox a{ display: block; color: #fff; font-weight: 300; margin: 20px 10px 30px; line-height: 1.1; font-size: 14px; opacity: 0.8}
.quickBox a:before{ content: ''; display: block; background: url(../images/common/icon.png) no-repeat  -66px -152px; width: 32px; height: 45px; margin: 0 auto 8px}
.quickBox a.q_myS:before{ background-position: -101px -152px; width: 43px; height: 36px;}
.quickBox a.q_openApi:before{ background-position: -147px -152px; width: 42px; height: 32px;}
.quickBox a.q_openApiList:before{ background-position: -193px -152px; width: 34px; height: 43px;}
.quickBox a.q_reQ:before{ background-position: -230px -152px; width: 56px; height: 39px;}
.quickBox a.q_spotS:before{ background-position: -288px -152px; width: 69px; height: 48px;}
.quickBox a.q_spotA:before{ background-position: -34px -254px; width: 50px; height: 46px;}
.quickBox a.q_myFarm:before{ background-position: -90px -254px; width: 49px; height: 44px;}
.quickBox a.q_faq:before{ background-position: -144px -254px; width: 33px; height: 44px;}
.quickBox>.quickM{ position: static; display: block !important; background: url(../images/common/icon.png) no-repeat -33px -157px; width: 30px; height: 30px; font-size: 0; opacity: 100; margin: 0 auto}
.quickBox>.quickM:before{ display: none}

/* 서브 스타일 반영 */
#Ncontent, .middlecontents{ min-width: 1200px; display: block}
.middlecontents{ padding-top: 121px; overflow: inherit}
.middlecontents:before, .middlecontents:after{ content: ''; display: block; background: #f6f6f6; position: absolute; left: 0; top: 0; border-bottom: 1px solid #ccc; height: 120px; width: 100%;}
.middlecontents:after{ background: url(../images/common/sub_tp.png) no-repeat 50% 0; opacity: 0.15; border: 0}
.subcontent h3{ position: absolute; top: -120px; float: none !important; left: calc(50% - 115px); transform: translateX(-50%); height: 75px; line-height: 80px; font-weight: 600; border-bottom: 1px solid #333;  padding: 0 30px; z-index: 1}
.root{ display: inline-block; float: none; width: auto; padding: 0; position: absolute; top: -45px; left: calc(50% - 115px); transform: translateX(-50%); height: 45px; line-height: 45px; z-index: 1}
.root>span, .root>strong{ font-size: 16px; color: #4c4f56 !important; letter-spacing: -0.055em; display: inline-block; line-height: 45px; font-weight: 300;}
.root>strong{ font-weight: 700; color: #333 !important;}
.aside{ width: 230px; margin: 0 0 0 10px; padding: 0;}
.aside:before{ content: ''; display: block; height: 4px; width: 100%; background: #85c12d; position: relative; z-index:1; margin-top: -4px;}
#Ncontent .asideTitle{ width: 230px; height: 106px; padding: 0; background: #0c4ca3; border-radius: 0 0 5px 5px; position: relative; display: table-cell; vertical-align: middle; overflow: hidden; z-index: 1}
#Ncontent .asideTitle:before{ content: ''; display: block; position: absolute; left: 0; top: 0; border-left: 115px solid #0e57af; border-right: 115px solid #0e57af; border-bottom: 53px solid #1061b9; border-top: 53px solid #0c4ca3; z-index: -1}
#Ncontent #container{ float: left; width: calc(100% - 260px)}
#Ncontent #container select{ border: 1px solid #ccc; height: 30px}
.subcontent{ padding: 0 0 30px 20px}
#Ncontent+#footer .realFooter>div{ width: calc(100% - 20px); margin: 0 10px}
.contentBody{ border: 0}
.aside_noleft, .btnLeftClose{ position: absolute; left: 10px; top: 85px; height: 35px; width: 115px; background: #0c4ca3; z-index: 3; border-radius: 5px 5px 0 0}
.btnLeftOpen{ position: static; display: block; height: 35px;}
.webdoumi{ float: none; width: 35px; height: 35px; border-radius: 3px; background: #febc32; display: inline-block; vertical-align: top; position: relative; top: 10px}
.webdoumi:before{ content: '\003F'; display: block; position: absolute; width: 35px; height: 35px; text-align: center; line-height: 35px; color: #fff; font-size: 23px; top: 0}
.webdoumi img{ display: none}
.btnLeftOpen:before, .btnLeftClose:before{ content: '메뉴펼치기\0020\25B8'; display: block; position: absolute; width: 100%; height: 100%; left: 0; top: 0; color: #fff; text-align: center; line-height: 33px; font-weight: 300}
.btnLeftClose:before{ content: '\25C2\0020메뉴접기';}
.btnLeftOpen img, .btnLeftClose img{ display: none}
.sMenu{ width: 100%; margin-top: -5px; padding-top: 5px; border: 1px solid #ccc; border-top: 0; box-sizing: border-box;}
.sMenu li > a{ border: 0; border-bottom: 1px solid #ccc; position: relative; background: #fff; color: #4c4f56; line-height: 1.3; font-size: 16px; padding: 15px 35px 13px 15px; height: auto}
.sMenu li:last-child > a{ border-bottom: 0}
.sMenu li > a:after{ content: '\002B'; display: block; position: absolute; right: 20px; top: 0; font-weight: 700; font-size: 20px; line-height: 45px}
.sMenu li > a.active, .sMenu li > a:hover{ background: #fff; color: #4c4f56 !important; font-weight: 600; font-size: 16px; line-height: 1.2}
.sMenu li > a.active:after{ content: ''; height: 3px; background: #1fb25a; width: 12px; top: 50%;}
.sMenu li > a.active:before{ content: ''; display: block; width: calc(100% + 2px); height: calc(100% + 2px); border: 2px solid #1fb25a; box-sizing: border-box; position: absolute; left: -1px; top: -1px}
.sMenu li ul{ padding: 0; background: #f3f3f3; border: 0; padding: 1px 0 0}
.sMenu li li a, .sMenu li .last a{ width: auto; padding: 10px 0 10px 20px; line-height: 1.3; background: #f3f3f3; margin: 0; font-size:15px}
.sMenu li li a:after{ display: none}
.sMenu li .last{ padding: 0}
.sMenu li li a:hover,.sMenu li li a.active{ background: #e8e8e8 !important; font-weight: 500; text-decoration: none;}
#Ncontent .button.small{ background: none; line-height: 24px; padding: 0}

/* 2018 11 23 */
.headerSch>fieldset>div{ z-index: 10}
#mainSrhSelBox{ position: absolute; top: 21px; left: -3px; background: url(../images/common/mainSrhSelBox.png) no-repeat 0 0;  width: 100%; padding-top: 26px; width: calc(100% + 6px); height: 38px;}
#mainSrhSelBox label{ position: relative; color: #fff; width: auto; height: auto; font-size: 16px; line-height: 35px; text-indent: 0; left: auto; margin-right: 18px}
#mainSrhSelBox label:after{ display: none}
#mainSrhSelBox label:before{ content: ''; display: inline-block; background: rgba(255,255,255,0.7); width: 14px; height: 14px; border-radius: 100%; margin-right: 5px; color: #000; line-height: 10px; text-align: center}
#mainSrhSelBox input[type='radio']{ display: none}
#mainSrhSelBox input[type='radio']:checked+label{ color: #000; font-weight: 500;}
#mainSrhSelBox input[type='radio']:checked+label:before{ content: '\2714'; color: #ff5a00; background: #fff}
#expert .btmSection .siteInfo{ overflow: inherit;   width: 890px; }
#expert .btmSection .siteInfo ul{ margin: 0; padding: 5px 0 0 190px; position: absolute; height: 83px; width: 690px; overflow: hidden; bottom: 0}
#expert .btmSection .siteInfo .moreNew{ position: absolute; z-index: 10; left: 120px; top: 43px; font-size: 0;}
#expert .btmSection .siteInfo:before{ width: 890px; height: 89px;}
#expert .btmSection .siteInfo h2{ padding-left: 15px; width: 165px}
#expert .btmSection .siteInfo h2:after{ display: none}
#expert .btmSection .siteInfo.more .moreNew{ top: -150px; left: 105px}
#expert .btmSection .siteInfo .moreNew:before{ content: '\002B\0020더보기'; display: block; position: absolute; background: #e0e4ff; display: block; border-radius: 3px; font-size: 14px; color: #333;text-align: center; line-height: 28px; letter-spacing: -0.08em;  width: 50px; height: 28px;}
#expert .btmSection .siteInfo.more .moreNew:before{ content: '\002D\0020간략보기'; width: 65px;}
#expert .btmSection .siteInfo.more h2{ height: 265px; bottom: 0}
#expert .btmSection .siteInfo.more ul{ height: 270px;  overflow: inherit; }
#expert .btmSection .siteInfo.more:before{ height: 285px; bottom: 0}

/* 버튼 재정의 */
.button *{  display: inline-block; }
.button.medium a{ display: inline-block; line-height: 35px; height: 35px; padding: 0 30px !important; font-size: 15px; border-radius: 5px; background: #0079c0; border: 0; letter-spacing: 0}
.button.medium.green a{ background: #85c12d}
.button a#openHelper:before, .button a#closeHelper:before, .btnSchbox2:before{ content: '\25BE'; display: inline-block; font-size: 25px; vertical-align: middle; margin-right: 3px; position: relative; top: -2px}
.button a#closeHelper:before{ content: '\25B4';}
.button.medium2 a { display: inline-block; line-height: 35px; height: 35px; padding: 0 30px !important; font-size: 15px !important; border-radius: 5px; background: #80849d; border: 0; letter-spacing: 0}
.btnSchbox, .btnSchbox2{ display: inline-block; line-height: 35px; height: 35px; padding: 0 30px !important; font-size: 15px; border-radius: 5px; background: #fff !important; border: 0; letter-spacing: 0; border: 1px solid #80849d}
.btnSchbox{ background: #80849d !important; color: #fff !important}
.document, .excel { background: none; padding-left: 0 !important}
.document:before, .excel:before{ content: '\2263'; top: -2px; position: relative; margin-right: 3px; }
.excel:before{ content: '\225A'; }
.pagination a, .pagination strong{ line-height: 30px; padding: 0 5px; height: auto !important; min-width: 20px; font-size: 15px; margin: 0}
.pagination strong{ background: #f7f7f7; border: 1px solid #e7e7e7; color: #d81519}

/* 2018 12 10 */
#allMain .midSection{ min-height: 339px;}
#allMain .midSection:before{ height: 358px;}
#allMain .midSection>div{ width: 665px}
#allMain .midSection .lftSection .newMore{ right: 170px; left: auto; background: #febc32; border-radius: 5px; width: auto; font-size: 15px; color: #323232; padding: 0 10px}
#allMain .midSection .lftSection .newMore:before{ display: none}
#allMain .midSection .lftSection .newMore:after{ color: #000; content: '\276D'; font-size: 15px; font-weight: 300; line-height: 45px; margin-left: 5px}
#allMain .midSection:after{ content: '\26A0\0020상세병해충 정보는 홈페이지 상단 병해충검색을 통해 확인하십시오'; display: block; clear: both; font-size: 14px; color: #404461; line-height: 30px; margin-left: 10px}
#allMain .midSection>div.mainQuickLnk{ margin: 14px 0 0 10px; width: 225px; height: 294px; overflow: hidden; position: relative}
#allMain .midSection>div.mainQuickLnk>div{ width: 225px; height: 294px; position: relative}
#allMain .midSection>div.mainQuickLnk>div ul:after{ content: ''; display: block; clear: both}
#allMain .midSection>div.mainQuickLnk>div li{ float: left; margin-bottom: -1px; width: 50%; background: #fff;}
#allMain .midSection>div.mainQuickLnk>div li a{ display: block; border: 1px solid #80849d; padding-top: 65px; height: 31.5px;  text-align: center; position: relative; z-index: 1}
#allMain .midSection>div.mainQuickLnk>div li a:before{ content: ''; display: block; position: absolute; background: url(../images/main/allMain_ic.png) no-repeat; height: 42px; top: 16px; left: 50%; transform: translateX(-50%);}
#allMain .midSection>div.mainQuickLnk>div li:nth-child(1) a:before{ width: 43px; background-position: 0 -38px}
#allMain .midSection>div.mainQuickLnk>div li:nth-child(2) a:before{ width: 38px; background-position: -44px -38px}
#allMain .midSection>div.mainQuickLnk>div li:nth-child(3) a:before{ width: 31px; background-position: -84px -38px}
#allMain .midSection>div.mainQuickLnk>div li:nth-child(4) a:before{ width: 37px; background-position: -116px -38px}
#allMain .midSection>div.mainQuickLnk>div li:nth-child(5) a:before{ width: 36px; background-position: -154px -38px}
#allMain .midSection>div.mainQuickLnk>div li:nth-child(6) a:before{ width: 31px; background-position: -191px -38px}
#allMain .midSection>div.mainQuickLnk>div + div li a:before{ height: 38px;}
#allMain .midSection>div.mainQuickLnk>div + div li:nth-child(1) a:before{ width: 35px; background-position: 0 0;}
#allMain .midSection>div.mainQuickLnk>div + div li:nth-child(2) a:before{ width: 20px; background-position: -36px 0}
#allMain .midSection>div.mainQuickLnk>div + div li:nth-child(3) a:before{ width: 31px; background-position: -58px 0}
#allMain .midSection>div.mainQuickLnk>div + div li:nth-child(4) a:before{ width: 37px; background-position: -90px 0}
#allMain .midSection>div.mainQuickLnk>div + div li:nth-child(5) a:before{ width: 39px; background-position: -127px 0}
#allMain .midSection>div.mainQuickLnk>div + div li:nth-child(6) a:before{ width: 31px; background-position: -167px 0}
#allMain .midSection>div.mainQuickLnk>div li:nth-child(even){ margin-left: -1px}
#allMain .midSection>div.mainQuickLnk>div li.bg1{ background: #f2f3f4}
#allMain .midSection>div.mainQuickLnk>div ul + a{ display: none; position: absolute; top: 0; left: 0; background: rgba(122,192,67,0.5); color: #333; text-align: center;}
#allMain .midSection>div.mainQuickLnk>div ul + a:after{ content: '\279D'; display: inline-block;}
#allMain .midSection>div.mainQuickLnk>div.active:before{ border: 3px solid #7ac043; position: absolute; box-sizing: border-box; content: ''; display: block; width: 100%; height: 100%}
#allMain .midSection>div.mainQuickLnk>div.active ul + a{ display: block; z-index: 10; height: 35px; width: 100%; line-height: 35px}
#allMain .midSection>div.mainQuickLnk>div.disNone{ display: none}
#allMain .damageInfo:before{ content: ''; display: block; position: absolute; left: 0; top: 0; width: calc(100% - 10px); height: 38px; border: 1px solid #d0d0d0; border-top-color: #a8a8a8; box-sizing: border-box}
#allMain .damageInfo>h2{ top: 0; left: 5px}
#allMain .damageInfo>div>a{ top: -3px; right: 20px}

/* 2019 02 28 */
#container .subcontent, #container .subcontent .contentBody{ min-width: 950px;}
#container .subcontent .contentBody.mapDivCont:after, .selctSchBox > ul:after{ content: ''; display: block; clear: both;}
#container .subcontent .contentBody.mapDivCont .mapBoxDiv{ float: right; width: 45%; min-width: 480px; height: 650px; overflow: hidden;}
#container .subcontent .contentBody.mapDivCont > div{ float: left; width: 54%; min-width: 450px;}
.selctSchBox{ background: #f3f3f3; border: 1px solid #d8d8d8; padding: 10px 0 0 10px; position: relative}
.selctSchBox:before{ content: ''; display: block; width: 100%; box-sizing: border-box; height: 4px; border-bottom: 1px solid #d8d8d8;background: #fff; position: absolute; left: 0; top: 0}
.selctSchBox > ul li{ float: left; width: 33.33%; margin-bottom: 7px}
.selctSchBox > ul li label{ display: inline-block; font-size: 15px; color: #323232; line-height: 30px; font-weight: 500}
.selctSchBox > ul li label:before{ content: ''; display: inline-block; vertical-align: middle; width: 6px; height: 6px; background: #1fb25a; margin-right: 7px}
.selctSchBox .selectStyle, .selectStyle{ display: inline-block; position: relative; border: 1px solid #d8d8d8; box-sizing: border-box; height: 35px; border-radius: 3px; line-height: 35px; background: #fff}
.selctSchBox .selectStyle:after, .selectStyle:after{ content: '\25BE'; display: block; position: absolute; right: 0; top: 0; width: 35px; height: 35px; border-left: 1px solid #d8d8d8; text-align: center;  line-height: 30px; font-size: 1.5em; color: #4c4f56}
.selctSchBox .selectStyle select, .selectStyle select{ appearance: none; -webkit-appearance: none; -moz-appearance: none; border: 0 !important; height: 33px !important; line-height: 33px; width: 100%; background: transparent; position: relative; z-index: 1; text-indent: 15px}
.selctSchBox .selectStyle select::-ms-expand, .selectStyle select::-ms-expand{ display: none}
.selctSchBox .button{ position: absolute; right: 10px; bottom: 7px;}
.selctSchBox .button input{ background: transparent; line-height: 35px; color: #fff}
.borderBox{ border: 1px solid #d8d8d8; border-top: 0; padding: 5px;}
.borderBox .button{ margin: 3px 0 3px 3px}
.selctSchBox > ul li .selectStyle.w3{ width: calc(32.5% - 5px); margin-right: 5px}
.selctSchBox .pointRht{ position: absolute; right: 10px; top: 15px; font-size: 14px; color: #f95d22}
.mapDivCont .signDiv{ margin-top: 5px}
.mapDivCont .signDiv > p, .mapDivCont .multiBox > div{ float: left; width: 33%; margin: 0 0.5%;}
.mapDivCont .signDiv > p:first-child, .mapDivCont .signDiv > p:last-child, .mapDivCont .multiBox > div:first-child, .mapDivCont .multiBox > div:last-child{ margin: 0}
.mapDivCont .signDiv > p span, .mapDivCont .signDiv > p strong{ display: block; box-sizing: border-box; line-height: 35px; text-align: center; border: 1px solid #d8d8d8; background: #fff; font-size: 15px; color: #686868}
.mapDivCont .signDiv > p span em{ font-weight: 500; color: #323232}
.mapDivCont .signDiv > p strong{ background: #d8d8d8; font-size: 23px; color: #323232; font-weight: 400;}
.mapDivCont .signDiv > p:first-child strong{ color: #f04e11; font-weight: 600;}
.mapDivCont .signDiv.signDiv2 > p span, .mapDivCont .signDiv.signDiv2 > p strong{ display: inline-block; font-size: 14px; width: 50%; line-height: 25px}
.mapDivCont .signDiv.signDiv2 > p strong{ font-weight: 500}
.mapDivCont .signDiv.signDiv2 > p:first-child strong{ font-size: 14px;  color: #323232;}

.mapDivCont .button.icon{ padding-right: 30px !important; }
.mapDivCont .button.icSch:before{ content: ''; display: inline-block; background: url(../images/common/icon.png) no-repeat -185px -259px; width: 16px; height: 16px;  vertical-align: middle;}
.mapDivCont .button.icStory:before{ content: ''; display: inline-block; background: url(../images/common/icon.png) no-repeat -207px -259px; width: 16px; height: 16px;  vertical-align: middle; margin-right: 5px}
.mapDivCont .button.large{ height: 50px; line-height: 50px; padding: 0 20px; border-radius: 3px; font-weight: 500; letter-spacing: 0}
.mapDivCont .button.large.mapDown{ line-height: 60px;  padding: 0 30px; }
.mapDivCont .button.large.mapDown:before{ content: '지도원본 다운로드'; display: block; font-size: 12px; color: #fff; position: absolute; line-height: 24px; width: 100%; text-align: center; left: 0; }
.mapDivCont .button.mid{ height: 35px; line-height: 35px; padding: 0 20px; border-radius: 3px;}
.mapDivCont .button.small{ height: 30px; line-height: 30px !important; padding: 0 10px !important; border-radius: 3px;}
.mapDivCont .button.bgSkyBlue{ background: #00a9dd}
.mapDivCont .button.bgBlue{ background: #0079c0 !important; color: #fff}
.mapDivCont .button.bgGreen{ background: #85c12d !important; color: #fff}
.mapDivCont .button.bgDarkBlue{ background: #0c4ca3 !important; color: #fff}
.mapDivCont .button.bgGrayBorder{ background: #e8e8e8 !important; border: 1px solid #d8d8d8; box-sizing: border-box}

.mapBoxDiv .mapTpS{ line-height: 30px;}
.mapBoxDiv .mapTpS > span, .mapDivCont .calBox .txt_ar span{ display: inline-block; margin-right: 20px; font-size: 15px; color: #323232;}
.mapBoxDiv .mapTpS > span i, .mapDivCont .calBox .txt_ar span i{ display: inline-block; width: 10px; height: 10px; vertical-align: middle; margin-right: 5px}
.mapBoxDiv .mapTpS > span.step1 i{ background: #0c4ca3}
.mapBoxDiv .mapTpS > span.step2 i{ background: #85c12d}
.mapBoxDiv .mapTpS > span.step3 i{ background: #ffdf01}
.mapBoxDiv .mapTpS > span.step4 i{ background: #febc32}
.mapBoxDiv .mapTpS > span.step5 i{ background: #f04e11}
#map{ border: 1px solid #52555b;}

.mapDivCont .calBox{ margin-bottom: 10px; position: relative}
.mapDivCont .calBox h2{ background: #fff; font-size: 15px !important; line-height: 40px; text-indent: 10px; color: #2d2d2d; font-weight: 500; display: block !important;}
.mapDivCont .calBox h2:before{ content: ''; display: inline-block; vertical-align: middle; width: 6px; height: 6px; background: #1fb25a; margin-right: 7px}
.mapDivCont .calBox .grid{ margin: 0; border: 0}
.mapDivCont .calBox .grid tbody td{ border: 0;font-size: 13px;padding: 5px 3px;line-height: 1.3;text-align: center;box-sizing: border-box;letter-spacing: -0.085em;}
.mapDivCont .calBox .grid:before{ display: none}
.mapDivCont .calBox .grid thead th{border:1px solid #fff;border-left: 0;background: #50a7e4;color: #fff;font-size: 13px;padding: 5px 0;line-height: 1.2;font-weight: 400;letter-spacing: -0.085em;box-sizing: border-box;}
.mapDivCont .calBox .grid thead th:last-child{ border-right: 0}
.mapDivCont .calBox .grid.calendar thead th{ font-weight: 600}
.mapDivCont .calBox .grid.calendar thead th:first-child{ color: #f61521}
.mapDivCont .calBox .grid.calendar thead th:last-child{ color: #0ef4f9}
.mapDivCont .calBox .grid.calendar td{ padding: 0 1px 1px;}
.mapDivCont .calBox .grid.tdBorder td{ border: 1px solid #bad7e4;}
.mapDivCont .calBox .grid.calendar td .schedule{ height: 60px; overflow: hidden; text-align: left; font-size: 13px; letter-spacing: -0.085em; cursor: pointer; border: 1px solid #bad7e4; position: relative}
.mapDivCont .calBox .grid.calendar td .schedule:hover{ background: #f1f1f1}
.mapDivCont .calBox .grid.calendar td .schedule span{ display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 100%; margin: 0; color: #6e6e6e; text-indent: 5px; line-height: 20px; height: 20px;}
.mapDivCont .calBox .grid.calendar td .schedule > div{ position: absolute; bottom: 1px; height: 20px; left: 1px; width: calc(100% - 1px)}
.mapDivCont .calBox .grid.calendar td .schedule > div > span{ display: block; float: left; box-sizing: border-box; margin: 0 1px 1px 0; width: calc(33.33% - 1px); text-align: center;  text-overflow: ellipsis; white-space: nowrap; line-height: 20px; color: #000; font-size: 11px; text-indent: 0}
.mapDivCont .calBox .grid.calendar td .schedule > div > span.pes1, .mapDivCont .calBox .txt_ar span.pes1 i{ background: #94cce6; border: 1px solid #67b7dc}
.mapDivCont .calBox .grid.calendar td .schedule > div > span.pes2, .mapDivCont .calBox .txt_ar span.pes2 i{ background: #fde14c; border: 1px solid #fdd400}
.mapDivCont .calBox .grid.calendar td .schedule > div > span.pes3, .mapDivCont .calBox .txt_ar span.pes3 i{ background: #a8cc90; border: 1px solid #84b761}
.mapDivCont .calBox .grid.calendar td .schedule.rest .date{ color: #ff0000;}
.mapDivCont .calBox .grid.calendar td .schedule.today{ background: #e6e6e6}
.mapDivCont .calBox .grid.calendar td .schedule.today .date{ display: inline-block; background: #50a7e4; color: #fff; text-indent: 0; margin: 3px 0 0 3px; width: auto; width: 22px; height: 22px; border-radius: 22px; text-align: center}
.mapDivCont .calBox .grid.calendar + .button{ position: absolute; right: 10px; top: 10px}
.mapDivCont .calBox .selectMonth, .mapBoxDiv .mapTpS.title{ position: absolute; width:100%; top: 0; height: 40px; text-align: right; border: 1px solid #dedede; border-bottom: 0;  box-sizing: border-box; padding-right: 10px}
.mapDivCont .calBox .selectMonth a, .mapDivCont .multiBox > div:before{ width: 16px; height: 16px; vertical-align: middle; position: relative; margin: 0 5px; background: #e6e6e6; border: 1px solid #bdbdbd; border-bottom-color: #a8a8a8; text-align: center; border-radius: 2px; font-size: 0; color: transparent}
.mapDivCont .calBox .selectMonth a:before{ content: '\25C2'; display: inline-block; line-height: 1; vertical-align: top; color: #34658b; font-size: 15px}
.mapDivCont .calBox .selectMonth a.calNext:before{ content: '\25B8';}
.mapDivCont .calBox .selectMonth strong{ font-size: 18px; color: #197bc0; line-height: 40px}
.mapDivCont .calBox .txt_ar span{ font-size: 12px}
.mapDivCont .calBox .txt_ar span i{ box-sizing: border-box}
.mapDivCont .calBox .selectMonth .selectStyle{ height: 30px}
.mapDivCont .calBox .selectMonth .selectStyle:after{ height: 28px; width: 25px; font-size: 18px}
.mapDivCont .calBox .selectMonth .selectStyle{ top: 5px;}
.mapDivCont .calBox .selectMonth .selectStyle select{ height: 28px !important; vertical-align: top; text-indent: 3px; font-size: 14px; color: #197bc0; line-height: 28px}
.mapBoxDiv .mapTpS.title{ position: static; text-align: center; line-height: 40px}

.mapDivCont .multiBox{ position: relative;}
.mapDivCont .multiBox > div{ position: relative}
.mapDivCont .multiBox > div:before{ content: '\25B8'; display: block; position: absolute; left: -16px; top: 85px; border-radius: 100%; font-size: 15px; color: #34658b; line-height: 1}
.mapDivCont .multiBox > div:first-child:before{ display: none}
.mapDivCont .multiBox > div > p{ background: #b4e0ff; border: 1px solid #8dd0ff; line-height: 35px; text-align: center; font-size: 15px; color: #323232; box-sizing: border-box}
.mapDivCont .multiBox > div > div{ border: 1px solid #d8d8d8; box-sizing: border-box; padding: 5px 10px; height: 120px}
.mapDivCont .multiBox > div > div select{ height: 108px !important; width: 100%; border: 0 !important; }

/* 2018.11.07 ~ 2019.03.08 jbh */
/* 2018.11.07 */
.amcharts-chart-div a {display:none !important;}
#headerWrap{z-index: 11001;}
.quickMenu{z-index: 11002;}
#allMain .midCenter .innerDiv .bx-wrapper .bx-viewport{height:55px !important;}
.damageList li a img{min-height: 175px;}
/* 2018.11.20 jbh 임시 탑메뉴 영역 css 수정 228,229 라인 예찰요원 css 주석처리함. */
#header>#gnb>li>ul{ padding: 5px 0 20px 10px; }
#header>#gnb>li>ul>li>a{ font-size: 15px; padding: 4px 0 4px 10px; }
#header>#gnb>li>ul>li>a:before{ top: 14px}
/* 2018 11 22 */
#Ncontent.wide .middlecontents .aside{ display: none}
#Ncontent.wide #container{ float: none; width: calc(100% - 20px)}
#container_noleft{ overflow: inherit; padding-right: 20px}
#container_noleft .root, #container_noleft .subcontent h3{ left: calc(50% - 5px);}
#container h4{ padding-left: 22px; margin: 15px 5px 13px 0; font-size: 16px;}
/* 2018.11.23 */
#container_noleft h4{ padding-left: 22px; margin: 15px 5px 13px 0; font-size: 16px;}
.button { margin-right:4px !important;}		/* old_style margin-right:7px 수정. */
.headerSch>fieldset>div{ z-index: 11003;}
/* 2018.11.26 */
#expert .btmSection .siteInfo.more ul{ overflow-y: scroll; }
/* 2018.11.27 */
#Ncontent #container_noleft select{ border: 1px solid #ccc; height: 30px}
/* 2018.11.28 */
.schBox table tbody td input[type='button'] {padding: 5px 16px 5px 16px; border: 1px solid #ccc; cursor: pointer;}		/* old_style padding:1px 16px 1px 16px; 수정. */
p.txt { padding:10px 25px; line-height:190%; background:#fafafa; margin-bottom:10px;font-size:14px;}	/* 예전 css style_2015 일부 적용 */
.listDetail dl dd {background:none;}		/* old_style background:#000; 수정. */
.board_list th.title {font-weight: 600;}		/* old_style font-weight: 600; 추가. */
/* 2018.12.10 */
#allMain .midSection>div.mainQuickLnk>div ul + a{background: rgba(122,192,67,0.7); font-weight: 600;}
/* 2018.12.14 */
a.dl-list .dt {font-size: 16px;font-weight: bold;color: #444;line-height: 1.3;}
.mng-box-style {width:100%;border-collapse:collapse;}
.mng-box-style td {width:25%;border:1px solid #d7d7d7;vertical-align:top;}
.mng-box-style td.bg {background:#f9f9f9;}
.mng-box-style td a.dl-list {display:block;height:192px;position:relative;}
.mng-box-style td a:hover,
.mng-box-style td a:focus {outline:2px solid #3580ca;}
.mng-box-style td a.dl-list .dt {height:75px;padding:40px 0 0 120px;display: inline-block;}
.mng-box-style td a.dl-list .dd {padding:0 10px;color:#4c4c4c;display:block;}
.mng-box-style td.typ2 a.dl-list {height:132px;}
.mng-box-style td.typ2 a.dl-list .dt {height:22px;}
.mng-box-style td.typ2 a.dl-list .dd {padding-left:100px;}
.mng-box-style.typ2 td a:hover,
.mng-box-style.typ2 td a:focus {outline-color:#f2ad41;}
.mng-box-style .bg-area {width:100px;height:100px;overflow:hidden;position:absolute;left:5px;top:10px;}
.mng-box-style .bg-area.bg1 {background:url(../images/info/smsInfoIcon1.png)}
.mng-box-style .bg-area.bg2 {background:url(../images/info/smsInfoIcon2.png)}
.mng-box-style .bg-area.bg3 {background:url(../images/info/smsInfoIcon3.png)}
.mng-box-style .bg-area.bg4 {background:url(../images/info/smsInfoIcon4.png)}
.mng-box-style .bg-area.bg5 {background:url(../images/info/smsInfoIcon5.png)}
.mng-box-style .bg-area.bg6 {background:url(../images/info/smsInfoIcon6.png)}
.mng-box-guide {width: 50px;height: 50px;overflow: hidden;background: url(../images/info/smsInfoIconGlass.png) no-repeat; position: absolute;right: 10px;bottom: 10px; background-size:100%; }
.layerpop-wrap {display:none;width:100%;height:100%;position:fixed;left:0;top:0;z-index:10003;background-color: rgba(0, 0, 0, 0.5);}
.layerpop {position:absolute;left:50%;top:50%;border:1px solid #444444;background:#fff;}
.layerpop .layer-header {height:50px;line-height:50px;background:#005aa4;position:relative;}
.layerpop .layer-title {font-size:19px;color:#fff;padding-left:19px;}
.layerpop .layer-body:after {content:" ";display:block;clear:both;}
.layerpop .layer-body {padding:20px;}
.layerpop .layer-close {position:absolute;right:12px;top:15px;text-indent:-9999px;width:19px;height:19px;background:url(../images/pop/close2.png) center center no-repeat;border: 0;}
.guide-pop-layer {padding:0 0 30px 0;}
.guide-pop-layer .guide-box {*zoom:1;margin-top:20px;}
.guide-pop-layer .guide-box:first-child {margin-top:0;}
.guide-pop-layer .guide-box:after {content:" ";display:block;clear:both;}
.guide-pop-layer .guide-capture {float:left;border:1px solid #ccc;width:97%;padding:10px;text-align:center;}
.guide-pop-layer .guide-capture img {max-width:100%;}
.guide-pop-layer .guide-explain {font-size:14px;line-height:1.6;}
.guide-pop-layer .guide-explain p {font-size:14px;}
/* 2018.12.26 */
.schBox input[type='checkbox'] {margin: 0 4px 3px 0;}	/* old_style 체크박스margin 위치 수정. */
.schBox #searchTableArea input[type='checkbox'] {margin: 0 0 5px 0;}	/* old_style 체크박스margin 위치 수정. */
.button.medium.red a{ background: #d96c2a}	/* 버튼 색상 추가 */
.button.medium.gray a{ background: #898989}	/* 버튼 색상 추가 */
.m5pRe{margin: 0 5px;padding: 0;}	/* 예전 nstyle 일부 적용 */
#jquery-overlay{z-index:11005 !important;}	/* 사진정보관리 대표사진 레이어 */
/* 2019.01.02 */
.mobileInfoArea {width:420px;}
.mobileInfoArea p:nth-child(1) {display: inline-block;width: 30px;background: #47b350;border-radius: 30px;color: #fff;text-align: center;padding: 4px 0;float: left;margin: 10px 0 20px 4px;}
.mobileInfoArea p:nth-child(2) {padding: 15px 0 0 40px; font-weight:600;}
.mobileInfoArea p:nth-child(3) {padding-left: 40px; min-height: 66px;}
.mobileInfoArea p:nth-child(4) {text-align:center; margin: 20px 20px 0 0;}
.mobileInfoOuterArea {position: relative; height: 520px;}
.mobileInfoOuterArea .mobileInfoArea:nth-child(1) {position: absolute; left: 0;}
.mobileInfoOuterArea .mobileInfoArea:nth-child(2) {position: absolute; left: 530px;}
/* 2019.01.03 */
.usrLogn2 {background: url(../images/login/btn_confirm1.gif) no-repeat 0 0;width: 252px;height: 44px;bottom: 30px;left: 250px;}	 /* 예전 css style_2015 일부 적용 */
/* 2019.01.07 */
.h3N {padding: 8px 0 15px 0;margin: 20px 5px 5px 0;padding-left: 25px!important;background: url(../images/common/bull_h3N.gif) no-repeat 0 40%;line-height: 22px;color: #414141;font-size: 24px!important;}
/* 2019.01.15 */
.btnSchbox3{display: inline-block; line-height: 22px; height: 30px; padding: 0 10px !important; font-size: 15px; border-radius: 5px; background: #fff !important; border: 0; letter-spacing: 0; border: 1px solid #80849d;}
.btnSchbox3:before{ content: '\25BE'; display: inline-block; font-size: 25px; vertical-align: middle; margin-right: 3px; position: relative; top: -2px}
.btnSchbox3 span a{text-decoration: none;}
.viewDetail {display: inline-block;padding: 0 0 0 0px!important;color: #404040!important;}	/* old_style 분류별검색메뉴 상세검색보기 버튼 padding 수정 */
.mobileInfoArea span {display: inline-block;width: 30px;background: #47b350;border-radius: 30px;color: #fff;text-align: center;padding: 4px 0;float: left;margin: 10px 0 20px 4px;}
.imgCompare .imgSn {display: inline-block; width: 30px; background: #47b350; border-radius: 30px; color: #fff; text-align: center; padding: 4px 0; float: left; position: absolute;}
/* 2019.01.21 */
#header>#gnb>li>ul>li>a{display:block; font-size: 15px; color: #323232; font-weight: 300; padding: 4px 0 4px 10px; position: relative; word-break: normal;}	/* 탑메뉴 메뉴명이 긴 경우 word-break: normal로 수정 */
.list_type2 dt {display: inline-block; width: 60px; background: url(../images/common/grayDot2.gif) no-repeat 0 50%; padding-top: 6px; padding-left: 10px; color: #4c5155;} /* old_style dt태그 수정 */
#allMain .headerSch>div>h2{ color: #0079c0; margin-right: 155px; height:25px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:210px;}
#farmer .headerSch>div>h2{ color: #0079c0; margin-right: 155px; height:25px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:210px;}
#expert .headerSch>div>h2{ color: #0079c0; margin-right: 155px; height:25px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:210px;}
/* 2019.01.23 */
/* 407라인 기존 css 주석처리 */
#expert .btmSection .diagnoseInfoBox{ background: #f7f7f7; border: 1px solid #adafbb; height: 220px; overflow: hidden;}
#expert .btmSection .diagnoseInfoBox .topArea{ position:relative; height:46px; width: calc(100% - 90px);}
#expert .btmSection .diagnoseInfoBox .topArea h2{ line-height: 45px; position: absolute; float:left;}
#expert .btmSection .diagnoseInfoBox .topArea .topBtnArea { /* width: calc(100% - 184px); */ width: 614px; height: 46px; float: right; overflow: hidden; position: relative;}
#expert .btmSection .diagnoseInfoBox .topArea .topBtnArea ul { position: absolute; top: 0;}	/* 에니메이션을 위한 width는 내부 li 스크립트 처리(left:0은 html style로 처리(문서로드 시점차이)) */
#expert .btmSection .diagnoseInfoBox .topArea .topBtnArea ul li button{ float: left; display: block; margin: 8px 3px; background: #dcdcdc; line-height: 30px; padding: 0 18px; border-radius: 5px;}
#expert .btmSection .diagnoseInfoBox .topArea .topBtnArea ul li.active button {background: #febc32;font-weight: 500;}
#expert .btmSection .diagnoseInfoBox>ul{ padding-left: 7px; width: 879px}
#expert .btmSection .expertTgtInfo{float: right !important; margin: 7px;} 	/* 전문가 담당작물 병해충 정보 버튼영역 */
#expert .btmSection .expertTgtInfo a{display: inline-block; width: 35px; height: 31px; font-size: 0; color: transparent; vertical-align: top; background: url(../images/common/icon.png) no-repeat -48px -72px;}
#expert .btmSection .expertTgtInfo .expertTgtInfoPrev{background-position: -48px -104px; margin-right: 2px; cursor: pointer; display: none;}
#expert .btmSection .expertTgtInfo .expertTgtInfoNext{background-position: -85px -104px; cursor: pointer; display: none;}
/* 2019.01.28 */
.existDataBg {background-color: #cfecfd !important;}
/* 우측 여백 확장 및 확장으로 인한 메뉴명 영역 중앙위치 */
#Ncontent #container{ float: left; width: calc(100% - 385px)}
/* .subcontent h3{ position: absolute; top: -120px; float: none !important; left: calc(50% - 52px); transform: translateX(-50%); height: 75px; line-height: 80px; font-weight: 600; border-bottom: 1px solid #333;  padding: 0 30px; z-index: 1} */
.root{ display: inline-block; float: none; width: auto; padding: 0; position: absolute; top: -45px; left: calc(50% - 52px); transform: translateX(-50%); height: 45px; line-height: 45px; z-index: 1}
#container_noleft{ overflow: inherit; padding-right: 145px;}
/* 헤더 우측 이달의병해충, 예측정보(예찰요원) 텍스트 영역 초과방지 */
.headerSch>div>p.forecast>p.forecast{ display: inline-block; max-width: 320px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
#forecasting .headerSch>div>p.forecast{ display: inline-block; max-width: 320px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
/* 2019.02.18 */
button.search {	height: 28px; padding: 0 17px 0 32px; background: url(../images/button/buttonN.gif) repeat-x 0 -202px; margin: 0 5px 0 0; border: 1px solid #dedede; border-radius: 2px; cursor: pointer;}	/* old_style 버튼 수정 */
button.retake {	height: 28px; padding: 0 17px 0 32px; background: url(../images/button/btn_re1.gif) no-repeat 22% 50%; margin: 0 5px 0 0; border: 1px solid #dedede; border-radius: 2px; cursor: pointer;}	/* 버튼 추가 */
/* 메뉴명 영역 중앙위치 긴문장일 경우 수정 */
.subcontent h3 { position: absolute; top: -120px; float: none !important; left: calc(50% - 52px); transform: translateX(-50%); height: 75px; line-height: 80px; font-weight: 600; border-bottom: 1px solid #333; padding: 0 30px; z-index: 1; display: inline-table;}
span.spanButton { height: 18px; padding: 3px 10px; line-height: 18px; color: #fff; background-color: #73be79; border-radius: 2px; font-size: 13px;}
span.spanButton a { color:#fff!important;}
/* 메인화면 농작물재해예방정보 타이틀길이가 긴경우 수정 */
#allMain .btmSection>div:last-child .fl-r>div strong{ display: block; color: #fff; font-size: 18px; line-height: 38px; font-weight: 400; text-overflow: ellipsis; white-space: nowrap; overflow: hidden;}
span.plus:after { content: "+"; font-weight: 600; color: white; font-size: 13px; margin-right: -8px; padding-left: 4px;}
span.minus:after { content:"-"; font-weight: 600; color: white; font-size: 13px; margin-right: -8px; padding-left: 4px;}
span.del:after { content:"x"; font-weight: 600; color: white; font-size: 13px; margin-right: -8px; padding-left: 4px;}
.grid input[type='number'] {border: 1px solid #ccc;}
/* 2019.03.08 */
.mapDivCont .calBox .grid.calendar td .schedule.otherMonth .date{ color: #b7b7b7;}	/* 달력에서 이번달이 아닌 날짜 폰트 색상 회색처리. */
/*
	신규 gis메뉴 대상 #container .subcontent 종속절 제거. 메뉴접기시 컨텐트 좌우위치가 떨어지지 않도록 유지하기 위함.
	<div class="contentBody mapDivCont"> 신규 디자인 구조에서<div class="contentBody"> 밑에 <div class="mapDivCont"> 와 추가 css <div class="mapDivContBot"> 구조로 변경.
*/
.contentBody .mapDivCont:after, .selctSchBox > ul:after{ content: ''; display: block; clear: both;}
.contentBody .mapDivCont .mapBoxDiv{ float: right; width: 45%; min-width: 430px; height: 650px; overflow: hidden;}	/* 우측 지도 min-width 축소 */
.contentBody .mapDivCont > div{ float: left; width: 54%; min-width: 450px;}
/* 신규 gis메뉴 대상 아래 좌우div 영역 추가 */
.contentBody .mapDivContBot{min-width: 950px;}
.contentBody .mapDivContBot .leftDiv{width: 54%; float: left;}
.contentBody .mapDivContBot .rightDiv{width: 45%; float: right;}
.contentBody .mapDivContBot h2{background: #fff; font-size: 15px !important; line-height: 40px; text-indent: 10px; color: #2d2d2d; font-weight: 500; display: block !important;}
.contentBody .mapDivContBot h2:before{ content: ''; display: inline-block; vertical-align: middle; width: 6px; height: 6px; background: #1fb25a; margin-right: 7px}
.contentBody .mapDivContBot:after{ content: ''; display: block; clear: both;}
/* n주차 포함(8열) 달력 */
.mapDivCont .calBox .grid.calendarOnWeek thead th{ font-weight: 600}
.mapDivCont .calBox .grid.calendarOnWeek thead th:nth-child(2){ color: #f61521}
.mapDivCont .calBox .grid.calendarOnWeek thead th:last-child{ color: #0ef4f9}
.mapDivCont .calBox .grid.calendarOnWeek td{ padding: 0 1px 1px;}
.mapDivCont .calBox .grid.calendarOnWeek td .week{ border: 1px solid #bad7e4; line-height: 80px; background: #50a7e4; color: #fff; font-size: 14px;}
.mapDivCont .calBox .grid.calendarOnWeek td .schedule{ height: 80px; overflow: hidden; text-align: left; font-size: 13px; letter-spacing: -0.085em; cursor: pointer; border: 1px solid #bad7e4; position: relative}
.mapDivCont .calBox .grid.calendarOnWeek td .schedule:hover{ background: #f1f1f1}
.mapDivCont .calBox .grid.calendarOnWeek td .schedule span{ display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 100%; margin: 0; color: #6e6e6e; text-indent: 5px; line-height: 20px; height: 20px;}
.mapDivCont .calBox .grid.calendarOnWeek td .schedule > div{ position: absolute; bottom: 1px; height: 20px; left: 1px; width: calc(100% - 1px)}
.mapDivCont .calBox .grid.calendarOnWeek td .schedule > div > span{ display: block; float: left; box-sizing: border-box; margin: 0 1px 1px 0; width: calc(33.33% - 1px); text-align: center;  text-overflow: ellipsis; white-space: nowrap; line-height: 20px; color: #000; font-size: 11px; text-indent: 0}
.mapDivCont .calBox .grid.calendarOnWeek td .schedule > div > span.pes1{ background: #94cce6; border: 1px solid #67b7dc}
.mapDivCont .calBox .grid.calendarOnWeek td .schedule > div > span.pes2{ background: #fde14c; border: 1px solid #fdd400}
.mapDivCont .calBox .grid.calendarOnWeek td .schedule > div > span.pes3{ background: #a8cc90; border: 1px solid #84b761}
.mapDivCont .calBox .grid.calendarOnWeek td .schedule > div.innerTopPosition {bottom: 23px;}
.mapDivCont .calBox .grid.calendarOnWeek td .schedule > div.innerTopPosition > span.pes1{ background: #ceefff; border: 1px solid #c8dbe4}
.mapDivCont .calBox .grid.calendarOnWeek td .schedule > div.innerTopPosition > span.pes2{ background: #fff2aa; border: 1px solid #ffe872}
.mapDivCont .calBox .grid.calendarOnWeek td .schedule > div.innerTopPosition > span.pes3{ background: #e5ffd4; border: 1px solid #cbffa7}
.mapDivCont .calBox .grid.calendarOnWeek td .schedule.rest .date{ color: #ff0000;}
.mapDivCont .calBox .grid.calendarOnWeek td .schedule.today{ background: #e6e6e6}
.mapDivCont .calBox .grid.calendarOnWeek td .schedule.today .date{ display: inline-block; background: #50a7e4; color: #fff; text-indent: 0; margin: 3px 0 0 3px; width: auto; width: 22px; height: 22px; border-radius: 22px; text-align: center}
.mapDivCont .calBox .grid.calendarOnWeek + .button{ position: absolute; right: 10px; top: 10px}
.mapDivCont .calBox h2.addrTxt{ text-overflow: ellipsis; white-space: nowrap; overflow: hidden; width: calc(100% - 200px);}
/* 셀렉트 영역 높이 확장 */
.mapDivCont .multiBox > div > div{ height: 156px;}
.mapDivCont .multiBox > div > div select{ height: 144px !important;}
.mapDivCont .multiBox > div:before{ top: 102px;}

/* 2019 09 24 */
.newSchBox{ background: #f0f0f0; padding: 10px 0; text-align: center; margin-bottom: 25px}
.multipleList{ padding-bottom: 10px}
.multipleList li{ display: inline-block; margin: 0 5px 0 0; position: relative}
.multipleList li:after{ content: '\25B8'; display: block; position: absolute; right: -8px; top: 85px; border-radius: 100%; font-size: 15px; color: #34658b; line-height: 1; width: 16px; height: 16px; vertical-align: middle; background: #fff; border: 1px solid #bdbdbd; text-align: center;}
.multipleList li:last-child{ margin: 0}
.multipleList li:last-child:after{ display: none}
.multipleList li>p{ background: #b4e0ff; border: 1px solid #8dd0ff; line-height: 35px; text-align: center; font-size: 15px; color: #323232; box-sizing: border-box}
.multipleList li>div{ border: 1px solid #d8d8d8; box-sizing: border-box; height: 120px; background: #fff; text-align: left}
.multipleList li>div select{ border: 0 !important; height: 100% !important; width: 100%; padding: 5px}
.newSchBox>div{ border-top: 1px solid #d4d4d4; padding: 10px 10px 0; position: relative}
.newSchBox>div>div{ position: absolute; left: 10px; line-height: 40px;}
.newSchBox>div>div strong{ display: inline-block; font-size: 18px; font-weight: 500;}
.newSchBox>div>div strong:first-child:before{ content: '\00BB'; display: inline-block; width: 19px; height: 19px; background: #f95d22; color: #fff; line-height: 1; font-size: 14px; margin: 0 8px 0 0; position: relative; top: -2px}
.newSchBox>div>div span{ color: #626262}
.newH2{ position: relative; padding-left: 25px; line-height: 30px; display: block !important; margin: 0 0 5px}
.newH2:before, .newH2:after{ content: ''; display: block; position: absolute; left: 5px; top: 8px;}
.newH2:before{ border: 4px solid #0079c0; width: 6px; height: 6px;}
.newH2:after{ background: #1fb25a; width: 7px; height: 7px; left: 12px;}
.newH2 span{ font-size: 18px; font-weight: 300; margin-left: 10px}
.newH2 .rgt{ position: absolute; right: 0; top: 5px}
.newSchBox table{ margin: 0 0 0 20px}
.newSchBox table th, .newSchBox table td{ text-align: left; padding: 4px 0}
.newSchBox table th label{ font-size: 15px;}
.newSchBox table th label:before{ content: ''; display: inline-block; vertical-align: middle; width: 6px; height: 6px; background: #1fb25a; margin-right: 7px; position: relative; top: -2px}
.explainBox{ margin: 2px 0 25px; background: #f0f0f0; border-top: 1px solid #d9d9d9; padding: 20px 20px 20px 185px; position: relative; min-height: 115px}
.explainBox i{ position: absolute; width: 115px; height: 115px; border-radius: 50%; background: #fff; display: block; left: 35px; top: 20px}
.explainBox i:before{ content: ''; display: block; background: url(../images/common/icon.png) no-repeat -397px -186px; width: 58px; height: 73px; position: absolute; left: 27px; top: 20px}
.newSchBox+.explainBox{ margin-top: -23px;}
.explainBox li{ position: relative; padding-left: 10px;}
.explainBox li:before{ content: ''; display: block; position: absolute; left: 0; top: 8px; width: 5px; height: 5px; background: #989898}
.explainBox li li{ padding-left: 10px; color: #686868; font-weight: 300; font-size: 14px; line-height: 1.5}
.explainBox li li:before{ content: ''; display: block; position: absolute; left: 0; top: 10px; width: 5px; height: 2px; background: #ccc}

.tabS{ margin-bottom: 10px}
.tabS:after{ content: ''; border-bottom: 2px solid #0c4ca3; display: block;}
.tabS button{ background: #f3f3f3; border: 1px solid #ccc; margin: 0 -5px 0 0; font-size: 16px; padding: 0 45px; line-height: 65px; border-bottom: 0}
.tabS button.active{ font-size: 18px; color: #0c4ca3; background: #fff; position: relative; border: 2px solid #0c4ca3; border-bottom: 0}
.tabS button.active:after{ content: ''; display: block; background: #fff; height: 2px; position: absolute; bottom: -2px; width: 100%; left: 0}

.orangeChk{ display: inline-block; position: relative}
.orangeChk>input[type='radio'], .orangeChk>input[type='checkbox']{ position: absolute; clip: rect(0,0,0,0); margin: 0 !important; width: 0; height: 0}
.orangeChk label{ display: inline-block; font-size: 15px;}
.orangeChk label:before{ content: ''; display: inline-block; background: url(../images/common/formC.png) no-repeat 0 0 / 20px auto; width: 20px; height: 20px; margin: 0 3px 0 0; vertical-align: top}
.orangeChk>input[type='radio']:checked+label:before, .orangeChk>input[type='checkbox']:checked+label:before{ color: #000; font-weight: 500; background-position: 0 -21px;}
.orangeChk.chk label:before{ background-position: 0 -43px}
.orangeChk>input[type='checkbox']:checked+label:before{ background-position: 0 -64px}

.handlerBarArea{ background: #f0f0f0; border-top: 1px solid #c4c4c4; min-height: 45px; position: relative; overflow: hidden; margin-bottom: 10px}
#handleSlider{ border: 1px solid #ddd; height: 10px; background: #fff; border-radius: 3px; margin: 15px 5em; position: relative;}
#custom-handle{ width: 6em; height: 1.6em; top: 50%; margin-top: -.8em; text-align: center; line-height: 1.6em; background: #85c12d; font-weight: normal; color: #333; position: absolute; border-radius: 3px; margin-left: -45px;}
#custom-handle:before, #custom-handle:after{ content: '\2016'; display: inline-block; position: absolute; left: 2px; color: #c1dea1}
#custom-handle:after{ left: auto; right: 2px}

/* button */
.button.newButton.large, .button.newButton.medium, .button.newButton.small{ height: 40px; line-height: 40px; border-radius: 0; padding: 0 35px; font-weight: 300; cursor: pointer}
.button.newButton.small{ height: 30px !important; line-height: 30px !important; padding: 0 15px !important; font-size: 14px}
.button.newButton.large{ height: 50px; line-height: 50px; font-size: 17px; font-weight: 400; letter-spacing: 0}
.button.newButton.bgGreen{ background: #85c12d !important; color: #000;}
.button.newButton.midNightBlue{ background: #0079c0; color: #fff}
.button.newButton.skyBlue{ background: #00a9dd !important; color: #fff !important;}
.button.newButton.darkBlue{ background: #0c4ca3 !important; color: #fff !important;}
.button.newButton.darkBlack{ background: #4c4f56 !important; color: #fff !important;}
.button.newButton:before{ content: ''; display: inline-block; font-weight: 600}
.button.newButton.add:before{ content: '\002B'; margin-right: 5px}
.button.newButton.minus:before{ content: '\002D'; margin-right: 5px}
.button.newButton.gridInSch{ display: inline-block; margin: 0 0 0 -2px; background: #dfdfdf; font-size: 0; width: 36px; height: 36px; position: relative}
.button.newButton.gridInSch:after{ content: ''; display: inline-block;  background: url(../images/common/icon.png) no-repeat -395px -158px; width: 19px; height: 19px; position: absolute; left: 8px; top: 8px}
.table_tpR_btn{ float: right; margin-top: -35px}

/* 테이블 */
.grid.newGrid{ border: 0; border-top: 2px solid #0c4ca3; margin-bottom: 20px}
.grid.newGrid thead th, .grid.newGrid thead td, .grid.newGrid tbody th, .grid.newGrid tbody td{ border: 1px solid #ccc; white-space: normal; font-size: 15px}
.grid.newGrid thead th, .grid.newGrid thead td{ background: #f3f3f3; text-align: center; padding: 8px 5px}
.grid.newGrid thead th{ font-weight: 600}
.grid.newGrid th:first-child, .grid.newGrid td:first-child{ border-left: 0}
.grid.newGrid th:last-child, .grid.newGrid td:last-child{ border-right: 0}
.grid.newGrid tbody th, .grid.newGrid tbody td{ padding: 5px}
.selctSchBox .newSelectS, .newSelectS{ display: inline-block; position: relative; border: 1px solid #d8d8d8; box-sizing: border-box; height: 40px; border-radius: 3px; line-height: 40px; background: #fff; margin: 0 !important}
.selctSchBox .newSelectS:after, .newSelectS:after{ content: '\25BE'; display: block; position: absolute; right: 0; top: 0; width: 38px; height: 38px; text-align: center;  line-height: 38px; font-size: 1.5em; color: #919191}
.selctSchBox .newSelectS select, .newSelectS select{ appearance: none; -webkit-appearance: none; -moz-appearance: none; border: 0 !important; height: 38px !important; line-height: 33px; width: 100%; background: transparent; position: relative; z-index: 1; text-indent: 5px; vertical-align: top}
.selctSchBox .newSelectS select::-ms-expand, .newSelectS select::-ms-expand{ display: none}

/* 폼태그 */
.grid.newGrid input[type='text'], .grid.newGrid input[type='number'], .grid.newGrid input[type='date']{ border: 1px solid #dfdfdf; line-height: 30px; border-radius: 0; padding: 2px 5px; text-indent: 5px; box-sizing: border-box}

/* 공통 */
.txt_descrip{ position: relative; padding-left: 20px; font-size: 15px !important; color: #eb6100;  line-height: 22px}
.txt_descrip:before{ content: '\203B'; display: block; position: absolute; left: 0; top: 0;}

/* 종합상황판 */
#situationBoard>div{ margin-bottom: 30px}
#situationBoard .boardStep1{ text-align: center}
#situationBoard .boardStep1>p{ font-size: 18px; color: #323232}
#situationBoard .boardStep1>p strong{ display: block; font-size: 25px;}
#situationBoard .boardStep1>p em{ color: #0079c0}
#situationBoard .boardStep1>ul{ margin: 30px auto 0; max-width: 1200px}
#situationBoard .boardStep1>ul li{ display: inline-block; margin: 0 5px 15px}
#situationBoard .boardStep1>ul li a{ display: block}
#situationBoard .boardStep1>ul li a i{ display: block; width: 100px; height: 100px; box-sizing: border-box; background: #f5f7fc url(../images/common/iconS.png) no-repeat; border: 1px solid #cfdbe1; border-radius: 50%; margin-bottom: 5px; transition: all .2s; -webkit-transition: all .2s;}
#situationBoard .boardStep1>ul li.persimmon a i{ background-position: 0 0}
#situationBoard .boardStep1>ul li.tangerine a i{ background-position: -100px 0}
#situationBoard .boardStep1>ul li.chili a i{ background-position: -200px 0}
#situationBoard .boardStep1>ul li.apple a i{ background-position: -300px 0}
#situationBoard .boardStep1>ul li.radish a i{ background-position: -400px 0}
#situationBoard .boardStep1>ul li.cabbage a i{ background-position: -500px 0}
#situationBoard .boardStep1>ul li.barley a i{ background-position: 0 -100px}
#situationBoard .boardStep1>ul li.peach a i{ background-position: -100px -100px}
#situationBoard .boardStep1>ul li.garlic a i{ background-position: -200px -100px}
#situationBoard .boardStep1>ul li.onion a i{ background-position: -300px -100px}
#situationBoard .boardStep1>ul li.bean a i{ background-position: -400px -100px}
#situationBoard .boardStep1>ul li.grape a i{ background-position: -500px -100px}
#situationBoard .boardStep1>ul li.pear a i{ background-position: -600px -0}
#situationBoard .boardStep1>ul li a.active{ font-size: 18px; font-weight: 500; color: #00aae5}
#situationBoard .boardStep1>ul li a:hover i, #situationBoard .boardStep1>ul li a.active i{ background: #00aae5 url(../images/common/iconS.png) no-repeat; border-color: #00aae5; border-radius: 10px;}
#situationBoard .boardStep1>ul li.persimmon a:hover i, #situationBoard .boardStep1>ul li.persimmon a.active i{ background-position: 0 -200px}
#situationBoard .boardStep1>ul li.tangerine a:hover i, #situationBoard .boardStep1>ul li.tangerine a.active i{ background-position: -100px -200px}
#situationBoard .boardStep1>ul li.chili a:hover i, #situationBoard .boardStep1>ul li.chili a.active i{ background-position: -200px -200px}
#situationBoard .boardStep1>ul li.apple a:hover i, #situationBoard .boardStep1>ul li.apple a.active i{ background-position: -300px -200px}
#situationBoard .boardStep1>ul li.radish a:hover i, #situationBoard .boardStep1>ul li.radish a.active i{ background-position: -400px -200px}
#situationBoard .boardStep1>ul li.cabbage a:hover i, #situationBoard .boardStep1>ul li.cabbage a.active i{ background-position: -500px -200px}
#situationBoard .boardStep1>ul li.barley a:hover i, #situationBoard .boardStep1>ul li.barley a.active i{ background-position: 0 -300px}
#situationBoard .boardStep1>ul li.peach a:hover i, #situationBoard .boardStep1>ul li.peach a.active i{ background-position: -100px -300px}
#situationBoard .boardStep1>ul li.garlic a:hover i, #situationBoard .boardStep1>ul li.garlic a.active i{ background-position: -200px -300px}
#situationBoard .boardStep1>ul li.onion a:hover i, #situationBoard .boardStep1>ul li.onion a.active i{ background-position: -300px -300px}
#situationBoard .boardStep1>ul li.bean a:hover i, #situationBoard .boardStep1>ul li.bean a.active i{ background-position: -400px -300px}
#situationBoard .boardStep1>ul li.grape a:hover i, #situationBoard .boardStep1>ul li.grape a.active i{ background-position: -500px -300px}
#situationBoard .boardStep1>ul li.pear a:hover i, #situationBoard .boardStep1>ul li.pear a.active i{ background-position: -600px -200px}
#situationBoard .boardStep2:after{ content: ''; display: block; clear: both}
#situationBoard .boardStep2>div{ width: 49.5%; height: 700px}
#situationBoard .boardStep2 .fl{ background: #eef0f2}
#situationBoard .boardStep2 .tpBox{ background: #fff; border: 1px solid #ccc; box-sizing: border-box; padding: 5px 10px; position: relative;}
#situationBoard .boardStep2 .tpBox strong{  font-size: 20px; font-weight: 400; letter-spacing: -0.055em; line-height: 40px}
#situationBoard .boardStep2 .tpBox strong em{ color: #f86901}
#situationBoard .boardStep2 .tpBox label, #situationBoard .boardStep2 .currA .seleInsect label{ display: block; position: absolute; left: 10px; top: 10px; width: 110px; height: 40px; font-size: 0; color: transparent;}
#situationBoard .boardStep2 .tpBox label:after{ content: '\25B6'; display: block; width: 30px; height: 30px; border: 1px solid #ccc; box-sizing: border-box; font-size: 10px; border-radius: 3px; color:#919191; text-align: center; line-height: 30px; position: absolute; right: 5px; top: 3px}
#situationBoard .boardStep2 .tpBox select{ height: 40px !important; line-height: 40px; width: 110px; color: #4c4f56; appearance: none; -webkit-appearance: none; -moz-appearance: none; background: transparent; position: relative; z-index: 1; border: 0 !important; font-size: 18px}
#situationBoard .boardStep2 .tpBox select::-ms-expand{ display: none}
#situationBoard .boardStep2 .tpBox a{ display: block; background: #85c12d; color: #000; border-radius: 3px; position: absolute; right: 10px; top: 5px; line-height: 40px; padding: 0 15px 0 10px;}
#situationBoard .boardStep2 .tpBox a:before{ content: '\25B8'; display: inline-block; color: #fff; font-size: 17px; margin-right: 3px;}
#situationBoard .boardStep2 .currA{ padding: 10px}
#situationBoard .boardStep2 .currA p{ font-size: 25px; letter-spacing: -0.065em; font-weight: 300; text-align: center; margin-top: 10px}
#situationBoard .boardStep2 .currA p strong{ font-weight: 500; color: #0079c0}
#situationBoard .boardStep2 .currA p strong.num{ color: #f95d22}
#situationBoard .boardStep2 .currA>div{ display: inline-block}
#situationBoard .boardStep2 .currA .currDate span{ display: inline-block; box-sizing: border-box; background: #fff; border: 1px solid #ccc; line-height: 50px; border-radius: 5px; font-size: 25px; font-weight: 600; position: relative; padding: 0 8px; z-index: 1; vertical-align: top;}
#situationBoard .boardStep2 .currA .currDate span:before{ content: ''; display: block; width: 100%; height: 1px; background: #eaeaea; position: absolute; top: 25px; left: 0; z-index: -1}
#situationBoard .boardStep2 .currA .seleInsect{ position: relative; width: calc(100% - 185px); background: #fff}
#situationBoard .boardStep2 .currA .seleInsect label{ left: 0; top: 0; width: 100%; height: 50px; font-size: 0; color: transparent;}
#situationBoard .boardStep2 .currA .seleInsect label:after{ content: '\25BE'; display: block; position: absolute; right: 10px; top: 0; line-height: 50px; font-size: 20px; color: #ccc}
#situationBoard .boardStep2 .currA .seleInsect select{ height: 52px !important; line-height: 45px; width: 100%; font-size: 16px; color: #323232; appearance: none; -webkit-appearance: none; -moz-appearance: none; background: transparent; position: relative; z-index: 1; border: 3px solid #cccfd2 !important;  box-sizing: border-box; text-indent: 5px}
#situationBoard .boardStep2 .currA .seleInsect select::-ms-expand{ display: none}
#situationBoard .boardStep2 .mapA{ padding: 10px}
/* #situationBoard .boardStep3 .swiper-slide a{ display: block; background: #fff; border: 1px solid #d6d6d6; padding: 20px 0; text-align: center;} */
#situationBoard .boardStep3 .swiper-slide a{ display: block; background: #fff; border: 1px solid #d6d6d6; padding: 0 0 20px; text-align: center;}	/* 설명문구 제외 */
#situationBoard .boardStep3 .swiper-slide a strong, #situationBoard .boardStep3 .swiper-slide a span, #situationBoard .boardStep3 .swiper-slide a i{ display: block;}
/* #situationBoard .boardStep3 .swiper-slide a strong{ font-size: 20px; color: #0e386f; font-weight: 400; height: 65px; overflow: hidden} */
#situationBoard .boardStep3 .swiper-slide a strong{ font-size: 20px; color: #0e386f; font-weight: 400; height: 65px; line-height: 65px; overflow: hidden}	/* 설명문구 제외 */
#situationBoard .boardStep3 .swiper-slide a strong span{ font-size: 13px; color: #828282;}
#situationBoard .boardStep3 .swiper-slide a i{ width: 86px; height: 85px; margin: 0 auto 8px; background: url(../images/common/iconS.png) no-repeat 0 -400px}
#situationBoard .boardStep3 .swiper-slide.stats2 a i{ background-position: -86px -400px}
#situationBoard .boardStep3 .swiper-slide.stats3 a i{ background-position: -172px -400px}
#situationBoard .boardStep3 .swiper-slide.stats4 a i{ background-position: -258px -400px}
#situationBoard .boardStep3 .swiper-slide.stats5 a i{ background-position: -344px -400px}
#situationBoard .boardStep3 .swiper-slide a>span{ width: 30px; height: 30px; margin: 0 auto; border: 2px solid #0e386f; color: #0e386f; text-align: center; border-radius: 50%; font-size: 0}
#situationBoard .boardStep3 .swiper-slide a>span:before{ content: '\002B'; display: inline-block; font-size: 25px; line-height: 30px}
#situationBoard .swiper-button-prev, #situationBoard .swiper-container-rtl .swiper-button-next{ left: 0; font-size: 0}
#situationBoard .swiper-button-next, #situationBoard .swiper-container-rtl .swiper-button-prev{ right: 0; font-size: 0}
#situationBoard .swiper-button-next.swiper-button-disabled, #situationBoard .swiper-button-prev.swiper-button-disabled, #situationBoard .swiper-button-next.swiper-button-disabled, #situationBoard .swiper-button-prev.swiper-button-disabled{ opacity: 0;}
#situationBoard .boardStep2 .tabStep{ position: relative}
#situationBoard .boardStep2 .tabStep>a{ display: block; width: 100%; height: 50px; line-height: 50px; text-align: center; background: #0e386f; color: #fff; position: absolute; bottom: 0}
#situationBoard .boardStep2 .tabStep .btnA{ height: 55px;}
#situationBoard .boardStep2 .tabStep .btnA:after{ content: ''; display: block; clear: both}
#situationBoard .boardStep2 .tabStep .btnA button{ position: static; width: 49.5%; border: 5px solid #7fd4f2; background: #fff; text-align: center; font-size: 20px; box-sizing: border-box; line-height: 45px;}
#situationBoard .boardStep2 .tabStep .btnA button.active{ background: #00aae5; border-color: #00aae5; color: #fff; font-weight: 500}
#situationBoard .boardStep2 .tabStep .tabStepCont{ margin-top: 5px; height: 500px;}

/* 최소 레벨기준 가장작은 원 크기 정의 */
.redRound{ display: inline-block; position: absolute; width: 8px; height: 8px; border-radius: 50%; background: rgba(238,52,37,0.5); left: -4px; top: -4px; z-index: 11}
.redRound span{ display: block; position: absolute; left: -5px; top: -5px; border-radius: 50%; background: rgba(238,52,37,0.3); width: calc(100% + 10px); height: calc(100% + 10px)}
.redRound span.bg2{ display: block; position: absolute; left: -5px; top: -5px; background: rgba(238,52,37,0.2); width: calc(100% + 10px); height: calc(100% + 10px)}

.orangeRound{ display: inline-block; position: absolute; width: 8px; height: 8px; border-radius: 50%; background: rgba(249,93,34,0.5); left: -4px; top: -4px; z-index: 12}
.orangeRound span{ display: block; position: absolute; left: -5px; top: -5px; border-radius: 50%; background: rgba(249,93,34,0.3); width: calc(100% + 10px); height: calc(100% + 10px)}
.orangeRound span.bg2{ display: block; position: absolute; left: -5px; top: -5px; background: rgba(249,93,34,0.2); width: calc(100% + 10px); height: calc(100% + 10px)}

.yellowRound{ display: inline-block; position: absolute; width: 8px; height: 8px; border-radius: 50%; background: rgba(255,150,0,0.5); left: -4px; top: -4px; z-index: 13}
.yellowRound span{ display: block; position: absolute; left: -5px; top: -5px; border-radius: 50%; background: rgba(255,150,0,0.3); width: calc(100% + 10px); height: calc(100% + 10px)}
.yellowRound span.bg2{ display: block; position: absolute; left: -5px; top: -5px; background: rgba(255,150,0,0.2); width: calc(100% + 10px); height: calc(100% + 10px)}

.greenRound{ display: inline-block; position: absolute; width: 8px; height: 8px; border-radius: 50%; background: rgba(31,178,90,0.5); left: -4px; top: -4px; z-index: 14}
.greenRound span{ display: block; position: absolute; left: -5px; top: -5px; border-radius: 50%; background: rgba(31,178,90,0.3); width: calc(100% + 10px); height: calc(100% + 10px)}
.greenRound span.bg2{ display: block; position: absolute; left: -5px; top: -5px; background: rgba(31,178,90,0.2); width: calc(100% + 10px); height: calc(100% + 10px)}

.blueRound{ display: inline-block; position: absolute; width: 8px; height: 8px; border-radius: 50%; background: rgba(0,121,192,0.5); left: -4px; top: -4px; z-index: 15}
.blueRound span{ display: block; position: absolute; left: -5px; top: -5px; border-radius: 50%; background: rgba(0,121,192,0.3); width: calc(100% + 10px); height: calc(100% + 10px)}
.blueRound span.bg2{ display: block; position: absolute; left: -5px; top: -5px; background: rgba(0,121,192,0.2); width: calc(100% + 10px); height: calc(100% + 10px)}

/* .violetRound{ display: inline-block; position: absolute; width: 8px; height: 8px; border-radius: 50%; background: rgba(102,83,207,0.5); left: -4px; top: -4px; z-index: 10}
.violetRound span{ display: block; position: absolute; left: -5px; top: -5px; border-radius: 50%; background: rgba(102,83,207,0.3); width: calc(100% + 10px); height: calc(100% + 10px)}
.violetRound span.bg2{ display: block; position: absolute; left: -5px; top: -5px; background: rgba(102,83,207,0.2); width: calc(100% + 10px); height: calc(100% + 10px)}

.wineRound{ display: inline-block; position: absolute; width: 8px; height: 8px; border-radius: 50%; background: rgba(200,57,192,0.5); left: -4px; top: -4px; z-index: 10}
.wineRound span{ display: block; position: absolute; left: -5px; top: -5px; border-radius: 50%; background: rgba(200,57,192,0.3); width: calc(100% + 10px); height: calc(100% + 10px)}
.wineRound span.bg2{ display: block; position: absolute; left: -5px; top: -5px; background: rgba(200,57,192,0.2); width: calc(100% + 10px); height: calc(100% + 10px)} */

/* 2019.12.17 jbh 검역병해충 timeline bar 좌우측 텍스트 추가요청 */
#handleSliderIncludeTxt{ border: 1px solid #ddd; height: 10px; background: #fff; border-radius: 3px; margin: 15px 11em; position: relative;}
.handlerBarArea span{width: 10%; position:absolute; text-align: center; top: 10px;}
.handlerBarArea span.start{left:0;}
.handlerBarArea span.end{right:0;}

/* 2019 12 17 종합상황판 수정 */
#situationBoard .boardStep1 .cropBox{ margin-top: 20px; border-bottom: 5px solid #dce4ea; position: relative}
#situationBoard .boardStep1 .cropBox .pickCrop{ position: absolute; background: #00aae5; width: 152px; height: 145px; left: 0; top: 0; z-index: 10; display: table}
#situationBoard .boardStep1 .cropBox .pickCrop span{ display: table-cell; vertical-align: middle; font-size: 25px; font-weight: 600; color: #fff}
#situationBoard .boardStep1 .cropBox .pickCrop span i{ display: block; margin: 0 auto -8px; background: url(../images/common/iconCrop.png) no-repeat; width: 80px; height: 80px;}
#situationBoard .boardStep1 .cropBox .pickCrop span.persimmon i{ background-position: 0 100%}
#situationBoard .boardStep1 .cropBox .pickCrop span.tangerine i{ background-position: -80px 100%}
#situationBoard .boardStep1 .cropBox .pickCrop span.chili i{ background-position: -160px 100%}
#situationBoard .boardStep1 .cropBox .pickCrop span.apple i{ background-position: -240px 100%}
#situationBoard .boardStep1 .cropBox .pickCrop span.radish i{ background-position: -320px 100%}
#situationBoard .boardStep1 .cropBox .pickCrop span.cabbage i{ background-position: -400px 100%}
#situationBoard .boardStep1 .cropBox .pickCrop span.barley i{ background-position: -480px 100%}
#situationBoard .boardStep1 .cropBox .pickCrop span.peach i{ background-position: -560px 100%}
#situationBoard .boardStep1 .cropBox .pickCrop span.garlic i{ background-position: -640px 100%}
#situationBoard .boardStep1 .cropBox .pickCrop span.onion i{ background-position: -720px 100%}
#situationBoard .boardStep1 .cropBox .pickCrop span.bean i{ background-position: -800px 100%}
#situationBoard .boardStep1 .cropBox .pickCrop span.grape i{ background-position: -880px 100%}
#situationBoard .boardStep1 .cropBox .pickCrop span.pear i{ background-position: -960px 100%}

#situationBoard .boardStep1 .cropBox .swiper-container{ height: 145px; padding: 15px 30px 0 180px; border: 1px solid #c5c8cb; background: #fff; box-sizing: border-box;}
#situationBoard .boardStep1 .cropBox .swiper-container ul li a{ display: block; font-size: 16px; color: #676767; font-weight: 300}
#situationBoard .boardStep1 .cropBox .swiper-container ul li a i{ display: block; width: 80px; height: 80px; box-sizing: border-box; background: #f5f7fc url(../images/common/iconCrop.png) no-repeat; border: 1px solid #cfdbe1; border-radius: 50%; margin: 0 auto 10px; transition: all .2s; -webkit-transition: all .2s;}
#situationBoard .boardStep1 .cropBox .swiper-container ul li.persimmon a i{ background-position: 0 0}
#situationBoard .boardStep1 .cropBox .swiper-container ul li.tangerine a i{ background-position: -80px 0}
#situationBoard .boardStep1 .cropBox .swiper-container ul li.chili a i{ background-position: -160px 0}
#situationBoard .boardStep1 .cropBox .swiper-container ul li.apple a i{ background-position: -240px 0}
#situationBoard .boardStep1 .cropBox .swiper-container ul li.radish a i{ background-position: -320px 0}
#situationBoard .boardStep1 .cropBox .swiper-container ul li.cabbage a i{ background-position: -400px 0}
#situationBoard .boardStep1 .cropBox .swiper-container ul li.barley a i{ background-position: -480px 0}
#situationBoard .boardStep1 .cropBox .swiper-container ul li.peach a i{ background-position: -560px 0}
#situationBoard .boardStep1 .cropBox .swiper-container ul li.garlic a i{ background-position: -640px 0}
#situationBoard .boardStep1 .cropBox .swiper-container ul li.onion a i{ background-position: -720px 0}
#situationBoard .boardStep1 .cropBox .swiper-container ul li.bean a i{ background-position: -800px 0}
#situationBoard .boardStep1 .cropBox .swiper-container ul li.grape a i{ background-position: -880px 0}
#situationBoard .boardStep1 .cropBox .swiper-container ul li.pear a i{ background-position: -960px 0}
#situationBoard .boardStep1 .cropBox .swiper-container ul li a:hover, #situationBoard .boardStep1 .cropBox .swiper-container ul li.active a{ font-size: 18px; font-weight: 500; color: #00aae5}
#situationBoard .boardStep1 .cropBox .swiper-container ul li a:hover i, #situationBoard .boardStep1 .cropBox .swiper-container ul li.active a i{ background: #00aae5 url(../images/common/iconCrop.png) no-repeat; border-color: #00aae5;}
#situationBoard .boardStep1 .cropBox .swiper-container ul li.persimmon a:hover i, #situationBoard .boardStep1 .cropBox .swiper-container ul li.persimmon.active a i{ background-position: 0 100%}
#situationBoard .boardStep1 .cropBox .swiper-container ul li.tangerine a:hover i, #situationBoard .boardStep1 .cropBox .swiper-container ul li.tangerine.active a i{ background-position: -80px 100%}
#situationBoard .boardStep1 .cropBox .swiper-container ul li.chili a:hover i, #situationBoard .boardStep1 .cropBox .swiper-container ul li.chili.active a i{ background-position: -160px 100%}
#situationBoard .boardStep1 .cropBox .swiper-container ul li.apple a:hover i, #situationBoard .boardStep1 .cropBox .swiper-container ul li.apple.active a i{ background-position: -240px 100%}
#situationBoard .boardStep1 .cropBox .swiper-container ul li.radish a:hover i, #situationBoard .boardStep1 .cropBox .swiper-container ul li.radish.active a i{ background-position: -320px 100%}
#situationBoard .boardStep1 .cropBox .swiper-container ul li.cabbage a:hover i, #situationBoard .boardStep1 .cropBox .swiper-container ul li.cabbage.active a i{ background-position: -400px 100%}
#situationBoard .boardStep1 .cropBox .swiper-container ul li.barley a:hover i, #situationBoard .boardStep1 .cropBox .swiper-container ul li.barley.active a i{ background-position: -480px 100%}
#situationBoard .boardStep1 .cropBox .swiper-container ul li.peach a:hover i, #situationBoard .boardStep1 .cropBox .swiper-container ul li.peach.active a i{ background-position: -560px 100%}
#situationBoard .boardStep1 .cropBox .swiper-container ul li.garlic a:hover i, #situationBoard .boardStep1 .cropBox .swiper-container ul li.garlic.active a i{ background-position: -640px 100%}
#situationBoard .boardStep1 .cropBox .swiper-container ul li.onion a:hover i, #situationBoard .boardStep1 .cropBox .swiper-container ul li.onion.active a i{ background-position: -720px 100%}
#situationBoard .boardStep1 .cropBox .swiper-container ul li.bean a:hover i, #situationBoard .boardStep1 .cropBox .swiper-container ul li.bean.active a i{ background-position: -800px 100%}
#situationBoard .boardStep1 .cropBox .swiper-container ul li.grape a:hover i, #situationBoard .boardStep1 .cropBox .swiper-container ul li.grape.active a i{ background-position: -880px 100%}
#situationBoard .boardStep1 .cropBox .swiper-container ul li.pear a:hover i, #situationBoard .boardStep1 .cropBox .swiper-container ul li.pear.active a i{ background-position: -960px 100%}
#situationBoard .boardStep1 .cropBox .swiper-button-next, #situationBoard .boardStep1 .cropBox .swiper-button-prev{ color: #fff; background: rgba(0,0,0,0.7); z-index: 30;}
#situationBoard .boardStep1 .cropBox .swiper-button-prev{ left: 150px; width: 27px; height: 44px;}
#situationBoard .boardStep1 .cropBox .swiper-button-next{ right: -1px; width: 27px; height: 44px;}
#situationBoard .boardStep1 .cropBox .swiper-button-next:after, #situationBoard .boardStep1 .cropBox .swiper-button-prev:after{ font-size: 15px;}
#situationBoard .boardStep1 .cropBox .swiper-button-next.swiper-button-disabled, #situationBoard .boardStep1 .cropBox .swiper-button-prev.swiper-button-disabled, #situationBoard .boardStep1 .cropBox .swiper-button-next.swiper-button-disabled, #situationBoard .boardStep1 .cropBox .swiper-button-prev.swiper-button-disabled{ opacity: 0.3}

#situationBoard .boardStep2 .tpBox label, #situationBoard .boardStep2 .tpBox select{ width: 90px}
#situationBoard .boardStep2 .tabStep>.tlBox{ background: #fff; border: 1px solid #ccc; border-bottom: 0; box-sizing: border-box; padding: 5px 10px; width: 100%}
#situationBoard .boardStep2 .tabStep>.tlBox p{ display: table-cell; max-height: 80px; vertical-align: middle; font-size: 18px; letter-spacing: -0.055em; line-height: 1.2; font-weight: 400; }
#situationBoard .boardStep2 .tabStep>.tlBox strong, #situationBoard .boardStep2 .tabStep>.tlBox em{ display: inline-block; color: #0079c0; font-size: 25px; font-weight: 600}
#situationBoard .boardStep2 .tabStep>.tlBox em{ color: #de1f00;}
#situationBoard .boardStep2 .tabStep .btnA button{ width: 50%}

#situationBoard>div{ margin-bottom: 15px}
#situationBoard .boardStep3 .swiper-slide a{ display: table; padding: 6px 0; background: #f9f9f9; border: 1px solid #c9c9c9; position: relative; width: 100%; box-sizing: border-box}
#situationBoard .boardStep3 .swiper-slide a i{ position: absolute; left: 8px; width: 59px; height: 58px; background: url(../images/common/icon.png) no-repeat 0 -305px; top: calc(50% - 29px); margin: 0}
#situationBoard .boardStep3 .swiper-slide a strong{ text-align: left; padding-left: 72px; line-height: 1.1; font-size: 18px; display: table-cell; vertical-align: middle; letter-spacing: -0.085em; word-break: keep-all}
#situationBoard .boardStep3 .swiper-slide a strong span{ display: none}
#situationBoard .boardStep3 .swiper-slide a>span{ position: absolute; right: -1px; bottom: -1px; color: #fff; background: #0e386f; border: 0; border-radius: 0; width: 26px; height: 20px;}
#situationBoard .boardStep3 .swiper-slide a>span:before{ font-size: 15px; line-height: 20px}
#situationBoard .boardStep3 .swiper-slide.stats2 a i{ background-position: -59px -305px;}
#situationBoard .boardStep3 .swiper-slide.stats3 a i{ background-position: -118px -305px;}
#situationBoard .boardStep3 .swiper-slide.stats4 a i{ background-position: -177px -305px;}
#situationBoard .boardStep3 .swiper-slide.stats5 a i{ background-position: -236px -305px;}

/* 2019.12.17 jbh 멸구발생확산지도 맵영역 레전드 색상정의 */
.mapLegend td{position: relative;}
.mapLegend td .redRoundLegend{ display: inline-block; position: absolute; top: 12px; width: 8px; height: 8px; border-radius: 50%; background: rgba(238,52,37,0.5);}
.mapLegend td .redRoundLegend span{ display: block; position: absolute; left: -8px; top: -5px; border-radius: 50%; background: rgba(238,52,37,0.3); width: calc(100% + 10px); height: calc(100% + 10px)}
.mapLegend td .redRoundLegend span.bg2{ display: block; position: absolute; left: -8px; top: -5px; background: rgba(238,52,37,0.2); width: calc(100% + 10px); height: calc(100% + 10px)}

.mapLegend td .orangeRoundLegend{ display: inline-block; position: absolute; top: 12px; width: 8px; height: 8px; border-radius: 50%; background: rgba(249,93,34,0.5);}
.mapLegend td .orangeRoundLegend span{ display: block; position: absolute; left: -8px; top: -5px; border-radius: 50%; background: rgba(249,93,34,0.3); width: calc(100% + 10px); height: calc(100% + 10px)}
.mapLegend td .orangeRoundLegend span.bg2{ display: block; position: absolute; left: -8px; top: -5px; background: rgba(249,93,34,0.2); width: calc(100% + 10px); height: calc(100% + 10px)}

.mapLegend td .yellowRoundLegend{ display: inline-block; position: absolute; top: 12px; width: 8px; height: 8px; border-radius: 50%; background: rgba(255,150,0,0.5);}
.mapLegend td .yellowRoundLegend span{ display: block; position: absolute; left: -8px; top: -5px; border-radius: 50%; background: rgba(255,150,0,0.3); width: calc(100% + 10px); height: calc(100% + 10px)}
.mapLegend td .yellowRoundLegend span.bg2{ display: block; position: absolute; left: -8px; top: -5px; background: rgba(255,150,0,0.2); width: calc(100% + 10px); height: calc(100% + 10px)}

.mapLegend td .greenRoundLegend{ display: inline-block; position: absolute; top: 12px; width: 8px; height: 8px; border-radius: 50%; background: rgba(31,178,90,0.5);}
.mapLegend td .greenRoundLegend span{ display: block; position: absolute; left: -8px; top: -5px; border-radius: 50%; background: rgba(31,178,90,0.3); width: calc(100% + 10px); height: calc(100% + 10px)}
.mapLegend td .greenRoundLegend span.bg2{ display: block; position: absolute; left: -8px; top: -5px; background: rgba(31,178,90,0.2); width: calc(100% + 10px); height: calc(100% + 10px)}

.mapLegend td .blueRoundLegend{ display: inline-block; position: absolute; top: 12px; width: 8px; height: 8px; border-radius: 50%; background: rgba(0,121,192,0.5);}
.mapLegend td .blueRoundLegend span{ display: block; position: absolute; left: -8px; top: -5px; border-radius: 50%; background: rgba(0,121,192,0.3); width: calc(100% + 10px); height: calc(100% + 10px)}
.mapLegend td .blueRoundLegend span.bg2{ display: block; position: absolute; left: -8px; top: -5px; background: rgba(0,121,192,0.2); width: calc(100% + 10px); height: calc(100% + 10px)}
/* 2020-01-06 관찰포 종합현황 폰트사이즈 축소, 셀렉트박스 화살표 크기 확장, x,y축 스크롤 div 및 해당 div 내부 테이블태그 레이아웃 적용 추가 */
#situationBoard .boardStep2 .tabStep>.tlBox strong, #situationBoard .boardStep2 .tabStep>.tlBox em{ font-size: 20px;}
#situationBoard .boardStep2 .currA .seleInsect label:after{ font-size: 40px;}
.OuterTableScrollDiv{ height:620px; overflow:auto; word-break: break-all;}
.OuterTableScrollDiv table{table-layout:fixed;}
/* 2020-03-05 jbh */
/* 탑메뉴 너비 수정(기존 전체메뉴영역 제거요청) */
#header>#gnb>li{ width: 240px;}
#header>#gnb>li>ul{ width: 229px;}
#header>#gnb>li.fourMenu{ width: 300px;}
#header>#gnb>li.fourMenu>ul{ width: 289px;}
/* 관련정보 검색 old_style부분 수정 */
.new_intSch label {font-size:16px;margin-right:15px;}
fieldset.new_intSch {height: 28px; padding: 6px 0 6px 0; background: #ebe0cb; border: 1px solid #dedede; text-align: center;}	/* old_style 병해충통합검색 검색영역 수정 */
.intSch_inputData{ border:1px solid #487c00; width:300px; padding: 2px 5px !important;}
#new_2016 label {background: url("../images/common/grayDot.gif") no-repeat scroll 0 7px transparent; padding-left:0px; color:#363636; font-weight:bold; margin-right:10px;}
fieldset.new_intSch button{ display: inline-block; height: 28px; padding: 0 16px 0 39px!important; background: #fafafa url(../images/button/buttonN.gif) repeat-x 0 -202px; font-size: 14px; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; border: 1px solid #dedede; margin-left: 5px; font-size: 15px;}	/* 버튼스타일추가 */
.newSectionN a:link, .newSectionN a:visited { color: #063257; text-decoration: none;}	/* a태그 스타일추가 */
.newSectionN a:hover {color: #25b6cc; text-decoration: underline;}
/* 2020 03 10 사이트 상단 검색 디자인 */
.headerSch>fieldset>div{ border: 0; background: #e7e6ec; margin: 27px 0 0 340px; width: 490px;}
.headerSch>fieldset>div input[type='text']{ border: 3px solid #80849d !important; position: relative; z-index: 10; border-radius: 50px; margin-left: 0; width: 59%; text-indent: 10px}
.headerSch>fieldset>div input[type='button']{ top: 0; right: 0; z-index: 20; padding: 0 25px}
.headerSch>fieldset>div label{ font-size: 15px; color: #323232; position: relative; left: auto; width: auto; height: auto; line-height: 40px; text-indent: 0; margin: 0 15px 0 0; z-index: 10}
.headerSch>fieldset>div input[type='radio'], .headerSch>fieldset>div label:after{ display: none}
#mainSrhSelBox{ left: 0; width: 100%}
#mainSrhSelBox label{ color: #696a6e; margin-right: 40px; font-size: 15px}
#mainSrhSelBox input[type='radio']:checked+label, .headerSch>fieldset>div input[type='radio']:checked+label{ font-weight: 600}
#mainSrhSelBox label:before, .headerSch>fieldset>div label:before{ content: ''; background: #fff; box-shadow: 2px 2000px 1px #adb2b5 inset; border: 5px solid transparent; width: 6px; height: 6px; vertical-align: middle; position: relative; top: -2px; display: inline-block; border-radius: 100%; margin-right: 5px; color: #000; line-height: 10px; text-align: center;}
#mainSrhSelBox input[type='radio']:checked+label:before, .headerSch>fieldset>div input[type='radio']:checked+label:before{ content: ''; color: transparent; background: #fff; box-shadow: 2px 2000px 1px #df3406 inset;}
/* 2020 05 25 */
.tabS button.active strong{ color: #f95d22}
.picSlideArea, .picScroll{ border: 2px solid #0c4ca3; border-top: 0; padding: 10px 0; position: relative}
.picSlideArea .swiper-slide{ width: 100%; height: 500px;}
.picSlideArea .swiper-button-next, .picSlideArea .swiper-button-prev{ width: 50px; height: 100px; background: #0c4ca3; top: 45%; right: 0}
.picSlideArea .swiper-button-prev{ right: auto; left: 0}
.picSlideArea .swiper-button-next:after, .picSlideArea .swiper-button-prev:after{ color: #fff}
.picSlideArea .imgSection{ text-align: center; height: 100%; overflow: hidden; position: relative}
.picSlideArea .imgSection img{ max-width: 100%; max-height: 500px}
.picSlideArea .layerImgInfo{ position: absolute; margin: 50px 200px; display: none}
.picSlideArea .layerImgInfo.active{ display: block}
.picSlideArea .layerImgInfo>div{ position: relative}
.picSlideArea .layerImgInfo>div strong, .picSlideArea .layerImgInfo>div span{ display: block; position: relative}
.picSlideArea .layerImgInfo>div strong{ background: #454545; text-align: center;  font-size: 16px; color: #fff; font-weight: 400; line-height: 40px; padding: 0 50px}
.picSlideArea .layerImgInfo>div span{ background: #fff; padding: 10px 75px 10px 10px; font-size: 18px; color: #323232; font-weight: 300; min-height: 40px}
.picSlideArea .layerImgInfo>div span button, .picSlideArea .layerImgInfo>div>button, .picScroll .imgLview>button{ display: block; width: 50px; height: 40px; text-align: center; font-size: 0; background: #0e386f; position: absolute; right: 10px; top: 10px}
.picSlideArea .layerImgInfo>div span button:before, .picSlideArea .layerImgInfo>div>button:before, .picScroll .imgLview>button:before{ content: ''; display: inline-block; background: url(../images/common/icon.png) no-repeat -431px 0; width: 15px; height: 15px}
.picSlideArea .layerImgInfo>div>button{ width: 40px; background: transparent; right: 0; top: 0}
.picSlideArea .layerImgInfo>div>button:before{ background-position: -448px 0; width: 18px; height: 18px}
.picScroll{ padding: 10px;}
.picScroll:after{ content: ''; display: block; clear: both}
.picScroll>div{ float: left; height: 500px}
.picScroll .srollYdiv{ width: 200px; padding-right: 5px; overflow-y: auto}
.picScroll .srollYdiv ul li{ margin: 0 0 5px;}
.picScroll .srollYdiv ul li img{ width: 100%; opacity: 0.5}
.picScroll .srollYdiv ul li.active img, .picScroll .srollYdiv ul li:hover img{ opacity: 0.99}
.picScroll .imgLview{ width: calc(100% - 210px); margin-left: 5px}
.picScroll .imgLview .imgLArea{ background: #f3f3f3; height: 425px; text-align: center; position: relative}
.picScroll .imgLview .imgLArea img{ max-width: 100%; max-height: 425px}
.picScroll .imgLview>p{ margin-top: 10px; border-top: 1px solid #ccc; padding: 10px 0 0; text-align: center; font-size: 18px; line-height: 50px;}
.picScroll .imgLview>button{ top: auto; bottom: 10px; width: auto; height: 50px; font-size: 15px; color: #fff; padding: 0 55px 0 15px; line-height: 50px;}
.picScroll .imgLview>button:before{ position: absolute; right: 20px; top: 17px}
.swiper-button-next:after, .swiper-container-rtl .swiper-button-prev:after{ content: '\276F' !important; font-size: 45px;}
.swiper-button-prev:after{ content: '\276E' !important;  font-size: 45px;}
#situationBoard .boardStep1 .cropBox .swiper-button-next, #situationBoard .boardStep1 .cropBox .swiper-button-prev{ top: auto; bottom: 45px}
/* 2020.05.29 jbh */
.picScroll .imgLview .imgLArea img{max-width: 100%;max-height: 425px;position: absolute;margin:auto;top:0;bottom:0;left:0;right:0;}
/* 2020 07 03 */
#situationBoard .boardStep2 .tabStep>.tlBox{ min-height: 55px; box-sizing: border-box; padding: 15px 10px 12px !important}
.stepTabs{ margin: 10px 0 20px; border-top: 1px solid #888; border-bottom: 1px solid #c7c7c7}
.stepTabs:after{ content: ''; display: block; clear: both}
.stepTabs>div{ float: left; width: 50%; padding: 10px 0; box-sizing: border-box; text-align: center}
.stepTabs>div:first-child{ border-right: 1px solid #c7c7c7; position: relative}
.stepTabs>div:first-child:after{ content: '\276F'; display: block; width: 30px; height: 30px; border-radius: 50%; border: 1px solid #b9b9b9; position: absolute; right: -15px; top: 18px; background: #fff; line-height: 30px}
.stepTabs>div a{ display: inline-block; font-size: 18px; color: #4c4f56; margin: 0 40px}
.stepTabs>div:first-child a.active{  font-size: 18px; color: #0c4ca3; font-weight: 600}
.stepTabs>div:first-child a:before{ content: ''; display: inline-block; width: 40px; height: 40px; border-radius: 50%; background: #d1d1d1 url(../images/common/stepTabs.png) no-repeat 50% 100% / 25px auto; text-align: center; vertical-align: middle; margin-right: 5px}
.stepTabs>div:first-child a.active:before{ width: 50px; height: 50px; background: #0c4ca3 url(../images/common/stepTabs.png) no-repeat 50% 100% / 31px auto; }
.stepTabs>div:last-child{ padding: 17px 0}
.stepTabs>div:last-child a{ line-height: 35px; margin: 0; padding: 0 15px}
.stepTabs>div:last-child a.active{ background: #00aae5; border-radius: 5px; color: #fff; font-weight: 500}
.handlerBarArea2{ margin: 0 20px; text-align: center; position: relative}
.handlerBarArea2>div{ position: relative; z-index: 1}
.handlerBarArea2>div:before{ content: ''; display: block; width: 100%; height: 1px; left: 0; top: 30px; background: #c7c7c7; position: absolute; z-index: -1}
.handlerBarArea2 .curtNum{ display: inline-block; box-sizing: border-box; width: 60px; height: 60px; border: 1px solid #c7c7c7; border-radius: 50%; background: #fff; font-size: 24px; color: #f95d22; font-weight: 600; line-height: 60px; letter-spacing: -0.085em;}
.handlerBarArea2 .curtNum:after{ content: '회차'; display: inline-block; font-size: 14px; font-weight: 300; margin-left: 3px; color: #686868; line-height: 1}
.handlerBarArea2>a{ display: block; height: 26px; line-height: 26px; background: #85c12d; color: #323232; position: absolute; padding: 0 15px; border-radius: 5px; top: 17px; z-index: 2; font-size: 15px}
.handlerBarArea2 .next{ right: 0}
.handlerBarArea2 .prev:before{ content: '\276C\276C'; display: inline-block; line-height: 1; color: #fff; margin-right: 5px}
.handlerBarArea2 .next:after{ content: '\276D\276D'; display: inline-block; line-height: 1; color: #fff; margin: 0 0 0 5px}
.page_list{ display: inline-block; margin-right: 5px}
.page_list .newSelectS{ height: 30px; line-height: 30px}
.page_list .newSelectS select{ height: 30px !important}
.page_list .newSelectS:after{ height: 30px; line-height: 30px}
.boardStepStats:after{ content: ''; display: block; clear: both}
.boardStepStats li{ float: left; display: table; margin: 0 1px 3px 0}
.boardStepStats.cols4 li{ width: calc(25% - 1px)}
.boardStepStats.cols5 li{ width: calc(20% - 1px)}
.boardStepStats li a{ display: table-cell; box-sizing: border-box; border: 1px solid #d5d5d5; position: relative; padding: 0 25px 0 45px; font-size: 17px; color: #323232; transition: all .2s; -webkit-transition: all .2s; background: url(../images/common/boardStepStats.png) no-repeat 12px 50%; vertical-align: middle; line-height: 1.2; height: 75px;letter-spacing: -0.085em; font-weight: 300; word-break: keep-all}
.boardStepStats li a:after{ content: '\276F'; display: block; line-height: 1; position: absolute; top: 35%; right: 20px}
.boardStepStats li:nth-child(odd) a{ border-top-color: #1e5194;}
.boardStepStats li:nth-child(odd):hover a{ border-color: #1e5194}
.boardStepStats li:nth-child(even) a{ border-top-color: #f95d22}
.boardStepStats li:nth-child(even):hover a{ border-color: #f95d22}

.mapDivCont .calBox h2.newH2{ line-height: 30px; font-size: 20px !important;}
.mapDivCont .calBox h2.newH2:before{ border: 4px solid #0079c0; background: #fff;}

.stepTabs>div.s1{ float: none; width: 100%; border: 0}
.stepTabs>div.s1:first-child:after{ display: none}
.stepTabs>div.s1:last-child a.active{ background: transparent; color: #0c4ca3;}
/* 2020.07.13 jbh */
.gis-ol-popup {position: absolute; background-color: white; padding: 15px; border-radius: 10px; border: 1px solid #cccccc; bottom: 12px; left: -50px; min-width: 280px; z-index: 9999;}
.gis-ol-popup:after, .gis-ol-popup:before {top: 100%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none;}
.gis-ol-popup:after {border-top-color: white; border-width: 10px; left: 48px; margin-left: -10px;}
.gis-ol-popup:before {border-top-color: #cccccc; border-width: 11px; left: 48px; margin-left: -11px;}
.gis-ol-popup-closer {text-decoration: none; position: absolute; top: 2px; right: 8px;}
.gis-ol-popup-closer:after {content: "X";}

/* 2020 디자인 개선  */
#main2020 .innerDiv{ width: 1300px}
#main2020 #realHeader{ background: transparent}
#main2020 #header>a{ display: block; position: absolute; left: 0; top: 0; background: transparent; right: auto; left: 0; height: 80px; line-height: 80px; padding: 0; color: #f1f1f1; font-size: 20px; letter-spacing: -0.065em; font-weight: 400}
#main2020 #header>a strong{ font-size: 40px; color: #00ddc4; font-family: 'Fredoka One', cursive; font-weight: 200; margin-right: 5px; letter-spacing: 0; }
#main2020 #header>#gnb>li>a{ color: #fff}
#main2020 #headerWrap{ background: rgba(0,0,0,.6); border-bottom: 1px solid #4c4f56; height: 80px}
#main2020 #header>#gnb>li>ul.on{ background: #adb1bd}
#main2020 #wrap{ background: url(../images/common/mainVis2020.jpg) no-repeat 50% -320px}
#main2020 #wrap.mainBg{ background-position: 50% 0}
#main2020 #realHeader{ height: 125px; box-sizing: border-box; padding-top: 45px;}
#main2020 .header_tp{ background: rgba(0,0,0,.6); height: 45px; border: 0; box-sizing: border-box; padding-top: 10px}
#main2020 .header_tp .fl{ border: 1px solid #fff; box-sizing: border-box; height: 35px}
#main2020 .header_tp .fl a{ display: inline-block; line-height: 33px; padding: 0 10px}
#main2020 .header_tp .fl a:after{ content: ''; display: inline-block; margin-left: 5px; background: url(../images/common/icon2020.png) no-repeat -47px 0; width: 5px; height: 10px;}
#main2020 .header_tp .innerDiv a, #main2020 .header_tp .innerDiv span{ line-height: 35px; color: rgba(255,255,255,.8); font-size: 15px;}
#main2020 .header_tp .innerDiv span:after{ content: ''; display: block; clear: both; width: 100%; height: 1px; background: #d8ff00; position: relative; bottom: 5px;}
#main2020 .header_tp .innerDiv span a{ color: #d8ff00; padding: 0 5px}
#main2020 .header_tp .innerDiv span a:before{ content: ''; display: inline-block; margin-right: 3px; background: url(../images/common/icon2020.png) no-repeat -33px 0; width: 11px; height: 13px; vertical-align: inherit;}
#main2020 .header_tp .innerDiv .userArea{ margin-right: 180px; vertical-align: top;}
#main2020 .header_tp .innerDiv .userArea>a{ padding-right: 13px}
#main2020 .header_tp .innerDiv .userArea>a:after{ content: '\2758'; display: inline-block; color: #afb1c0; margin-left: 13px;}
#main2020 .header_tp .innerDiv .userArea>a.login:before, #main2020 .header_tp .innerDiv .userArea>a.logout:before{ content: ''; display: inline-block; margin-right: 5px; background: url(../images/common/icon2020.png) no-repeat 0 0; width: 14px; height: 16px; }
#main2020 .header_tp .innerDiv .userArea>a.logout:before{ background-position: -16px 0; width: 15px}
#main2020 .header_tp .innerDiv .goLnk{ background: transparent; padding-right: 15px; width: auto; color: #fff;}
#main2020 .header_tp .innerDiv .goLnk:after{ width: 0; height: 0; border: 4px solid transparent; border-left: 5px solid #fff;background: none; left: auto; right: 0; bottom: auto; top: 40%;}
#main2020 #headerWrap:before{ height: 0}
#main2020 #headerWrap #header{ width: 1300px;  box-sizing: border-box;}
#main2020 #header>#gnb{ position: static;}
#main2020 #header>#gnb>li{ width: auto}
#main2020 #header>#gnb>li>a{ padding: 5px 28px 0; height: 80px; line-height: 80px; text-align: center; box-sizing: border-box; font-size: 22px; font-weight: 500; transition: all .2s; -webkit-transition: all .2s;}
#main2020 #header>#gnb>li:hover>a{ color: #d8ff00; }
#main2020 #header>#gnb>li>a:before, #main2020 #header>#gnb>li>a:after{ width: 0}
#main2020 #headerWrap:before{ height: 1px; width: 100%; top: 80px; background: #8f929b}
#main2020 #header>#gnb>li:nth-child(1)>a{ margin-left: 400px;}
#main2020 #header>#gnb>li>ul{ background: transparent; border: 0; width: 260px; left: calc(50% - 1300px / 2); top: 80px; min-height: 551px; box-sizing: border-box; padding: 5px;}
#main2020 #header>#gnb>li:nth-child(2)>ul{  left: calc(50% - 1300px / 2 + 260px);}
#main2020 #header>#gnb>li:nth-child(3)>ul{  left: calc(50% - 1300px / 2 + 260px + 260px);}
#main2020 #header>#gnb>li:nth-child(4)>ul{  left: calc(50% - 1300px / 2 + 260px + 260px + 260px);}
#main2020 #header>#gnb>li:nth-child(5)>ul{  left: calc(50% - 1300px / 2 + 260px + 260px + 260px + 260px);}
#main2020 #header>#gnb>li>ul>li>strong{ display: block; background: rgba(0,0,0,.4); font-size: 23px; color: #fff; text-align: center; line-height: 50px; margin-bottom: 10px; font-weight: 400;}
#main2020 #header>#gnb>li>ul.on>li>strong{ color: #d8ff00; }
#main2020 #header>#gnb>li:nth-child(odd)>ul>li strong{ background: rgba(0,0,0,.7)}
#main2020 #header>#gnb>li>ul>li>a{ font-size: 16px; color: #fff; margin: 0 10px; padding: 2px 0 0 10px;}
#main2020 #header>#gnb>li>ul>li>a:hover{ text-decoration: underline}
#main2020 #header>#gnb>li>ul>li>a:before{ background: #fff}
#main2020 #header>#gnb>li>ul.on>li>a{ color: #000}
#main2020 #header>#gnb>li>ul.on>li>a:before{ background: #323232}
#main2020 #header .headerRgt{ position: absolute; right: 0; top: 30px}
#main2020 #header .headerRgt a, #main2020 #header .headerRgt button{ display: inline-block; width: 32px; height: 30px; font-size: 0; background: transparent; vertical-align: top;}
#main2020 #header .headerRgt a:before, #main2020 #header .headerRgt button:before{ content: ''; display: block; background: url(../images/common/icon2020.png) no-repeat 0 -19px; width: 20px; height: 21px; margin: 5px auto 0}
#main2020 #header .headerRgt button:before{ background-position: -23px -19px; margin-top: 0}
#main2020 .layerSearch{ display: none; background: rgba(0,0,0,.8); position: absolute; left: 0; top: 125px; width: 100%; z-index: 11002;}
#main2020 .layerSearch.active{ display: block}
#main2020 .layerSearch>div{ padding: 30px 0 40px; text-align: center}
#main2020 .layerSearch>div h2{ display: inline-block; font-size: 23px; font-weight: 300; color: #fff; padding-right: 22px; line-height: 50px; position: relative; vertical-align: middle;  margin-right: 20px}
#main2020 .layerSearch>div h2:after{ content: ''; display: block; width: 1px; height: 20px; background: #fff; position: absolute; right: 0; top: 15px;}
#main2020 .layerSearch>div fieldset, #main2020 .layerSearch>div fieldset>div{ display: inline-block}
#main2020 .layerSearch>div fieldset>div #mainSrhSelBox{ display: inline-block; position: static; background: rgba(255,255,255,.2); padding: 0 10px; height: auto; width: auto}
#main2020 .layerSearch>div fieldset>div #mainSrhSelBox.hidden{ width: 0; height: 0; overflow: hidden}
#main2020 .layerSearch>div fieldset>div label{ display: inline-block; font-size: 17px; color: #fff; position: relative; left: auto; width: auto; height: auto; line-height: 50px; text-indent: 0; margin: 0 15px 0 0; z-index: 10}
#main2020 .layerSearch>div fieldset>div input[type='radio'], #main2020 .layerSearch>div fieldset>div label:after{ display: none}
#main2020 .layerSearch>div fieldset>div input[type='radio']:checked+label{ font-weight: 300; color: #febc32}
#main2020 .layerSearch>div fieldset>div label:before{ content: ''; background: #fff; box-shadow: 2px 2000px 1px #adb2b5 inset; border: 5px solid transparent; width: 6px; height: 6px; vertical-align: middle; position: relative; top: -2px; display: inline-block; border-radius: 100%; margin-right: 5px; color: #000; line-height: 10px; text-align: center;}
#main2020 .layerSearch>div fieldset>div input[type='radio']:checked+label:before{ content: ''; color: transparent; background: #fff; box-shadow: 2px 2000px 1px #df3406 inset;}
#main2020 .layerSearch>div fieldset>div input[type='text']{ background: #fff; border-radius: 0; line-height: 50px; height: 50px; box-sizing: border-box; width: 350px; margin: 0 5px; padding: 0 60px 0 10px}
#main2020 .layerSearch>div fieldset>div button{ font-size: 0; width: 50px; height: 50px; text-align: center; background: transparent; margin-left: -60px}
#main2020 .layerSearch>div fieldset>div button:before{ content: ''; display: inline-block; background: url(../images/common/icon2020.png) no-repeat -45px -19px; width: 21px; height: 21px; }
#main2020 .layerSearch>div .searchHid{ display: inline-block; width: 55px; height: 50px; background: #01abe6; text-align: center; font-size: 0}
#main2020 .layerSearch>div .searchHid:before{  content: '\2715'; display: inline-block; font-size: 20px; color: #000; font-weight: 600; line-height: 1;}

#main2020 #Ncontent{ min-width: 100%}
#main2020 .middlecontents{ padding-top: 150px}
#main2020 .middlecontents:after{ content: ''; display: block; clear: both; position: static; background: none; opacity: 0; height: 10px}
#main2020 .middlecontents:before{ background: transparent; border: 0; height: 150px}
#main2020 .middlecontents{ float: left; width: 250px; margin: 0 20px 0 10px; min-width: auto; background: none;}
#main2020 .middlecontents .aside{ width: 100%; margin: 0; float: none}
#main2020 .middlecontents .aside:before{ width: 0}
#main2020 #Ncontent .asideTitle{ width: 250px; height: 115px; background: #3086c9; font-size: 25px; font-weight: 500; border-radius: 0}
#main2020 #Ncontent .asideTitle:before{ content: 'NCPMS'; border: 0; left: 50%; transform: translateX(-50%); -webkit-transform: translateX(-50%); top: auto; bottom: -20px; font-family: 'Fredoka One', cursive; font-size: 80px; opacity: .08; letter-spacing:0;}
#main2020 .middlecontents .aside .sMenu{ margin-top: 1px; padding: 0; border: 1px solid #ccc;}
#main2020 .middlecontents .aside .sMenu li>a{ line-height: 1.3}
#main2020 .middlecontents .aside .sMenu li>a.active, #main2020 .middlecontents .aside .sMenu li>a:hover{ font-weight: 400; font-size: 16px; line-height: 1.3}
#main2020 .middlecontents .aside .sMenu li>a:after{ color: #80849d}
#main2020 .middlecontents .aside .sMenu li>a.active{ background: #80849d; color: #fff !important}
#main2020 .middlecontents .aside .sMenu li>a.active:before{ border: 0}
#main2020 .middlecontents .aside .sMenu li>a.active:after{ background: #fff}
#main2020 .middlecontents .aside .sMenu ul ul{ background: #e5e5e5; padding: 5px 0 10px}
#main2020 .middlecontents .aside .sMenu li li a{ font-size: 14px; padding: 5px 10px 5px 22px; background: #e5e5e5 !important; position: relative}
#main2020 .middlecontents .aside .sMenu li li a:before{ content: ''; display: block; width: 5px; height: 1px; background: #323232; position: absolute; left: 13px; top: 50%}
#main2020 .middlecontents .aside .sMenu li li a:hover, #main2020 .middlecontents .aside .sMenu li li a.active{ font-weight: 400; font-size: 14px; background: #cecece !important; color: #000 !important}
#main2020 .middlecontents .btnLeftClose, #main2020 .middlecontents .btnLeftOpen{ left: 0; top: 150px; border-radius: 0; width: 40px; height: 35px; background: #0d4571; font-size: 0}
#main2020 .middlecontents .btnLeftOpen, #main2020 .middlecontents.asideHid .btnLeftClose{ display: none}
#main2020 .middlecontents .btnLeftClose:before, #main2020 .middlecontents .btnLeftOpen:before{ width: 0; height: 0; border: 7px solid transparent; border-right: 7px solid #fff; left: 20%; top: 10px;}
#main2020 .middlecontents .btnLeftOpen{ position: absolute; left: 10px; top: 115px;}
#main2020 .middlecontents .btnLeftOpen:before{ border: 7px solid transparent; border-left: 7px solid #fff; position: relative; left: 40%}

#main2020 .middlecontents.asideHid{ width: 0; height: 0; margin: 0}
#main2020 .middlecontents.asideHid .btnLeftOpen{ display: block}
#main2020 .middlecontents.asideHid .aside{ width: 0; margin: 0; overflow: hidden}
#main2020 .middlecontents.asideHid+#container{ width: 100% !important; padding: 0 10px}

#main2020 #Ncontent #container{ width: calc(100% - 414px); box-sizing: border-box; padding-right: 10px; position: static}
#main2020 #container .subcontent, #main2020 #container .subcontent .contentBody{ min-width: auto; padding: 0}
#main2020 #container .subcontent{ padding: 150px 0 0}
#main2020 #container .subcontent .root{ position: static; transform: none; width: 100%; padding-top: 5px;}
#main2020 #container .subcontent .root *{ font-size: 15px}
#main2020 #container .subcontent h3, #Ncontent.mamber>div h3{ top: 0; height: 150px; line-height: 150px; padding: 0; border: 0; left: 50%; transform: translateX(-50%); -webkit-transform: translateX(-50%); font-family: 'NanumSquareRound',sans-serif; font-weight: 800; font-size: 45px; letter-spacing: -0.095em}

#main2020 #container .subcontent .contentBody{ padding-bottom: 30px}

#main2020 #footer{ background: #80849d}
#main2020 #Ncontent+#footer .innerDiv{ width: 100%}
#main2020 #footer ul{ padding: 25px 0 10px 210px}
#main2020 #footer ul>li{ float: left}
#main2020 #footer ul>li a{ display: block; line-height: 35px; padding: 0 18px; color: #fff; position: relative}
#main2020 #footer ul>li a:after{ content: ''; display: block; width: 1px; height: 12px; background: #c0c2ce; position: absolute; top: 12px; right: 0}
#main2020 #footer ul>li:last-child a{ color: #fff600; font-weight: 500}
#main2020 #footer ul>li:last-child a:after{ width: 0}
#main2020 #footer .footLogo{ background: url(../images/common/ci2.png) no-repeat 0 0 / auto 36px; width: 121px; height: 36px}
#main2020 #footer address{ padding: 0 0 0 230px; margin-top: -5px; color: #fff;}
#main2020 #footer address span{ color: #ffe2e9}
#main2020 #footer .copyright{ padding: 0 0 30px 230px; color: #e5e6eb; margin: 0}
#main2020 #footer .tel{ position: absolute; top: 30px; right: 20px; padding-left: 45px; color: #fff; font-size: 14px; letter-spacing: -0.065em; line-height: 1.3;}
#main2020 #footer .tel:before{ content: ''; display: block; background: url(../images/common/icon2020.png) no-repeat 0 -41px; width: 38px; height: 32px; position: absolute; left: 0; top: 5px}
#main2020 #footer .tel strong{ display: block; font-size: 22px; color: #fffc00; font-weight: 600; letter-spacing: 0;}

/* 회원 */
#main2020 #Ncontent.mamber select{ border: 1px solid #ccc}
#main2020 #Ncontent.mamber .necessary{ background: #fff !important; padding-left: 10px !important; position: relative; line-height: 1.5; font-size: 15px; font-weight: 400; color: #323232}
#main2020 #Ncontent.mamber .necessary:before{ content: '\2217'; display: block; position: absolute; left: 0; top: 0; color: #ff0000}

#main2020 input:-ms-input-placeholder{ color: #929292; font-size: inherit; font-weight: 300;}
#main2020 input::-webkit-input-placeholder{ color: #929292; font-size: inherit; font-weight: 300;}
#main2020 input:-moz-input-placeholder{ color: #929292; font-size: inherit; font-weight: 300;}
#main2020 input::-moz-input-placeholder{ color: #929292; font-size: inherit; font-weight: 300;}

#main2020 #Ncontent.mamber{ background: #fff; letter-spacing: -0.075em}
#main2020 #Ncontent.mamber>div{ padding: 60px 0; text-align: center}
#main2020 #Ncontent.mamber>div h3{ position: static; transform: none; -webkit-transform: none; font-size: 35px; line-height: 60px; height: auto}
#main2020 #Ncontent.mamber>div h3+p{ font-size: 17px; color: #323232; font-weight: 300; letter-spacing: -0.075em; margin-bottom: 40px}
#main2020 #Ncontent.mamber .memBox{ background: #fff; border: 1px solid #d7d7d7; width: 600px; margin: 0 auto; position: relative}
#main2020 #Ncontent.mamber .memBox>div h4{ position: absolute; top: 45px; width: 130px; left: calc(50% - 130px); line-height: 40px; font-size: 16px; color: #8f8f8f; border-bottom: 2px solid #d0d0d0; cursor: pointer; text-align: center}
#main2020 #Ncontent.mamber .memBox>div.active h4{ color: #474747; border-color: #474747; font-weight: 500;}
#main2020 #Ncontent.mamber .memBox>div+div h4{ left: 50%}
#main2020 #Ncontent.mamber .memBox>div>div{ display: none; padding-top: 140px;}
#main2020 #Ncontent.mamber .memBox>div.active>div{ display: block}
#main2020 #Ncontent.mamber .memBox>div>div dl{ width: 370px; margin: 0 auto 10px}
#main2020 #Ncontent.mamber .memBox>div>div dl dt{ position: absolute; width: 0; overflow: hidden}
#main2020 #Ncontent.mamber .memBox>div>div dl dd input, #Ncontent.mamber .memBox>div>div dl dd select{ width: 100%; background: #eaeaea; height: 45px; line-height: 45px; box-sizing: border-box; padding: 5px; border: 0 !important; border-radius: 0; margin-bottom: 3px}
#main2020 #Ncontent.mamber .memBox>div>div dl dd select{ width: 20%}
#main2020 #Ncontent.mamber .memBox>div>div dl dd select+input, #main2020 #Ncontent.mamber .memBox>div>div dl dd select+input+input{ width: 39%}
#main2020 #Ncontent.mamber .memBox>div>div .userLogin{ width: 370px; margin: 0 auto 35px; display: block; height: 60px; line-height: 60px; background: #374548; color: #fff; font-size: 16px; cursor: pointer}
#main2020 #Ncontent.mamber .memBox>div>div .refer{ background: #f2f2f2; border-top: 1px solid #d7d7d7; padding: 0 0 25px; color: #929292; letter-spacing: -0.075em}
#main2020 #Ncontent.mamber .memBox>div>div .refer strong{ display: block; font-size: 18px; font-weight: 400; line-height: 1.5; padding: 15px 0}
#main2020 #Ncontent.mamber .memBox>div>div .refer p{ padding: 10px 5px; font-weight: 300; color: #374548; word-break: keep-all; letter-spacing: -0.085em;}
#main2020 #Ncontent.mamber .referHidBox{ display: none; margin: 30px 0 0; position: relative}
#main2020 #Ncontent.mamber .referHidBox.active{ display: block}
#main2020 #Ncontent.mamber .referHidBox img{ max-width: 100%}
#main2020 #Ncontent.mamber .referHidBox .button{ display: none}
#main2020 #Ncontent.mamber .referHidBox:hover .button{ display: block; position: absolute; top: 0; left: 50%; transform: translateX(-50%); -webkit-transform: translateX(-50%); background: #da4301}
#main2020 #Ncontent.mamber .memProcess{ text-align: center; margin-bottom: 40px}
#main2020 #Ncontent.mamber .memProcess li{ display: inline-block; background: #e9e9e9; width: 230px; height: 60px; position: relative; box-sizing: border-box; padding: 5px 15px; font-size: 18px; color: #323232; font-weight: 400; text-align: left; letter-spacing: -0.075em; margin: 0 2px; line-height: 1.3;}
#main2020 #Ncontent.mamber .memProcess li.active{ background: #80849d; color: #fff}
#main2020 #Ncontent.mamber .memProcess li span{ display: block; font-size: 15px; color: #80849d; font-weight: 300; line-height: 1.5;}
#main2020 #Ncontent.mamber .memProcess li.active span{ color: #fff}
#main2020 #Ncontent.mamber .memProcess li:after{ content: '\276F'; display: block; font-size: 0.85em; line-height: 60px; position: absolute; right: 10px; top: 0; color: #80849d}
#main2020 #Ncontent.mamber .memProcess li.active:after{ color: #fff}
#main2020 #Ncontent.mamber .memBox.memType{ padding: 20px;}
#main2020 #Ncontent.mamber .memBox.memType>p{ font-size: 20px; color: #323232; font-weight: 500; margin: 10px 0 35px}
#main2020 #Ncontent.mamber .memBox.memType a{ display: block; background: #e9e9e9; padding: 20px 10px 20px 120px; position: relative; font-size: 16px; line-height: 1.3; font-weight: 300; text-align: left; margin-top: 10px; border: 3px solid #e9e9e9; min-height: 90px; transition: all .2s; -webkit-transition: all .2s;}
#main2020 #Ncontent.mamber .memBox.memType a:hover{ border-color: #0079c0}
#main2020 #Ncontent.mamber .memBox.memType a strong{ display: block; font-size: 20px; color: #323232; font-weight: 500; margin: 0 0 10px}
#main2020 #Ncontent.mamber .memBox.memType a i, #main2020 #Ncontent.mamber .memBox p.certify i{ display: block; width: 90px; height: 90px; border-radius: 50%; background: #80849d; position: absolute; left: 20px; top: 20px}
#main2020 #Ncontent.mamber .memBox.memType a i:before, #main2020 #Ncontent.mamber .memBox p.certify i:before{ content: ''; display: block; background: url(../images/common/icon2020.png) no-repeat -40px -41px; width: 28px; height: 37px; margin: 24px auto 0}
#main2020 #Ncontent.mamber .memBox.memType a+a i:before{ background-position: -71px -41px; width: 35px;}
#main2020 #Ncontent.mamber h4{ font-size: 22px; font-weight: 500; text-align: left; margin: 30px 0 8px; line-height: 1.3}
#main2020 #Ncontent.mamber h4 span{ color: #ff0000}
#main2020 #Ncontent.mamber .agreeBox{ background: #fff; border: 1px solid #d2d2d2; padding: 10px;height: 220px; overflow-y: auto;}
#main2020 #Ncontent.mamber .orangeChk{ display: block; background: #f2f2f2; padding: 8px; font-weight: 300}
#main2020 #Ncontent.mamber .orangeChk label:before{ box-shadow: 7px 2000px 1px #d9dae1 inset; border: 7px solid transparent; width: 10px; height: 10px; background: #fff; border-radius: 50%}
#main2020 #Ncontent.mamber .orangeChk input[type='checkbox']:checked+label{  font-weight: 500}
#main2020 #Ncontent.mamber .orangeChk input[type='checkbox']:checked+label:before{ box-shadow: 7px 2000px 1px #da4301 inset;}
#main2020 #Ncontent.mamber .orangeChk.agreeCAll{ margin: 30px 0 50px; padding: 0}
#main2020 #Ncontent.mamber .orangeChk.agreeCAll label{ display: block; background: #fff; border: 1px solid #d2d2d2; padding: 15px; font-size: 18px;}
#main2020 #Ncontent.mamber .orangeChk.agreeCAll input:checked+label{ background: #80849d; color: #fff}
#main2020 #Ncontent.mamber .orangeChk.agreeCAll label:before{ box-shadow: 7px 2000px 1px #fff inset; background: #d9dae1;}
#main2020 #Ncontent.mamber .orangeChk.agreeCAll input:checked+label:before{ background: #fff;}

#main2020 #Ncontent.mamber .memBox p.certify{ padding: 50px 0 0;}
#main2020 #Ncontent.mamber .memBox p.certify i{ display: block; position: static; margin: 0 auto 25px}
#main2020 #Ncontent.mamber .memBox p.certify i:before{ margin: 0 auto; background-position: -108px -41px; width: 40px; height: 57px; position: relative; top: 15px;}

#main2020 .refer .btnArea{ margin: 10px 0 0}
/* #main2020 .button{ border-radius: 0; margin: 0}
#main2020 .button.small{ height: 35px; line-height: 35px; padding: 0 20px; font-size: 1em; box-sizing: border-box; font-weight: 300}
#main2020 .button.medium{ height: 45px; line-height: 45px; padding: 0 30px; font-size: 1.1em; box-sizing: border-box; font-weight: 400} */
#main2020 .button.whiteLine{ background: #fff; border: 1px solid #d7d7d7; color: #323232}
#main2020 .button.blu{ background: #00a9dd; color: #fff}
#main2020 .button.rgtArrow:after{ content: '\276F'; display: inline-block; margin-left: 10px; font-size: 0.75em; line-height: 1; position: relative; top: -2px;}
#main2020 .button.rgtArrow.blu:after{ color: #0079c0}
#main2020 .button.rgtArrow.white:after{ color: #fff}

/* MAIN */
#main2020 #container .midSection{ height: 355px; padding: 100px 0 0; text-align: center; box-sizing: border-box; letter-spacing: -0.095em}
#main2020 #container .midSection:before{ width: 0}
#main2020 #container .midSection>strong, #main2020 #container .midSection>span{ display: block;}
#main2020 #container .midSection>strong{ line-height: 70px; font-size: 75px; font-weight: 300; color: rgba(0,0,0,.64); font-family: 'Fredoka One', cursive; letter-spacing: 0}
#main2020 #container .midSection>span{ color: rgba(76,79,86,.6); font-size: 22px; font-weight: 600}
#main2020 #container .midSection p{ display: inline-block; border-top: 1px solid rgba(0,0,0,.6); margin-top: 20px; font-size: 23px;}
#main2020 #container .midSection p strong{ font-size: 26px;}
#main2020 #container .midCenter .pestMidBox.afterClear{ height: 210px; background: #00a9dd; margin: 0}
#main2020 #container .midCenter .pestMidBox>div{ float: left; width: 50%; height: 100%; box-sizing: border-box; padding: 10px 20px 20px}
#main2020 #container .midCenter .pestMidBox h2{ display: block; font-size: 25px; border-bottom: 1px solid #323232; text-align: center;}
#main2020 #container .midCenter .pestMidBox h2 span{ display: block; font-size: 16px; font-weight: 400; padding-bottom: 6px; line-height: 25px}
#main2020 #container .midCenter .pestMidBox .counsel>div{ margin-top: 15px; position: relative}
#main2020 #container .midCenter .pestMidBox .counsel>div>p{ font-size: 15px; color: #fff}
#main2020 #container .midCenter .pestMidBox .counsel>div>ol{ padding-top: 30px}
#main2020 #container .midCenter .pestMidBox .counsel>div>ol li{ display: inline-block; padding: 0 25px 0 32px; font-size: 16px; color: #fff; position: relative; vertical-align: top}
#main2020 #container .midCenter .pestMidBox .counsel>div>ol li:nth-child(1){ font-size: 30px; color: #fffc00; line-height: 0.8; font-weight: 600;}
#main2020 #container .midCenter .pestMidBox .counsel>div>ol li:before{ content: '\0031'; display: block; width: 25px; height: 25px; text-align: center; background: #2b4eac; border-radius: 3px; color: #fff; line-height: 25px; position: absolute; left: 0; font-size: 16px}
#main2020 #container .midCenter .pestMidBox .counsel>div>ol li:nth-child(2):before{ content: '\0032';}
#main2020 #container .midCenter .pestMidBox .counsel>div>ol li:nth-child(3):before{ content: '\0033';}
#main2020 #container .midCenter .pestMidBox .counsel>div>ol li:nth-child(4):before{ content: '\0034';}
#main2020 #container .midCenter .pestMidBox .counsel button{ display: block; position: absolute; right: 0; top: 0; background: #2b4eac; border-radius: 5px; color: #fff; width: 110px; height: 100px; text-align: center; font-size: 16px; font-weight: 300}
#main2020 #container .midCenter .pestMidBox .counsel button:before{ content: ''; display: block; background: url(../images/main/mainIcon2020.png) no-repeat 0 -94px; width: 24px; height: 24px; margin: 0 auto 5px}

#main2020 #container .midCenter .pestMidBox .iconBook{ background: #3086c9}
#main2020 #container .midCenter .pestMidBox .iconBook ul{ padding: 15px 0 0; display: table; width: 100%; height: 100px}
#main2020 #container .midCenter .pestMidBox .iconBook ul li{ display: table-cell; width: 14%; height: 100%;}
#main2020 #container .midCenter .pestMidBox .iconBook ul li:first-child, #main2020 #container .midCenter .pestMidBox .iconBook ul li:last-child{ width: 15%}
#main2020 #container .midCenter .pestMidBox .iconBook ul li a{ display: block;  border-right: 1px solid #3086c9; background: #47c8ef; height: 100%; text-align: center; padding-top: 20px; font-size: 16px; color: #0b3d82; box-sizing: border-box}
#main2020 #container .midCenter .pestMidBox .iconBook ul li a:before{ content: ''; display: block; margin: 0 auto; width: 39px; height: 40px; background: url(../images/main/mainIcon2020.png) no-repeat 0 0}
#main2020 #container .midCenter .pestMidBox .iconBook ul li.mn2 a:before{ background-position: -42px 0; width: 28px}
#main2020 #container .midCenter .pestMidBox .iconBook ul li.mn3 a:before{ background-position: -76px 0; width: 25px}
#main2020 #container .midCenter .pestMidBox .iconBook ul li.mn4 a:before{ background-position: -107px 0; width: 36px}
#main2020 #container .midCenter .pestMidBox .iconBook ul li.mn5 a:before{ background-position: -148px 0; width: 31px}
#main2020 #container .midCenter .pestMidBox .iconBook ul li.mn6 a:before{ background-position: -184px 0; width: 29px}
#main2020 #container .midCenter .pestMidBox .iconBook ul li.mn7 a:before{ background-position: -217px 0; width: 28px}

#main2020 #container .midCenter .tabsArea{ margin: 30px 0}
#main2020 #container .midCenter .tabsArea>div{ float: left; position: relative}
#main2020 #container .midCenter .tabsArea .notiSection{ width: 525px}
#main2020 #container .midCenter .tabsArea .pestSection{ float: right; width: 745px;}
#main2020 #container .midCenter .tabsArea>div>div>h2{ position: absolute; top: 0; left: 0; width: 135px; border: 1px solid #ddd; height: 50px; line-height: 50px; text-align: center; font-size: 16px; color: #7c7c7c; cursor: pointer;  background: #f6f6f6}
#main2020 #container .midCenter .tabsArea>div>div+div h2{ left: 136px;}
#main2020 #container .midCenter .tabsArea>div>div.active:before{ content: ''; display: block; width: 100%; height: 1px; background: #ddd; position: absolute; top: 51px}
#main2020 #container .midCenter .tabsArea>div>div.active h2{ border-bottom-color: #fff; font-size: 18px; color: #323232; background: #fff}
#main2020 #container .midCenter .tabsArea>div>div>div{ display: none; padding-top: 50px}
#main2020 #container .midCenter .tabsArea>div>div.active>div, #main2020 #container .midCenter .tabsArea>div>div.active>a{ display: block}
#main2020 #container .midCenter .tabsArea>div>div>a{ display: none; position: absolute; right: 0; top: 10px; width: 35px; height: 32px; border: 1px solid #ddd; font-size: 0; text-align: center}
#main2020 #container .midCenter .tabsArea>div>div>a:before{ content: '\002B'; display: inline-block; font-size: 18px; line-height: 30px}
#main2020 #container .midCenter .tabsArea .notiSection ul{ padding: 20px 0 0}
#main2020 #container .midCenter .tabsArea .notiSection ul li{ position: relative; }
#main2020 #container .midCenter .tabsArea .notiSection ul li:before{ content: ''; display: block; position: absolute; left: 10px; top: 45%; width: 4px; height: 4px; background: #afafaf}
#main2020 #container .midCenter .tabsArea .notiSection ul li a{ display: block; padding: 0 100px 0 25px; white-space: nowrap; word-break: break-all; text-overflow: ellipsis; overflow: hidden; line-height: 37px; font-size: 16px;}
#main2020 #container .midCenter .tabsArea .notiSection ul li span{ display: block; position: absolute; right: 0; top: 0; line-height: 37px; font-size: 16px; opacity: .6;}
#main2020 #container .midCenter .tabsArea .pestSection>div>div>div{ border: 1px solid #ddd; border-top: 0; padding: 10px; box-sizing: border-box; height: 240px}

#main2020 .inform>p{ text-align: center; line-height: 40px; font-size: 20px; padding-bottom: 5px}
#main2020 .inform>p:before{ content: ''; display: inline-block; background: url(../images/main/mainIcon2020.png) no-repeat -95px -95px; width: 23px; height: 23px; margin-right: 5px; position: relative; top: 3px}
#main2020 .inform>ul>li{ float: left; width: 33%; position: relative}
#main2020 .inform>ul>li:after{ content: ''; display: block; width: 8px; height: 8px; border-radius: 50%; background: #3d3d3d; position: absolute; right: -4px; top: 15px}
#main2020 .inform>ul>li:last-child:after{ width: 0}
#main2020 .inform>ul>li p{ margin: 0 10px; text-align: center; line-height: 35px; background: #dd2f00; border-radius: 35px; font-size: 16px; color: #fff}
#main2020 .inform>ul>li:nth-child(2) p{ background: #ffcc00; color: #000}
#main2020 .inform>ul>li:nth-child(3) p{ background: #13b50f;}
#main2020 .inform>ul>li p strong{ display: inline-block; width: 30px; height:30px; border-radius: 50%; background: #fff; border: 3px solid #dd2f00; text-align: center; line-height: 25px; position: relative; top: -10px; margin-left: 10px; color: #323232; font-size: 14px; box-sizing: border-box; font-weight: 400}
#main2020 .inform>ul>li:nth-child(2) p strong{ border-color: #ffcc00}
#main2020 .inform>ul>li:nth-child(3) p strong{ border-color: #13b50f}
#main2020 .inform ul ul{ margin-top: 5px;}
#main2020 .inform li li{ height: 32px; line-height: 32px; padding-left: 35px; position: relative}
#main2020 .inform li li:nth-child(even){ background: #f6f6f6}
#main2020 .inform li li a:before{ content: ''; display: block; width: 5px; height: 5px; position: absolute; left: 25px; top: 40%; background: #dd2f00}
#main2020 .inform>ul>li:nth-child(2) li a:before{ background: #ffcc00;}
#main2020 .inform>ul>li:nth-child(3) li a:before{ background: #13b50f;}
#main2020 .inform li li a{ display: block; white-space: nowrap; word-break: break-all; text-overflow: ellipsis; overflow: hidden; font-size: 16px}

#main2020 .pestSection .forecast:after, #main2020 .pestSection .forecast .step1 .btnGroup:after{ content: ''; display: block; clear: both}
#main2020 .pestSection .forecast>div{ float: left; height: 220px;}
#main2020 .pestSection .forecast .step1{ width: 255px;}
#main2020 .pestSection .forecast .step1>p{ margin-top: 5px; line-height: 30px}
#main2020 .pestSection .forecast .step1 .btnGroup li{float: left; width: 25%}
#main2020 .pestSection .forecast .step1 .btnGroup li a{ display: block; margin: 0 1px 1px 0; background: #e5e5e5; line-height: 33px; text-align: center}
#main2020 .pestSection .forecast .step1 .btnGroup li.active a{ background: #c3c3c3}
#main2020 .pestSection .forecast .step1 .swiper-container{ margin-top: 9px; background: #f5f5f5; height: 73px; box-sizing: border-box;}
#main2020 .pestSection .forecast .step1 .swiper-wrapper{ margin: 0}
#main2020 .pestSection .forecast .step1 .swiper-button-next, #main2020 .pestSection .forecast .step1 .swiper-button-prev{ margin: 0; top: 0; width: 30px; height: 100%; background: transparent; left: -1px;}
#main2020 .pestSection .forecast .step1 .swiper-button-next{ right: -1px; left: auto}
#main2020 .pestSection .forecast .step1 .swiper-button-next:after, #main2020 .pestSection .forecast .step1 .swiper-button-prev:after{ font-size: 0; background: url(../images/main/mainIcon2020.png) no-repeat -27px -94px; width: 32px; height: 32px}
#main2020 .pestSection .forecast .step1 .swiper-button-next:after{ background-position: -61px -94px}
#main2020 .pestSection .forecast .step1 .swiper-slide{ font-size: 14px; font-weight: 300; text-align: center; padding: 5px 0; box-sizing: border-box;}
#main2020 .pestSection .forecast .step1 .swiper-slide a{ display: block; border: 1px solid transparent; border-radius: 3px;; box-sizing: border-box; padding: 7px 0 5px; width: 50px}
#main2020 .pestSection .forecast .step1 .swiper-slide a i{ display: block; width: 30px; height: 30px; box-sizing: border-box; background: url(../images/main/mainIcon2020.png) no-repeat 0 -128px; margin: 0 auto}
#main2020 .pestSection .forecast .step1 .swiper-slide a.barley i{ background-position: -60px -128px}
#main2020 .pestSection .forecast .step1 .swiper-slide a.apple i{ background-position: -30px -128px}
#main2020 .pestSection .forecast .step1 .swiper-slide a.pear i{ background-position: -180px -128px}
#main2020 .pestSection .forecast .step1 .swiper-slide a.peach i{ background-position: -90px -128px}
#main2020 .pestSection .forecast .step1 .swiper-slide a.chili i{ background-position: 0 -128px}
#main2020 .pestSection .forecast .step1 .swiper-slide a.onion i{ background-position: -150px -128px}
#main2020 .pestSection .forecast .step1 .swiper-slide a.garlic i{ background-position: -120px -128px}
#main2020 .pestSection .forecast .step1 .swiper-slide a:hover, #main2020 .pestSection .forecast .step1 .swiper-slide.active a{ background: #fff; border-color: #ccc}

#main2020 .pestSection .forecast .step2{ width: 165px; margin: 0 10px}
#main2020 .pestSection .forecast .step2 .selectY{ height: 35px; text-align: center; font-size: 20px; position: relative}
#main2020 .pestSection .forecast .step2 .selectY button{ display: block; position: absolute; top: 0; left: 0; font-size: 0; width: 30px; height: 35px; background: transparent}
#main2020 .pestSection .forecast .step2 .selectY button.next{ left: auto; right: 0; text-align: right}
#main2020 .pestSection .forecast .step2 .selectY button:before{ content: '\276E'; display: block; font-size: 15px; color: #3598db}
#main2020 .pestSection .forecast .step2 .selectY button.next:before{ content: '\276F';}
#main2020 .pestSection .forecast .step2 .boxDate{ box-sizing: border-box; background: #fff; border: 3px solid #e5e5e5; width: 100%; height: 185px;}
#main2020 .pestSection .forecast .step2 .boxDate>p{  background: #f6f6f6; text-align: center; padding: 10px 0 5px; font-size: 16px; }
#main2020 .pestSection .forecast .step2 .boxDate>p span{ display: block;}
#main2020 .pestSection .forecast .step2 .boxDate>p span strong{ display: inline-block; font-size: 30px}
#main2020 .pestSection .forecast .step2 .boxDate .refer{ padding: 5px 15px}
#main2020 .pestSection .forecast .step2 .boxDate .refer li{ font-size: 14px; font-weight: 300; color: #878787; margin: 3px 0; padding-left: 20px; position: relative}
#main2020 .pestSection .forecast .step2 .boxDate .refer li i{ display: block; position: absolute; left: 0; top: 20%}
#main2020 .pestSection .forecast .step2 .boxDate .refer li i.sign1{ border: 3px solid #62b45f; width: 8px; height: 8px}
#main2020 .pestSection .forecast .step2 .boxDate .refer li i.sign2{ width: 11px; height: 5px; background: #3598db; top: 40%}
#main2020 .pestSection .forecast .step2 .boxDate .refer li i.sign3{ width: 8px; height: 8px; border-radius: 50%; background: #da4301; top: 30%}

#main2020 .pestSection .forecast .step3{ float: right; width: 280px}
#main2020 .pestSection .forecast .step3 .btnMonth{ margin-bottom: 5px}
#main2020 .pestSection .forecast .step3 .btnMonth button{ display: inline-block; line-height: 30px; background: #f4e6e6; border-radius: 5px; padding: 0 9px; font-size: 14px}
#main2020 .pestSection .forecast .step3 .btnMonth button.now{ background: #3598db; color: #fff}
#main2020 .pestSection .forecast .step3 .btnMonth button.next{ background: #e0e4f3}
#main2020 .pestSection .forecast .step3 .calendarS{ width: 100%; height: 185px; overflow: auto}
#main2020 .pestSection .forecast .step3 .calendarS table{ width: 100%}
#main2020 .pestSection .forecast .step3 .calendarS table th, #main2020 .pestSection .forecast .step3 .calendarS table td{ font-size: 12px; text-align: center}
#main2020 .pestSection .forecast .step3 .calendarS table thead:after{ content: ''; display: block; height: 1px; width: 100%}
#main2020 .pestSection .forecast .step3 .calendarS table th{ background: #3598db; color: #fff; border: 1px solid #fff; line-height: 22px; }
#main2020 .pestSection .forecast .step3 .calendarS table td{ background: #fff; border: 1px solid #e5e5e5; line-height: 30px; box-sizing: border-box}
#main2020 .pestSection .forecast .step3 .calendarS table td.s{ background: #fafafa}
#main2020 .pestSection .forecast .step3 .calendarS table td.sign1{ border: 3px solid #62b45f; line-height: 20px}
#main2020 .pestSection .forecast .step3 .calendarS table td.sign2{ border-bottom: 3px solid #3598db; line-height: 20px}
#main2020 .pestSection .forecast .step3 .calendarS table td.sign3{ line-height: 20px}
#main2020 .pestSection .forecast .step3 .calendarS table td.sign3:after{ content: ''; display: block; width: 7px; height: 7px; border-radius: 50%; margin: 0 auto; background: #da4301}

#main2020 #container .btmSection{ padding: 30px 0 25px; background: #f8f8f8; border-top: 1px solid #e5e5e5}
#main2020 #container .btmSection ul{ display: table;}
#main2020 #container .btmSection ul>li{ display: table-cell; width: 20%}
#main2020 #container .btmSection ul>li a{ display: block; padding: 0 30px 0 85px; position: relative; font-size: 14px; color: #a0a0a0; line-height: 1.2; word-break: keep-all; min-height: 65px}
#main2020 #container .btmSection ul>li a i{ display: block; width: 65px; height: 65px; border-radius: 50%; background: #e2e2e2; position: absolute; left: 0; top: 0}
#main2020 #container .btmSection ul>li a i:before{ content: ''; display: block; height: 41px; background: url(../images/main/mainIcon2020.png) no-repeat 0 -48px; margin: 10px auto 0}
#main2020 #container .btmSection ul>li.mn1 a i:before{ width: 39px}
#main2020 #container .btmSection ul>li.mn2 a i:before{ width: 48px; height: 43px; background-position: -40px -45px; margin-top: 12px}
#main2020 #container .btmSection ul>li.mn3 a i:before{ width: 32px; background-position: -91px -48px; margin-top: 12px}
#main2020 #container .btmSection ul>li.mn4 a i:before{ width: 42px; background-position: -128px -48px}
#main2020 #container .btmSection ul>li.mn5 a i:before{ width: 40px; background-position: -175px -48px}
#main2020 #container .btmSection ul>li a strong{ display: block; font-size: 17px; color: #323232; font-weight: 400; margin-bottom: 8px}

/* 2020.08.10. 이미지수집관리 */
.picSlideArea.wookmark .tilesDiv{ height: 420px; overflow-y: auto}
.picSlideArea.wookmark #tiles{ position: relative;}
.picSlideArea.wookmark #tiles li>a{ display: block; margin-bottom: 10px;}
.picSlideArea.wookmark #tiles li>a img{ height: auto;  box-sizing: border-box; border: 1px solid #ccc; opacity: .8}
.picSlideArea.wookmark #tiles li.active>a img{ border: 5px solid #ff2a00; opacity: 1}
.picSlideArea.wookmark .selectImg{ margin: 10px 20px; background: #d9f6ff; text-align: center; padding: 8px; font-size: 16px}
.picSlideArea.wookmark .selectImg strong{ font-size: 20px; color: #ff2a00; font-weight: 500}
.picSlideArea.wookmark .inSch{ margin: 0 20px;  position: relative}
.picSlideArea.wookmark>table{ margin: 10px 20px 0; width: calc(100% - 40px)}
#container .picSlideArea.wookmark .inSch  h4{ margin: 30px 0 5px; padding-left: 0; font-size: 18px; font-weight: 400}
.picSlideArea.wookmark .inSch .schBox{ border: 0; border-top: 1px solid #e7e7e7;}
.picSlideArea.wookmark .inSch .schBox th label{ font-weight: 500}
.picSlideArea.wookmark .inSch .schBox td label{ padding-left: 5px; margin-right: 15px}
.picSlideArea.wookmark .inSch .button{ position: absolute; right: 0; top:55px}

/* 2020 08 19 */
.pestSection.sub{ padding: 10px; background: #f6f6f6; border-top: 1px solid #ccc; margin-bottom: 30px}
.pestSection.sub .step1, .pestSection.sub .step2, .pestSection.sub .step3{ background: #fff; padding: 10px}
.pestSection.sub .step1{ width: 350px !important}
.pestSection.sub .step2{ width: 250px !important}
.pestSection.sub .step3{ width: calc(100% - 370px - 310px) !important}
.sbGridArea{ margin: 0 0 30px}

.afterClear:after{ content: ''; display: block; clear: both}

/* 2020 08 19 */
.pestSection.sub{ padding: 10px; background: #f6f6f6; border-top: 1px solid #ccc; margin-bottom: 30px}
.pestSection.sub .step1, .pestSection.sub .step2, .pestSection.sub .step3{ background: #fff; padding: 10px}
.pestSection.sub .step1{ width: 350px !important}
.pestSection.sub .step2{ width: 250px !important}
.pestSection.sub .step3{ width: calc(100% - 370px - 310px) !important}
.sbGridArea{ margin: 0 0 30px}

.afterClear:after{ content: ''; display: block; clear: both}

.pestClear>div{ float: left; width: 49.5%;}
.pestClear>div+div{ float: right}
.pestClear .viewerDiv{ height: 800px; background: #f1f1f1}
.pestClear .viewerDiv.inform{ overflow: hidden; overflow-y: auto; background: #fff; border: 1px solid #ddd; box-sizing: border-box}
#main2020 .viewerDiv.inform>ul>li p{ margin: 0; line-height: 40px; border-radius: 40px; font-size: 18px;}
#main2020 .viewerDiv.inform>ul>li p strong{ border-radius: 0; top: -15px; width: auto; padding: 0 10px}
#main2020 .viewerDiv.inform>ul{ padding: 30px 10px 20px}
#main2020 .viewerDiv.inform>ul>li{ width: 100%; float: none; margin-bottom: 30px}
#main2020 .viewerDiv.inform>ul>li:after{ width: 0}
#main2020 .viewerDiv.inform li li{ float: left; width: 50%; box-sizing: border-box}
#main2020 .viewerDiv.inform li li:nth-child(even){ background: #fff}
#main2020 .noContDiv{ background: #e9e9e9 url(../images/common/noImg2020.png) no-repeat 50% 10px; padding: 150px 20px 10px; font-size: 16px; text-align: center; color: #8c8c8c}
#main2020 span.button.medium{ padding: 0}
#main2020 #container .subcontent .contentBody .newH3{ position:static; font-size: 18px; height: auto; line-height: initial; transform: none; -webkit-transform: none; color: #676767;}

#main2020 .inputData{ border: 1px solid #d8d8d8; box-sizing: border-box; height: 35px; line-height: 33px; background: #fff; border-radius: 0; text-indent: 5px;}
#main2020 .newButton.h35{ height: 35px; line-height: 35px}

#main2020.modalBack{ overflow: hidden}
#main2020 .layerPop2020{ position: absolute; width: 100%; height: 100%; background: rgba(0,0,0,.5); top: 0; z-index: 100000}
#main2020 .layerPop2020>div{ overflow: auto; position: absolute; left: 50%; transform: translateX(-50%); -webkit-transform: translateX(-50%); top: 275px; width: 800px; background: #3086c9; box-sizing: border-box; padding: 10px}
#main2020 .layerPop2020 .layerTl{ display: block; font-size: 25px; color: #fff; padding: 0 0 8px 10px; border-bottom: 5px solid #006eaf; }
#main2020 .layerPop2020 .layerTl:after{ content: 'NCPMS'; border: 0; right: 30px; top: -10px; font-family: 'Fredoka One', cursive; font-size: 80px; opacity: .08; letter-spacing: 0; position: absolute; color: #fff}
#main2020 .layerPop2020 .layerCont{ background: #fff; box-sizing: border-box; padding: 10px}
#main2020 .layerPop2020 >div>button{ position: absolute; right: 10px; top: 5px; font-size: 0;  width: 40px; height: 45px; text-align: center; background: transparent}
#main2020 .layerPop2020 >div>button:before{ content: '\2715'; display: inline-block; color: #fff; font-size: 30px;}

#main2020 .ulDot1{ margin: 10px}
#main2020 .ulDot1:after{ content: ''; display: block; clear: both}
#main2020 .ulDot1>li{ float: left; width: 50%; font-size: 16px; word-break: keep-all; line-height: 1.3; position: relative; padding-left: 15px; margin-bottom: 20px; box-sizing: border-box;}
#main2020 .ulDot1>li:before{ content: ''; display: block; width: 6px; height: 6px; background: #fc5e48; position: absolute; left: 0; top: 8px}
#main2020 .ulDot1>li strong{ font-weight: 400; display: inline-block; width: 100px}

/* 2020 08 21 */
#main2020 #container .midSection{ padding-top: 120px}
#main2020 #container .midSection>strong{ font-size: 55px; font-family: inherit; font-weight: 800;}
#main2020 #container .midSection p{ font-size: 20px; border-top: 2px solid rgba(0,0,0,.6);}
#main2020 #container .midSection p strong{ font-size: 28px}

/* 2020 08 31 */
#main2020 #header>a strong{ margin: 0 0 0 8px; vertical-align: top;}
#main2020 #wrap{ background: transparent}
.mainBgSection{ position: absolute; width: 100%; height: 580px; top: 0; left: 0; z-index: 0;}
.mainBgSection .swiper-container{ height: 100%}
.mainBgSection .swiper-slide{ background: url(../images/main/mainBg.jpg) no-repeat 50% 0; height: 595px;}
.mainBgSection .swiper-slide.slide2{ background-position: 50% -595px;}
.mainBgSection .swiper-slide.slide3{ background-position: 50% -1190px;}
.mainBgSection .swiper-container .swiper-pagination{ bottom: 140px}
#main2020 #container .midSection>strong{ color: #fffc01; text-shadow: 2px 2px 0 #000;}
#main2020 #container .midSection>span{ color: rgba(255,255,255,.8);}
#main2020 #container .midSection p{ border-color: rgba(255,255,255,.8); color: #fff; padding: 0 80px; font-size: 1.6em}

/* 2020 09 16 */
#main2020 #wrap{ background: url(../images/common/mainVis2020.jpg) no-repeat 50% -320px;}
#main2020 #wrap.mainBg{ background: transparent}
#main2020 .inform>ul>li.warning p, #main2020 .inform li.warning li a:before, #main2020 .viewerDiv.inform>ul li.warning p, #main2020 .viewerDiv.inform li.warning li a:before{ background: #dd2f00;}
#main2020 .viewerDiv.inform>ul li.warning p strong, #main2020 .inform>ul li.warning p strong{ border-color: #dd2f00}
#main2020 .viewerDiv.inform>ul li.watch p, #main2020 .viewerDiv.inform li.watch li a:before, #main2020 .inform>ul li.watch p, #main2020 .inform li.watch li a:before{ background: #ffcc00;}
#main2020 .viewerDiv.inform>ul li.watch p strong, #main2020 .inform>ul li.watch p strong{ border-color: #ffcc00}
#main2020 .viewerDiv.inform>ul li.forecast p, #main2020 .viewerDiv.inform li.forecast li a:before, #main2020 .inform>ul li.forecast p, #main2020 .inform li.forecast li a:before{ background:#13b50f;}
#main2020 .viewerDiv.inform>ul li.forecast p strong, #main2020 .inform>ul li.forecast p strong{ border-color: #13b50f}

/* 2020 09 24 */
#main2020 .inform li li.active a{ font-weight: bold; background: #efefef; color: #000}
.buttonN{ display: inline-block; border-radius: 5px; height: 30px; box-sizing: border-box; line-height: 28px; padding: 0 15px; background: #dadada; border: 1px solid #c2c2c2; font-size: 0.95em}
.buttonN.blu{ background: #0079c0; border-color: #0079c0; color: #fff}
.buttonN.sblu{ background: #00a9dd; border-color: #00a9dd; color: #fff}
.buttonN.grn{ background: #7ac043; border-color: #7ac043; color: #fff}
.buttonN.icon{ padding: 0 15px 0 12px}
.buttonN.icon:before{ content: ''; display: inline-block; margin-right: 3px; background: url(../images/common/icon2020.png) no-repeat; width: 14px; height: 18px; vertical-align: middle; position: relative; top: -1px}
.buttonN.icon.w_doc:before{ background-position: -75px 0;}
.buttonN.icon.b_doc:before{ background-position: -75px -18px;}
.buttonN.icon.w_grh:before{ background-position: -92px 0;}
.buttonN.icon.b_grh:before{ background-position: -92px -18px;}
.buttonN.icon.w_sch:before{ background-position: -110px 0;}
.buttonN.icon.b_sch:before{ background-position: -110px -18px;}

/* 2020 09 24 main */
#main2020 .header_tp .fl+.usrS{ float: left; margin-left: 10px}
#main2020 .header_tp .fl+.usrS a{ border-radius: 5px 0 0 5px; background: #fff; color: #323232; text-align: center; font-weight: 300; margin: 0 -2px; padding: 0 20px}
#main2020 .header_tp .fl+.usrS a+a{ border-radius: 0 5px 5px 0}
#main2020 .header_tp .fl+.usrS a.active{ background: #febc32; color: #000; font-weight: 500}
#main2020 #wrap.mainBg.onePic{ background: url(../images/common/mainVis2020.jpg) no-repeat 50% 0;}
#main2020 #wrap.mainBg.slide{ background: transparent}
#main2020 #wrap.mainBg.slide #container .midSection>strong{ color: #fffc01; text-shadow: 2px 2px 0 #000;}
#main2020 #wrap.mainBg.slide #container .midSection>span{ color: rgba(255,255,255,.8);}
#main2020 #wrap.mainBg.slide #container .midSection p{ border-color: rgba(255,255,255,.8); color: #fff; padding: 0 80px; font-size: 1.6em}

#main2020 #container.midSList .midSection{ min-height: auto; height: 340px}
#main2020 #container.midSList .midCenter .pestMidBox.afterClear{ height: 230px;}
#main2020 #container.midSList .midCenter .pestMidBox>div.counsel{ width: calc(100% - 390px)}
#main2020 #container.midSList .midCenter .pestMidBox .iconBook{ width: 390px}
#main2020 #container.midSList .midCenter .pestMidBox h2{ text-align: left}
#main2020 #container.midSList .midCenter .pestMidBox h2 span{ display: inline-block; margin-left: 10px}
#main2020 #container.midSList .midCenter .pestMidBox .iconBook ul li{ display: block; float: left; width: 33.33%; height: 50%}
#main2020 #container.midSList .midCenter .pestMidBox .iconBook ul li a{ border-bottom: 1px solid #3086c9; padding: 6px 0 3px; vertical-align: middle; position: relative;}

#main2020 #container.midSList .midCenter .pestMidBox .counsel{ position: relative;}
#main2020 #container.midSList .midCenter .pestMidBox .counsel ul{ margin: 20px 0 0; height: 140px; display: table; width: 100%}
#main2020 #container.midSList .midCenter .pestMidBox .counsel ul li{ display: block; float: left; width: 25%; height: 100%}
#main2020 #container.midSList .midCenter .pestMidBox .counsel ul li a{ display: block; background: #b4e7f7; margin: 0 10px 0 0; height: 100%}
#main2020 #container.midSList .midCenter .pestMidBox .counsel ul li:last-child a{ margin: 0}
#main2020 #container.midSList .midCenter .pestMidBox .counsel ul li a span{ display: block; height: 95px; overflow: hidden; background: #fff}
#main2020 #container.midSList .midCenter .pestMidBox .counsel ul li a span img{ width: 100%; height: auto}
#main2020 #container.midSList .midCenter .pestMidBox .counsel ul li a em{ display: block; padding: 8px 5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
#main2020 #container.midSList .midCenter .pestMidBox .counsel button{ right: 25px; top: 10px; background: transparent; width: auto; height: auto; font-weight: 500; padding: 5px 0}
#main2020 #container.midSList .midCenter .pestMidBox .counsel button:before{ display: inline-block; vertical-align: middle; margin-right: 5px}

/* 예찰요원일 경우 */
#main2020 #container.midSList.usr_f .midSection{ height: 310px}
#main2020 #container.midSList.usr_f.midSlide .midSection{ padding-top: 100px}
#main2020 #container.midSList.usr_f .mainCateg{ text-align: center; position: relative; height: 60px}
#main2020 #container.midSList.usr_f .mainCateg>div{ width: 300px; margin: 0 auto; background: #febc32; border-radius: 60px; height: 60px; position: relative}
#main2020 #container.midSList.usr_f .mainCateg>div strong{ display: block; text-align: center; color: #000; font-size: 1.7em; line-height: 60px; font-weight: 500}
#main2020 #container.midSList.usr_f .mainCateg>div button{ display: block; width: 60px; height: 60px; position: absolute; top: 0; font-size: 0; background: transparent; text-align: center}
#main2020 #container.midSList.usr_f .mainCateg>div button.next{ right: 0}
#main2020 #container.midSList.usr_f .mainCateg>div button:before{ content: '\25C0'; display: inline-block; color: #fff; font-size: 15px}
#main2020 #container.midSList.usr_f .mainCateg>div button.next:before{ content: '\25B6	';}
#main2020 #container.midSList.usr_f .mainCateg>a{ display: block; position: absolute; right: 0; top: 0; background: #0c4ca3; border-radius: 60px; line-height: 60px; font-size: 1.2em; color: #fff; padding: 0 45px 0 40px; font-weight: 500}
#main2020 #container.midSList.usr_f .mainCateg>a:before{ content: ''; display: inline-block; background: url(../images/main/mainIcon2020.png) no-repeat -123px -94px; width: 22px; height: 30px; margin-right: 5px; vertical-align: middle; position: relative; top: -2px}

#main2020 #container.midSList.usr_f #situationBoard .boardStep1 .cropBox, #main2020 #container.midSList.usr_f #situationBoard .boardStep1 .cropBox .pickCrop, #main2020 #container.midSList.usr_f #situationBoard .boardStep1 .cropBox .swiper-container{ border-radius: 20px;}

/* 2020 10 07 */

.sbgrid_button {display: inline-block;border-radius: 5px;height: 25px;box-sizing: border-box;line-height: 20px;padding: 0 10px;background: #dadada;border: 1px solid #c2c2c2;font-size: 0.95em;}

/* 2020 10 08 lhs */
.buttonN.icon{padding: 0 15px 0 12px;margin-right: 10px;}
/* 2020 10 14 */
/* .mainBgSection .swiper-container .swiper-pagination{ bottom: 160px;}
#main2020 #wrap.mainBg.slide #situationBoard .boardStep1 .stepTabs{ border: 1px solid #dce4ea; border-bottom: 5px solid #dce4ea; margin-top: 20px; border-radius: 20px; background: #fff;}
#main2020 #wrap.mainBg.slide #situationBoard .boardStep1 .stepTabs>div, #main2020 #wrap.mainBg.slide #situationBoard .boardStep1 .stepTabs>div.s1{ padding: 35px 0}
#main2020 #wrap.mainBg.slide #situationBoard .boardStep1 .stepTabs>div:last-child{ padding: 40px 0;}
#main2020 #wrap.mainBg.slide #situationBoard .boardStep1 .stepTabs>div a{ font-size: 20px} */

/* 2020 10 14 */
#main2020 .layerSearch>div fieldset, #main2020 .layerSearch>div fieldset>div{ display: contents;}
#main2020 #container.midSList.usr_f.midSlide .midSection{ padding-top: 100px;}
#main2020 #wrap.mainBg.slide .mainBgSection .swiper-container .swiper-pagination{ bottom: 160px;}
#main2020 #wrap.mainBg.slide #situationBoard .boardStep1 .stepTabs{ border: 1px solid #dce4ea; border-bottom: 5px solid #dce4ea; margin-top: 20px; border-radius: 20px; background: #fff;}
#main2020 #wrap.mainBg.slide #situationBoard .boardStep1 .stepTabs>div, #main2020 #wrap.mainBg.slide #situationBoard .boardStep1 .stepTabs>div.s1{ padding: 35px 0}
#main2020 #wrap.mainBg.slide #situationBoard .boardStep1 .stepTabs>div:last-child{ padding: 40px 0;}
#main2020 #wrap.mainBg.slide #situationBoard .boardStep1 .stepTabs>div a{ font-size: 20px}
#main2020 #wrap.mainBg.slide #situationBoard .boardStep1 .stepTabs>div:first-child:after{ top: 40px;}

/* 2020 10 16 */
#main2020 #realHeader.login .header_tp .innerDiv .userArea{ margin-right: 0}
#main2020 #realHeader.login #header>#gnb>li>ul{ min-height: 850px}
#main2020 #wrap.mainBg.slide #situationBoard .boardStep1 .stepTabs{ border: 0; margin-bottom: 0; }
#main2020 #wrap.mainBg.slide #situationBoard .boardStep1 .stepTabs>div:last-child{ padding: 20px 0}
#main2020 #wrap.mainBg.slide #situationBoard .boardStep1 .stepTabs>div a{ background: #d1d1d1; border-radius: 0; height: 50px; vertical-align: top; line-height: 50px; padding: 0 80px 0 60px; margin: 0}
#main2020 #wrap.mainBg.slide #situationBoard .boardStep1 .stepTabs>div a.active{ background: #0c4ca3; color: #fff; border-radius: 0}
#main2020 #wrap.mainBg.slide #situationBoard .boardStep1 .stepTabs>div a:before{ border-radius: 0; background: url(../images/common/stepTabs.png) no-repeat 50% 100% / 25px auto; vertical-align: top; position: relative; top: 3px;}
#main2020 #wrap.mainBg.slide #situationBoard .boardStep1 .stepTabs>div a.active:before{ width: 40px; height: 40px}
#main2020 #wrap.mainBg.slide #situationBoard .boardStep1 .stepTabs>div, #main2020 #wrap.mainBg.slide #situationBoard .boardStep1 .stepTabs>div.s1{ padding: 20px 0}
#main2020 #wrap.mainBg.slide #situationBoard .boardStep1 .stepTabs>div:last-child{ padding: 20px 0}
#main2020 #wrap.mainBg.slide #situationBoard .boardStep1 .stepTabs>div:last-child a{ background: #00aae5; border-radius: 5px; color: #fff; font-weight: 500;}
#main2020 #wrap.mainBg.slide #situationBoard .boardStep1 .stepTabs>div:first-child{ border: 0}
#main2020 #wrap.mainBg.slide #situationBoard .boardStep1 .stepTabs>div:first-child:after{ top: 30px;}

/* 2020 10 19 */
#main2020 #wrap.mainBg.slide #situationBoard .boardStep1 .stepTabs>div.s1 a{ background: #d1d1d1; color: #4c4f56; font-weight: 400}
#main2020 #wrap.mainBg.slide #situationBoard .boardStep1 .stepTabs>div.s1 a.active{ background: #00aae5; color: #fff}
#main2020 #wrap.mainBg.slide #situationBoard .boardStep1 .stepTabs>div+div a{ padding: 0; width: 180px}
#main2020 #wrap.mainBg.slide #situationBoard .boardStep1 .stepTabs>div+div a.active{ background: #0c4ca3;}

/* 2020 10 22 */
#main2020 .pestSection .forecast .step3 .calendarS table td{ line-height: 1; padding: 5px 0;}
#main2020 .pestSection .forecast .step3 .calendarS table td.sign1{ line-height: 1; padding: 3px 0;}
#main2020 .pestSection .forecast .step3 .calendarS table td.sign2, #main2020 .pestSection .forecast .step3 .calendarS table td.sign3{ line-height: 1;}
#main2020 .pestSection .forecast .step3 .calendarS table td.sign3{ padding: 2px 0;}

/* 2020 11 20 jbh */
.schBox select {border: 1px solid #ccc; height: 30px;}		/* old_style height: 22px; padding: 1px; 수정 */

/* 2020 11 27 jbh SB그리드내 버튼 이미지 커서 손모양 */
.sbgrid_image_data_col_st > img[src='/images/grid/zero.png']{cursor:pointer;}
.sbgrid_image_data_col_st > img[src='/images/grid/save.png']{cursor:pointer;}
.sbgrid_image_data_col_st > img[src='/images/grid/input.png']{cursor:pointer;}

/* 2020 12 07 jbh 종합현황 년도 셀렉트박스 화살표방향 아래 */
#situationBoard .boardStep2 .tpBox label:after{ content: '\25BC'; display: block; width: 30px; height: 30px; border: 1px solid #ccc; box-sizing: border-box; font-size: 10px; border-radius: 3px; color:#919191; text-align: center; line-height: 30px; position: absolute; right: 5px; top: 3px}

/* 2020 12 17 jbh 메인화면 매뉴얼 탭 추가 */
#main2020 #container .midCenter .tabsArea>div>div:nth-child(2) h2{ left: 136px;}
#main2020 #container .midCenter .tabsArea>div>div:nth-child(3) h2{ left: 272px;}

/* 2021 02 01 SBGrid가 기존 old_style.css의 grid 클래스로 선언된 table 안에 정의된 경우, 스타일 깨짐현상 방지를 위한 reGrid 클래스 추가(뷰단 적용시 reGrid클래스로 바꿀것) */
.reGrid tbody .bgbr{ border: 1px solid #dedede; padding: 5px 6px; color: #585858; background: #fafbfc;}
.reGrid tbody .bgbr + td{ min-height: 31px; border: 1px solid #dedede; color: #585858; text-align: left; background: #fff; line-height: 160%; padding: 5px 6px;}

/* 2021 06 04 */
#Ncontent #container select.inputData{ height: 35px}
.monitorBox{ text-align: center}
.monitorBox>.dateDiv{ display: inline-block; background: #e5e5e5; border: 1px solid #bbb; border-bottom: 0;  border-radius: 10px 10px 0 0; padding: 10px 10px 0}
#main2020 .monitorBox>.dateDiv .inputData{ border: 0 !important; height: 40px !important; line-height: 40px; margin-left: 10px}
#main2020 .monitorBox>.dateDiv .hasDatePic{ background: #fff url(../images/common/calendar.png) no-repeat 95% 50%; padding-right: 40px;}
.monitorBox>.dateDiv  button{ display: inline-block; margin: 0 10px 0 50px; width: 40px; height: 40px; border-radius: 50%; background: #acacac; line-height: 40px; color: #000; text-align: center}
.monitorBox>.dateDiv  button.active{ background: #3086c9; color: #fff}
.monitorBox>.cropSection{ background: #e5e5e5; border: 1px solid #bbb; padding: 10px 0; margin-top: -1px}
.monitorBox>.cropSection .swiper-container{ margin: 0 10px; background: #fff; padding: 10px 30px}
.monitorBox>.cropSection .swiper-container>span{ width: 27px; height: 40px; color: #fff; background: rgba(0,0,0,0.7); z-index: 30; font-size: 0; right: 0}
.monitorBox>.cropSection .swiper-container>span.swiper-button-prev{ left: 0; right: auto}
.monitorBox>.cropSection .swiper-container>span:after{ content: ''; font-size: 15px}
.monitorBox>.cropSection ul li a{ display: block; width: 110px; height: 85px; box-sizing: border-box; border-radius: 5px; background: #e5e5e5; padding: 3px 45px 0 5px; border: 2px solid transparent}
.monitorBox>.cropSection ul li.active a{ border-color: #3086c9; font-weight: 600; color: #000; background: #fff}
.monitorBox>.cropSection ul li a i{ display: block;  width: 60px; height: 54px; box-sizing: border-box; background: url(../images/common/iconCrop.png) no-repeat; transition: all .2s; -webkit-transition: all .2s; margin-bottom: 3px}
.monitorBox>.cropSection ul li.persimmon a i{ background-position: -12px -10px}
.monitorBox>.cropSection ul li.tangerine a i{ background-position: -92px -10px}
.monitorBox>.cropSection ul li.chili a i{ background-position: -171px -10px}
.monitorBox>.cropSection ul li.apple a i{ background-position: -251px -10px}
.monitorBox>.cropSection ul li.radish a i{ background-position: -334px -10px}
.monitorBox>.cropSection ul li.cabbage a i{ background-position: -413px -10px}
.monitorBox>.cropSection ul li.barley a i{ background-position: -492px -10px}
.monitorBox>.cropSection ul li.peach a i{ background-position: -573px -10px}
.monitorBox>.cropSection ul li.garlic a i{ background-position: -653px -10px}
.monitorBox>.cropSection ul li.onion a i{ background-position: -731px -10px}
.monitorBox>.cropSection ul li.bean a i{ background-position: -811px -10px}
.monitorBox>.cropSection ul li.grape a i{ background-position: -891px -10px}
.monitorBox>.cropSection ul li.pear a i{ background-position: -971px -10px}
.monitorBox>.cropSection ul li.rice a i{ background-position: -1054px -10px}
.monitorBox>.cropSection ul li.sesame a i{ background-position: -1290px -10px}
.stepBox{ position: absolute; left: 67px; bottom: 20px}
.stepBox span{ display: block;position: absolute; font-size: 8px; font-weight: 200; width: 35px; height: 13px; box-sizing: border-box; line-height: 10px; text-align: center; color: #000;}
.stepBox span.s1{ background: #acacac; border: 1px solid #707070; bottom: 0}
.stepBox span.s2{ background: #bf0000; border: 1px solid #bf0000; color: #fff; bottom: 15px}
.stepBox span.s3{ background: #fff000; border: 1px solid #c7bb00; bottom: 30px}
.stepBox span.s4{ background: #105db4; border: 1px solid #04356d; color: #fff; bottom: 45px}

.monitorBox>.cropSection .cropNext{ padding: 10px 45px 10px; text-align: left}
.monitorBox>.cropSection .cropNext li{ display: inline-block; width: 23%; box-sizing: border-box; padding: 10px 10px 10px 25px; position: relative; vertical-align: top; margin: 0 10px 10px 0; border: 2px solid transparent; cursor: pointer}
.monitorBox>.cropSection .cropNext li.active{ border-color: #3086c9; background: #fff; border-radius: 5px}
.monitorBox>.cropSection .cropNext li:before{ content: ''; display: block; position: absolute; left: 10px; top: 20px; width: 5px; height: 5px; background: #3086c9}
.monitorBox>.cropSection .cropNext li strong{ font-weight: 400; font-size: 1.05rem}
.monitorBox>.cropSection .cropNext li.active strong{ font-weight: 600}
.monitorBox>.cropSection .cropNext li .stepBox, .monitorBox>.cropSection .cropNext li .stepBox span, .monitorBox .cropLegend .stepBox, .monitorBox .cropLegend .stepBox span{ position: static}
.monitorBox>.cropSection .cropNext li .stepBox span, .monitorBox .cropLegend .stepBox span{ display: inline-block; margin: 0 2px 0 0;}
.monitorBox .cropLegend{ margin: 10px 0; text-align: left;}
.monitorBox .cropLegend .stepBox em{ display: inline-block; margin: 0 35px 0 5px; font-size: 0.875em}

.chartArea>div{ box-sizing: border-box; margin-top: 30px; width: 49.5%}
.chartArea .mapChart{ position: relative;}
.chartArea .mapChart .button{ position: absolute; right: 10px; bottom: 10px}

.maskPicA .picArea{ background: #f5f5f5;}
#container .maskPicA  h4{ padding-left: 0; margin: 10px 0}
#container .maskPicA .picListDiv{ overflow-y: auto;}
#container .maskPicA .picListDiv ul li{ position: relative; border: 1px solid #ddd; padding: 5px; min-height: 101px; margin: 5px 0 0}
#container .maskPicA .picListDiv ul li span{ position: absolute; left: -1px; top: -1px; background: #da4301; width: 35px; height: 35px; text-align: center; line-height: 35px; color: #fff}

.cropStepChk>div{ margin-bottom: 40px;}
#container .cropStepChk>div h2{ display: block; border-bottom: 1px solid #cecece; position: relative; padding-bottom: 5px; font-size: 1.2rem; font-weight: 4300}
.cropStepChk>div h2:after{ content: ''; display: block; width: 100%; height: 3px; background: #e5e5e5; position: absolute; bottom: -4px; left: 0}
#container .cropStepChk>div h2 span{ display: inline-block; font-size: 1.5rem; color: #3086c9; font-style: italic; font-weight: 600; margin-right: 5px}
#container .cropStepChk .cropBox{ margin: 20px 0 0}
#container .cropStepChk .cropBox li{ display: inline-block; margin: 0 10px 0 0; text-align: center; vertical-align: top}
#container .cropStepChk .cropBox li a{ display: block; background: #e5e5e5; border-radius: 5px; width: 90px; height: 90px; padding-top: 10px}
#container .cropStepChk .cropBox li.active a{ background: #489fe4; color: #fff; font-weight: 600}
#container .cropStepChk .cropBox li a i{ display: block; margin: 0 auto 5px; width: 60px; height: 54px; box-sizing: border-box; background: url(../images/common/iconCrop.png) no-repeat;}
#container .cropStepChk .cropBox li.persimmon a i{ background-position: -10px -12px}
#container .cropStepChk .cropBox li.tangerine a i{ background-position: -89px -12px}
#container .cropStepChk .cropBox li.chili a i{ background-position: -168px -12px}
#container .cropStepChk .cropBox li.apple a i{ background-position: -248px -12px}
#container .cropStepChk .cropBox li.radish a i{ background-position: -331px -12px}
#container .cropStepChk .cropBox li.cabbage a i{ background-position: -440px -12px}
#container .cropStepChk .cropBox li.barley a i{ background-position: -490 px -12px}
#container .cropStepChk .cropBox li.peach a i{ background-position: -570px -12px}
#container .cropStepChk .cropBox li.garlic a i{ background-position: -651px -12px}
#container .cropStepChk .cropBox li.onion a i{ background-position: -729px -12px}
#container .cropStepChk .cropBox li.bean a i{ background-position: -808px -12px}
#container .cropStepChk .cropBox li.grape a i{ background-position: -888px -12px}
#container .cropStepChk .cropBox li.pear a i{ background-position: -968px -12px}
#container .cropStepChk .cropBox li.rice a i{ background-position: -1053px -12px}
#container .cropStepChk .cropBox li.potato a i{ background-position: -1128px -12px}
#container .cropStepChk .cropBox li.welshonion a i{ background-position: -1211px -12px}
#container .cropStepChk .cropBox li.sesame a i{ background-position: -1290px -12px}
#container .cropStepChk .cropBox li span{ display: block; line-height: 1.8}
#container .cropStepChk .cropBox li.active span{ font-weight: 600}

.chkBoxArea{ padding: 10px 0 0}
.chkBoxArea span{ display: inline-block; margin: 0 35px 0 0; }
.chkBoxArea label{ display: inline-block; position: relative; padding-left: 30px; line-height: 35px}
.chkBoxArea label:before{ content: ''; display: block; background: url(../images/common/formC.png) no-repeat 0 -43px; width: 20px; height: 20px; position: absolute; left: 0; top: 8px}
.chkBoxArea input{ position: absolute; width: 0; height: 0; overflow: hidden;}
.chkBoxArea input[type='checkbox']:checked+label, .chkBoxArea.radio input[type='radio']:checked+label{ font-weight: 600}
.chkBoxArea input[type='checkbox']:checked+label:before{ background-position: 0 -65px}

.chkBoxArea.radio label:before{ background-position: 0 0}
.chkBoxArea.radio input[type='radio']:checked+label:before{ background-position: 0 -21px}

.smsMsgC{ text-align: center}
.smsMsgC>p{ font-size: 1.15rem; margin-bottom: 20px}
.smsMsgC>p:before{ content: ''; display: block; background: url(../images/common/icon2021.png) no-repeat 0 0; width: 53px; height: 52px; margin: 0 auto 5px}
.smsMsgC button{ display: inline-block; width: 210px; height: 60px; text-align: center; border-radius: 5px; margin: 0 5px; font-size: 1.1rem}
.smsMsgC button:before{ content: ''; display: inline-block; background: url(../images/common/icon2021.png) no-repeat -60px 0; width: 32px; height: 30px; vertical-align: middle; margin-right: 10px}
.smsMsgC button.btnSMS{ background: #00a9dd; color: #fff}
.smsMsgC button.btnTalk{ background: #febc32}
.smsMsgC button.btnTalk:before{ background-position: -96px 0}

#situationBoard .boardStep1 .cropBox .swiper-container ul li.all a i{ background:#f5f7fc; line-height: 80px; font-weight: 600}
#situationBoard .boardStep1 .cropBox .swiper-container ul li.all.active a{ font-weight: 600; color: #000; font-size: 17px}
#situationBoard .boardStep1 .cropBox .swiper-container ul li.all.active a i, #situationBoard .boardStep1 .cropBox .swiper-container ul li.all:hover a i{ background: #00aae5; color: #fff; border-color: #00aae5}
#wrap.memberP .mainBgSection{ height: 530px}
#wrap.memberP #situationBoard .boardStep1 .cropBox .pickCrop{ width: 250px;}
#wrap.memberP #situationBoard .boardStep1 .cropBox .pickCrop strong, #wrap.memberP #situationBoard .boardStep1 .cropBox .pickCrop span{ display: block; text-align: center}
#wrap.memberP #situationBoard .boardStep1 .cropBox .pickCrop span:before{ content: ''; display: block; background: url(../images/common/icon2021.png) no-repeat 0 -55px; width: 40px; height: 36px; margin: 30px auto 8px;}
#wrap.memberP .mainBgSection .swiper-container .swiper-pagination{ bottom: 100px;}
#wrap.memberP #situationBoard .boardStep1 .cropBox .swiper-container{ padding-left: 280px}
#wrap.memberP #situationBoard .boardStep1 .cropBox .swiper-button-prev{ left: 247px}
#wrap.memberP .btnMainP{ display: block;  position: absolute;  right: 0;  top: -10px;  background: #0c4ca3; border-radius: 7px; line-height: 45px;  font-size: 1.05em; color: #fff; padding: 0 25px 0 20px; font-weight: 500;}
#wrap.memberP .btnMainP:before{ content: ''; display: inline-block; background: url(../images/main/mainIcon2020.png) no-repeat -123px -94px; width: 22px;  height: 30px; margin-right: 5px;  vertical-align: middle; position: relative; top: -2px;}

/* 2021 06 21 */
.chartArea2.pestClear{ margin-top: 30px}
.chartArea2.pestClear>div:first-child{ width: 21%; background: #f1f1f1; border: 1px solid #bbb; padding: 10px; box-sizing: border-box}
.chartArea2.pestClear .cropNext{ background: #fff; height: 100%;}
.chartArea2.pestClear>div+div{ float: left; width: 36%}
.chartArea2.pestClear>div+div+div{ float: right; width: 42%}
.chartArea2.pestClear .viewerDiv { position: relative}
.chartArea2.pestClear .viewerDiv span.button.medium{ position: absolute; bottom: 10px; right: 10px}
.chartArea2.pestClear .cropNext li{ box-sizing: border-box; padding: 10px 10px 10px 20px; position: relative; vertical-align: top; border: 3px solid transparent; cursor: pointer; margin-bottom: 10px}
.chartArea2.pestClear .cropNext li.active{ border-color: #3086c9; background: #e9f5ff; border-radius: 8px}
.chartArea2.pestClear .cropNext li:before{ content: ''; display: block; position: absolute; left: 7px; top: 20px; width: 5px; height: 5px; background: #3086c9}
.chartArea2.pestClear .cropNext li strong{ font-weight: 400; font-size: 1.05rem}
.chartArea2.pestClear .cropNext li.active strong{ font-weight: 600}
.chartArea2.pestClear .stepBox{ position: static}
.chartArea2.pestClear .stepBox span{ position: static; display: inline-block; margin: 0 2px 0 0;}
.chartArea2.pestClear .cropLegend{ margin: 10px 0; text-align: left;}
.chartArea2.pestClear .cropLegend .stepBox em{ display: inline-block; margin: 0 35px 0 5px; font-size: 0.875em}
#situationBoard .boardStep1 .cropBox .swiper-container ul li a{ position: relative}
#situationBoard .boardStep1 .cropBox .swiper-container ul li.non a:before{ content: '\270E'; display: block; position: absolute; right: 0; top: 0; width: 18px; height: 18px; border-radius: 50%; background: #febc32; border: 3px solid #ffaf09; line-height: 1; transform: rotate(95deg); font-size: 0.95rem; font-weight: 400 !important; color: #000}

#situationBoard .boardStep1 .cropBox .swiper-container ul li.rice a i{ background-position: -1040px 0}
#situationBoard .boardStep1 .cropBox .swiper-container ul li.rice a:hover i, #situationBoard .boardStep1 .cropBox .swiper-container ul li.rice.active a i{ background-position: -1040px 100%}
#situationBoard .boardStep1 .cropBox .swiper-container ul li.potato a i{ background-position: -1120px 0}
#situationBoard .boardStep1 .cropBox .swiper-container ul li.potato a:hover i, #situationBoard .boardStep1 .cropBox .swiper-container ul li.potato.active a i{ background-position: -1120px 100%}
#situationBoard .boardStep1 .cropBox .swiper-container ul li.welshonion a i{ background-position: -1200px 0}
#situationBoard .boardStep1 .cropBox .swiper-container ul li.welshonion a:hover i, #situationBoard .boardStep1 .cropBox .swiper-container ul li.welshonion.active a i{ background-position: -1200px 100%}
#situationBoard .boardStep1 .cropBox .swiper-container ul li.sesame a i{ background-position: -1280px 0}
#situationBoard .boardStep1 .cropBox .swiper-container ul li.sesame a:hover i, #situationBoard .boardStep1 .cropBox .swiper-container ul li.sesame.active a i{ background-position: -1280px 100%}

#Ncontent #container .select_box{ display: inline-block; position: relative; line-height: 40px; height: 45px; padding: 0; font-size: 16px; border-radius: 5px; background: #0079c0; border: 0;  letter-spacing: 0; position: relative}
#Ncontent #container .select_box:after{ content: '\25BC'; display: block; color: #fff; position: absolute; right: 10px; top: 0; line-height: 45px; font-size: 10px}
#Ncontent #container .select_box select{ -webkit-appearance:none;  -moz-appearance:none;  appearance:none; background: transparent; border-color: transparent !important; color: #fff; height: 45px; text-indent: 5px}
#Ncontent #container .select_box select::-ms-expand{ display:none;}

.tabBtn button{ display: inline-block; height: 40px; box-sizing: border-box; border-radius: 5px; background: #e6e6e6; border: 1px solid #acacac; line-height: 40px; color: #000; padding: 0 15px; transition: all .2s; -webkit-transition: all .2s;}
.tabBtn button:hover{ border-color: #323232}
.tabBtn button.active{ background: #0079c0; border-color: #0079c0; color: #fff; font-weight: 600}

/* 2021 07 23 */
.monitorBox>.cropSection ul li a{ padding: 3px 5px 0; height: 110px; position: relative}
.monitorBox>.cropSection ul li a i{ margin: 0 auto 3px}
.monitorBox>.cropSection ul li a span{ display: block; position: absolute; left: -2px; bottom: 0; width: calc(100% + 4px); height: 25px; line-height: 25px; text-align: center; background: #4a6171; color: #fff; font-weight: 300; border-radius: 0 0 5px 5px;}
.monitorBox>.cropSection ul li.active a span{ background: #3086c9; font-weight: 500; font-size: 1.05rem}
.chartArea2.pestClear .cropNext{ height: auto; border-bottom: 1px dashed #969696}
.exemBox{ padding: .5em 0 0; text-align: center}
.exemBox strong{ line-height: 30px; display: inline-block}
.exemBox strong:after{ content: ''; display: block; width: 100%; height: 5px; background: #85c6ec; margin: -12px -15px 0; padding: 0 15px;}
.exemBox .stepBox{ text-align: left; margin-top: 15px}
.chartArea2.pestClear .exemBox .stepBox span{ display: block; margin: 0 0 5px; width: auto; height: 23px; line-height: 1; background: none; border: 0; text-align: left; font-size: 0.875rem; color: #323232; font-weight: 400}
.chartArea2.pestClear .exemBox .stepBox span i{ display: inline-block; width: 45px; height: 20px; margin-right: 15px; vertical-align: middle; background: #acacac; border: 1px solid #707070;}
.chartArea2.pestClear .exemBox .stepBox span.s2 i{ background: #bf0000; border: 1px solid #bf0000;}
.chartArea2.pestClear .exemBox .stepBox span.s3 i{ background: #fff000; border: 1px solid #c7bb00;}
.chartArea2.pestClear .exemBox .stepBox span.s4 i{ background: #105db4; border: 1px solid #04356d;}

#situationBoard .boardStep1 .cropBox .swiper-container ul li.non a:before{ content: '\0021'; background: #bf0000; border: 3px solid #bf0000; color: #fff; transform: inherit; font-size: 1rem; font-weight: 800 !important;}

/* 2021 09 29 */
#certiAreaType2{ clear: both; width: 900px; margin-top: 60px}
#certiAreaType2 h4{ font-size: 22px; font-weight: 500; margin: 30px 0 8px; line-height: 1.3; padding-left: 0; background: none}
#certiAreaType2 h4 span{ color: #ff0000}
#certiAreaType2 .agreeBox{ background: #fff; border: 1px solid #d2d2d2; padding: 10px;height: 150px; overflow-y: auto;}
#certiAreaType2 .orangeChk{ display: block; background: #f2f2f2; padding: 8px; font-weight: 300; text-align: center}
#certiAreaType2 .orangeChk label:before{ background: url(../images/common/formC.png) no-repeat 0 0; width: 20px; height: 20px;}
#certiAreaType2 .orangeChk input[type='checkbox']:checked+label{  font-weight: 500}
#certiAreaType2 .orangeChk input[type='checkbox']:checked+label:before{ background-position: 0 -21px}
#certiAreaType2 .phoneCeti{ background: #fff; border: 1px solid #d7d7d7; margin: 10px auto; position: relative; letter-spacing: -0.085em;}
#certiAreaType2 .phoneCeti h4{ text-align: center}
#certiAreaType2 .phoneCeti p.certify{ padding: 20px 0 20px 130px; color: #686868; line-height: 1.8; position: relative; min-height: 70px; font-size: 1.1em}
#certiAreaType2 .phoneCeti p.certify i{ display: block; position: absolute; left: 20px; top: 15px; width: 80px; height: 80px; border-radius: 50%; background: #ef9060;}
#certiAreaType2 .phoneCeti p.certify i:before{ content: ''; display: block; margin: 0 auto; background: url(../images/common/icon2020.png) no-repeat -108px -41px; width: 40px; height: 57px; position: relative; top: 12px;}
#certiAreaType2 .phoneCeti>div{ background: #f2f2f2; padding: 15px 10px 20px; text-align: center; color: #80849d;}
#certiAreaType2 .phoneCeti>div p{ font-size: 1.15em}
#certiAreaType2 .phoneCeti>div dl{ display: inline-block; padding: 10px 0 0; width: 100%}
#certiAreaType2 .phoneCeti>div dd a{ background: #14b12e; color: #fff; height: 35px; line-height: 35px; padding: 0 25px; margin-left: -5px; border-radius: 0 3px 3px 0}
#certiAreaType2 .phoneCeti>div dd a:after{ content: '\276F'; display: inline-block; color: #fff; margin-left: 10px; font-size: 0.75em; line-height: 1; position: relative; top: -2px;}
#certiAreaType2 .phoneCeti+.btnArea .button a{ height: 60px; line-height: 60px; padding: 0 50px !important; font-size: 1.1rem;}
#certiAreaType2 .phoneCeti .orangeChk{ background: #fff; border-top: 1px solid #d2d2d2; border-bottom: 1px solid #d2d2d2; padding: 6px 10px 10px; position: relative}
#certiAreaType2 .phoneCeti .orangeChk:after{ content: ''; display: block; width: 100%; height: 3px; background:#e8e8e8; position: absolute; bottom: -4px; left: 0}

/* 2021 11 30 */
.maskPicA.disb_maskPicA>div>div{ padding: 0 !important; overflow: inherit !important; text-align: center; box-sizing: border-box; position: relative}
.maskPicA.disb_maskPicA>div>div:before{ content: ''; display: block; background: url(../images/common/disb_maskPicA.jpg) no-repeat 50% 50%; filter: grayscale(1); opacity: .2; position: absolute; left: 0; top: 0; width: 100%; height: 100%;}
.maskPicA.disb_maskPicA>div>div p{ font-size: 18px; color: #000; padding: 75px 25px 0; font-weight: 300}
.maskPicA.disb_maskPicA>div>div p:before{ content: ''; display: block; background: url(../images/common/disb_deco.png) no-repeat 0 0; width: 144px; height: 144px; margin: 0 auto}
.maskPicA.disb_maskPicA>div>div p strong{ display: block; font-size: 30px; margin: 5px 0 20px; font-weight: 500}

/* 2022 01 24 */
#main2020 .pestSection .forecast .step1 .swiper-slide a.persimmon i{ background-position: 0 -158px;}
#main2020 .pestSection .forecast .step1 .swiper-slide a.tangerine i{ background-position: -30px -158px;}
#main2020 .pestSection .forecast .step1 .swiper-slide a.radish i{ background-position: -60px -158px;}
#main2020 .pestSection .forecast .step1 .swiper-slide a.cabbage i{ background-position: -90px -158px;}
#main2020 .pestSection .forecast .step1 .swiper-slide a.barley i{ background-position: -120px -158px;}
#main2020 .pestSection .forecast .step1 .swiper-slide a.bean i{ background-position: -150px -158px;}
#main2020 .pestSection .forecast .step1 .swiper-slide a.grape i{ background-position: -180px -158px;}
#main2020 .pestSection .forecast .step1 .swiper-slide a.rice i{ background-position: -120px -158px;}
#main2020 .pestSection .forecast .step1{ width: 46% !important}
#main2020 .pestSection .forecast .step2{ display: none}
#main2020 .pestSection .forecast .step3{ width: 53% !important; position: relative}
#main2020 .pestSection .forecast .step3 .calendarS table th{ line-height: 28px; width: 14%}
#main2020 .pestSection .forecast .step3 .calendarS table td{ height: 30px; font-size: 14px;}
#main2020 .pestSection .forecast .step3 .calendarS table td a{ font-size: 14px; line-height: 19px}
#main2020 .pestSection .forecast .step3 .calendarS table td.sign3:after{ position: relative; bottom: -2px}
#main2020 .pestSection .forecast .step3 .btnMonth{ text-align: right; float: right}
#main2020 .pestSection .forecast .step3 .btnMonth ul{ float: right}
#main2020 .pestSection .forecast .step3 .btnMonth ul li{ float: left; width: 43px}
#main2020 .forecast .yearS{ position: absolute;}
#main2020 .forecast .yearS select{ width: 80px; border: 1px solid #ccc; height: 30px; border-radius: 5px}
#main2020 .forecast .yearS .button{ border-radius: 5px; background: #0d4571; color: #fff; line-height: 30px; padding: 0 15px}
.pestSection.sub{ border: 1px solid #ccc;}
.pestSection.sub .forecast>div{ box-sizing: border-box; height: 250px !important;}
.pestSection.sub .forecast .step1 .swiper-button-next{ right: 0 !important}
.pestSection.sub .forecast .step1 .swiper-container{ padding: 0 30px;}
.pestSection.sub .forecast .step1>p{ line-height: 35px; margin-top: 0}
.pestSection.sub .forecast .step3 .calendarS table th{ line-height: 25px !important; width: 14%}
.pestSection.sub .forecast .step3 .calendarS table td{ height: 31px; font-size: 14px !important;}
.pestSection.sub .forecast .step1 .btnGroup li a{ line-height: 37px !important}
.pestSection.sub .forecast .step3 .calendarS{ height: 198px !important}
.pestSection.sub .forecast .step1 .swiper-container{ height: 75px;}

/* 2022 04 22 */
#situationBoard.mapLCont{ margin-top: 10px}
#situationBoard.mapLCont .boardStep2>div{ position: relative}
.mapBtnArea{ background: #0079c0; padding:9px; position: absolute; z-index: 2; left: 0; top: 0; width: 100%; box-sizing: border-box; font-size: 1rem}
.mapBtnArea>div{ display: inline-block}
.mapBtnArea .mapBtn:after{ content: ''; display: inline-block; border-left: 1px dotted #cacbce; height: 20px; margin: 5px 5px 0}
.mapBtnArea .mapBtn .button.small{ background: #e4e4dd; border: 0; line-height: 1; margin: 0 3px 0 0; padding: 0 10px 0 7px; color: #d3efff;}
.mapBtnArea .mapBtn .button.small:before{ content: ''; display: inline-block; background: #85d2ff; border: 4px solid #06527e; width: 15px; height: 15px; border-radius: 50%; box-sizing: border-box; vertical-align: middle; margin: 0 4px 0 0; position: relative; top: -1px}
.mapBtnArea .mapBtn .button.active{ background: #117fc3; color: #fff; border-color: #117fc3;}
.mapBtnArea .mapBtn .button.active:before{ background: #bd2329; border: 4px solid #fff;}
.mapBtnArea .button.small{ height: 28px; line-height: 25px; border-radius: 5px; color: #000; font-size: 0.9rem; font-weight: 400;}
.mapBtnArea>a.button{ border: 0; padding: 0 10px 0 7px;}
.mapBtnArea>a.button:before{ background-position: -169px -17px; width: 21px; height: 21px; top: 3px}
.mapBtnArea .chkArea button{ vertical-align: top; position: relative; color: #fff; background: transparent; padding-left: 20px; line-height: 28px; margin: 0 5px}
.mapBtnArea .chkArea button:before{ content: ''; display: block; position: absolute; left: 0; top: 6px; width: 16px; height: 16px; box-sizing: border-box; background: #d3d3d3; border: 4px solid #fff;}
.mapBtnArea .chkArea button.active:before{ background: #bd2329}
#situationBoard.mapLCont .boardStep2>div{ height: auto}
#situationBoard.mapLCont .boardStep2 .fl{ padding: 47px 5px 5px; box-sizing: border-box; height: 100vh}
#situationBoard.mapLCont .boardStep2 .fl .mapArea{ height: 100%; background: #fff}
#situationBoard.mapLCont .boardStep2 .fr .sch, .boardStep2 .fr>div{ margin-bottom: 10px}
#situationBoard.mapLCont .boardStep2 .legendArea, #situationBoard.mapLCont .boardStep2 .legendArea>strong{ position: absolute; right: 5px; bottom: 5px; z-index: 10; background: rgba(0,0,0,.7);}
#situationBoard.mapLCont .boardStep2 .legendArea{ z-index: 1}
#situationBoard.mapLCont .boardStep2 .legendArea>strong{ position: static; display: block; text-align: center; color: #fff; line-height: 35px;}
#situationBoard.mapLCont .boardStep2 .legendArea>ul{ padding: 5px 25px 10px 20px}
#situationBoard.mapLCont .boardStep2 .legendArea>ul li{ color: #fff; margin: 8px 0}
#situationBoard.mapLCont .boardStep2 .legendArea>ul li i{ display: inline-block; font-size: inherit; margin-right: 10px; color: #00da7b }
#situationBoard.mapLCont .mapInfoB{ display: table; background: #f1f1f1; width: 100%;}
#situationBoard.mapLCont .mapInfoB li{ display: table-cell; height: 50px; font-weight: 600;  line-height: 1.5}
#situationBoard.mapLCont .mapInfoB li span{ display: inline-block; width: 60px; height: 50px;  box-sizing: border-box; padding-top: 15px; background: #fff; border: 1px solid #d1d1d1; font-size: 13px; text-align: center; font-weight: 400;}
#situationBoard.mapLCont .mapInfoB li strong{ display: inline-block; padding: 15px 0 0 10px; }
#situationBoard.mapLCont .mapInfoB li.caution span{ border-color: #009b1d; color: #009b1d}
#situationBoard.mapLCont .mapInfoB li.warning span{ border-color: #9b2800; color: #9b2800}
#situationBoard.mapLCont .mapThem{ position: absolute; top: 75px; width: 80%; left: 10%; background: rgba(0,0,0,.5); text-align: center; border-radius: 8px; box-sizing: border-box; padding: 10px; font-size: 1.1rem; font-weight: 500; color: #fff; z-index: 1}

.pieGrapth{ width: 70px; height: 70px; border-radius: 50%; border: 8px solid transparent; background-origin: border-box; background-clip: content-box, border-box; text-align: center; position: relative;}
.pieGrapth.pear0{ background-image: linear-gradient(#fff, #fff), linear-gradient(to bottom, #bd2329 100%, #fdc12e 10%);}
.pieGrapth.pear10{ background-image: linear-gradient(#fff, #fff), linear-gradient(to bottom, #bd2329 90%, #fdc12e 10%);}
.pieGrapth.pear20{ background-image: linear-gradient(#fff, #fff), linear-gradient(to bottom, #bd2329 80%, #fdc12e 10%);}
.pieGrapth.pear30{ background-image: linear-gradient(#fff, #fff), linear-gradient(to bottom, #bd2329 70%, #fdc12e 10%);}
.pieGrapth.pear40{ background-image: linear-gradient(#fff, #fff), linear-gradient(to bottom, #bd2329 60%, #fdc12e 10%);}
.pieGrapth.pear50{ background-image: linear-gradient(#fff, #fff), linear-gradient(to bottom, #bd2329 50%, #fdc12e 10%);}
.pieGrapth.pear60{ background-image: linear-gradient(#fff, #fff), linear-gradient(to bottom, #bd2329 40%, #fdc12e 10%);}
.pieGrapth.pear70{ background-image: linear-gradient(#fff, #fff), linear-gradient(to bottom, #bd2329 30%, #fdc12e 10%);}
.pieGrapth.pear80{ background-image: linear-gradient(#fff, #fff), linear-gradient(to bottom, #bd2329 20%, #fdc12e 10%);}
.pieGrapth.pear90{ background-image: linear-gradient(#fff, #fff), linear-gradient(to bottom, #bd2329 10%, #fdc12e 10%);}
.pieGrapth.pear100{ background-image: linear-gradient(#fff, #fff), linear-gradient(to bottom, #bd2329 0%, #fdc12e 0%);}
.pieGrapth p{ padding-top: 5px; font-size: 13px; font-weight: 500; line-height: 1.3; width: 80%; margin: 0 auto 3px; border-bottom: 1px solid #686868}
.pieGrapth div{ font-size: 14px; text-align: center; line-height: 1; margin-top: 5px; letter-spacing: -0.055em}
.pieGrapth div strong{ padding: 0 0 0 5px}
.pieGrapth div span{ display: inline-block; text-align: right; padding: 3px 10px 0 0}
.pieGrapth.pieGrapth1{ border: 8px solid  #00a85f}
.pieGrapth.blu0{ background-image: linear-gradient(#fff, #fff), linear-gradient(to bottom, #023d67 100%, #15b1d7 10%);}
.pieGrapth.blu10{ background-image: linear-gradient(#fff, #fff), linear-gradient(to bottom, #023d67 90%, #15b1d7 10%);}
.pieGrapth.blu20{ background-image: linear-gradient(#fff, #fff), linear-gradient(to bottom, #023d67 80%, #15b1d7 10%);}
.pieGrapth.blu30{ background-image: linear-gradient(#fff, #fff), linear-gradient(to bottom, #023d67 70%, #15b1d7 10%);}
.pieGrapth.blu40{ background-image: linear-gradient(#fff, #fff), linear-gradient(to bottom, #023d67 60%, #15b1d7 10%);}
.pieGrapth.blu50{ background-image: linear-gradient(#fff, #fff), linear-gradient(to bottom, #023d67 50%, #15b1d7 10%);}
.pieGrapth.blu60{ background-image: linear-gradient(#fff, #fff), linear-gradient(to bottom, #023d67 40%, #15b1d7 10%);}
.pieGrapth.blu70{ background-image: linear-gradient(#fff, #fff), linear-gradient(to bottom, #023d67 30%, #15b1d7 10%);}
.pieGrapth.blu80{ background-image: linear-gradient(#fff, #fff), linear-gradient(to bottom, #023d67 20%, #15b1d7 10%);}
.pieGrapth.blu90{ background-image: linear-gradient(#fff, #fff), linear-gradient(to bottom, #023d67 10%, #15b1d7 10%);}
.pieGrapth.blu100{ background-image: linear-gradient(#fff, #fff), linear-gradient(to bottom, #023d67 0%, #15b1d7 0%);}


/* 2022 06 14 */
.mb40{ margin-bottom: 40px !important}
.mb50{ margin-bottom: 50px !important}
#counsel2022 * { font-size:16px; line-height:140%; letter-spacing:-0.085em; box-sizing:border-box}
#counsel2022 h2 { margin-bottom:12px; font-size:22px; line-height:1}
#counsel2022 h2:after { content:''; display:block; width:100%; height:5px; margin-top:-4px; background:#febc32}
#counsel2022 h3 { position:relative; top:auto !important; left:auto !important; transform:none !important; height:auto !important; margin-bottom:15px; line-height:1 !important; font-size:20px !important; color:#686868; font-family:'Noto Sans KR' !important; font-weight:500 !important; letter-spacing:-0.085em !important;}
#counsel2022 h3 strong { margin-left:10px; font-size:20px; line-height:1; font-weight:500;}
#counsel2022 .boxStyle1 { border:1px solid #d7d7d7; box-shadow: 0 3px 0 rgb(229,229,229);}
#counsel2022 .fileDown:before {  content:''; display: inline-block; width:19px; height:20px; margin:0px 10px -4px 0; background:url(../images/common/icon2022.png) no-repeat -248px -160px  }
#counsel2022 .refer { font-size:15px; color:#686868; font-weight: 300;}
#counsel2022 .supText { position:absolute; top:7px; right:0}
#counsel2022 .inputData { height:40px; line-height:40px; border:0 !important; background:#ececec}
#counsel2022 .inputCal { display:inline-block; padding-right:37px; background:#ececec url(../images/icon/calendar2.gif) no-repeat right 7px top 50%}
#counsel2022 textarea { width:100%; padding:5px; resize:none}
#counsel2022 select { height: 40px !important;}
#counsel2022 sup { color:#ff0000; vertical-align:top}
#counsel2022 .chkBoxArea label { line-height:35px}
#counsel2022 .btnWrap { margin:25px 0}
#counsel2022 .btn { display:inline-block; height:40px; padding:0 15px !important; border:0; border-radius:0; text-align:center; color:#fff !important; line-height:40px; background:#0079c0}
#counsel2022 .btnL { height:50px; padding:0 40px !important; line-height:50px}
#counsel2022 .btnGray { background:#374548}
#counsel2022 .btnBlue { background:#0c4ca3}
#counsel2022 .btnYellow { color:#374548 !important; background:#febc32}
#counsel2022 .btnSch:before { content:''; display:inline-block; width:16px; height:16px; margin-right:5px; margin-bottom:-1px; background:url(../images/common/icon.png) no-repeat -185px -259px }
#counsel2022 .btnApply:before { content:''; display:inline-block; width:23px; height:22px; margin-right:3px; margin-bottom:-4px; background:url(../images/common/icon2022.png) no-repeat -123px -162px }

#counsel2022 .table { width:100%; border-top:1px solid #d7d7d7; border-left:1px solid #d7d7d7;}
#counsel2022 .table th,
#counsel2022 .table td { padding:8px 15px; border-right:1px solid #d7d7d7; border-bottom:1px solid #d7d7d7; }
#counsel2022 .table th { background:#f6f6f6}
#counsel2022 .table.topLine{ border-top-color:#374548}
#counsel2022 table td em { line-height: 40px; display: inline-block; padding:0 7px; vertical-align:middle}



#counsel2022 .counselInfo { position:relative; padding:22px 55px 13px 115px; border-bottom:1px solid #d3d3d3; box-shadow: 0 3px 0 rgb(235,235,235); background:#ebebeb}
#counsel2022 .counselInfo:before { content:''; display:block; position:absolute; top:50%; left:17px; width:77px; height:69px; margin-top:-33px; background:url(../images/common/icon2022.png) no-repeat 0 -116px}
#counsel2022 .counselInfo dt { margin-bottom:7px; font-size:22px; font-weight: 500;}
#counsel2022 .counselApply { margin-top:11px;}
#counsel2022 .counselApply h3 { display:block; margin-bottom:0; text-align:center; color:#fff; line-height:60px !important;}
#counsel2022 .counselApply .applyStep2 h3{ background:#374548}
#counsel2022 .counselApply ul { padding:23px 30px 30px; border:1px solid #d7d7d7; border-top:0}
#counsel2022 .counselApply li i { display:inline-block; width:110px; height:110px; padding-top:26px; border:1px solid #9d9d9d; border-radius:50%; }
#counsel2022 .counselApply li strong { display:block; font-size:18px; color:#121212; font-weight:500;}
#counsel2022 .counselApply li span { color:#6e6e6e; word-break: keep-all;}
#counsel2022 .counselApply li a { display:block; width:70px; height:35px; margin:12px auto 0; border:1px solid #d7d7d7; font-size:15px; line-height:33px; background:#f7f7f7}
#counsel2022 .counselApply .applyStep1 h3{ background:#00a9dd}
#counsel2022 .counselApply .applyStep1 ul:after { content:''; clear:both; display: block;}
#counsel2022 .counselApply .applyStep1 li { float:left; width:33.33%; text-align: center;}
#counsel2022 .counselApply .applyStep1 li i:after { content:''; display:inline-block; height:55px; background:url(../images/common/icon2022.png) no-repeat}
#counsel2022 .counselApply .applyStep1 li:first-child i:after {  width:57px; background-position:0 0}
#counsel2022 .counselApply .applyStep1 li:nth-child(2) i:after {  width:56px; background-position:-58px 0}
#counsel2022 .counselApply .applyStep1 li:last-child i:after {  width:60px; background-position:-115px 0}
#counsel2022 .counselApply .applyStep1 li strong { margin-top:5px; }
#counsel2022 .counselApply .applyStep2 li:after { content:''; clear:both; display: block;}
#counsel2022 .counselApply .applyStep2 li + li { margin-top:12px}
#counsel2022 .counselApply .applyStep2 li i { float:left; margin-right:20px; text-align:center}
#counsel2022 .counselApply .applyStep2 li strong { margin-bottom:5px; padding-top:15px}
#counsel2022 .counselApply .applyStep2 li i:after { content:''; display:inline-block; height:55px; background:url(../images/common/icon2022.png) no-repeat}
#counsel2022 .counselApply .applyStep2 li:first-child i:after {  width:56px; background-position:-176px 0}
#counsel2022 .counselApply .applyStep2 li:last-child i:after {  width:37px; background-position:-232px 0}
#counsel2022 .iconBook { text-align:center}
#counsel2022 .iconBook a { display:inline-block; margin:0 30px}
#counsel2022 .iconBook i { display:block; width:110px; height:110px; margin-bottom:6px; padding-top:25px; border:1px solid #9d9d9d; border-radius:50%; }
#counsel2022 .iconBook i:after { content:''; display:inline-block; height:57px; background:url(../images/common/icon2022.png) no-repeat}
#counsel2022 .iconBook .mn1 i:after {  width:45px; background-position:0 -57px}
#counsel2022 .iconBook .mn2 i:after {  width:43px; background-position:-47px -57px}
#counsel2022 .iconBook .mn3 i:after {  width:58px; background-position:-91px -57px}
#counsel2022 .iconBook .mn4 i:after {  width:41px; background-position:-150px -57px}
#counsel2022 .iconBook .mn5 i:after {  width:41px; background-position:-192px -57px}
#counsel2022 .schBox2022 { margin-bottom:20px; padding:23px 30px 23px 20px; }
#counsel2022 .schBox2022 span { margin:0 10px 0 20px}
#counsel2022 .schBox2022 label { display:inline-block; min-width:73px; margin-right:10px; line-height:40px;}
#counsel2022 .schBox2022 label:before { content:''; display:inline-block; width:5px; height:5px; margin-right:10px; margin-top:-2px; vertical-align:middle; background:#374548 }
#counsel2022 .schBox2022 .btn { min-width:80px;}
#counsel2022 .schBox2022.padS { padding:12px 20px 12px 0}
#counsel2022 .weekfarmInfo:after { content:''; clear:both; display: block;}
#counsel2022 .weekfarmInfo li { position:relative; float:left; width:calc(33.33% - 14px); margin:0 0 10px 21px; padding:16px 10px 15px; border:1px solid #d7d7d7; letter-spacing:0; color:#374548; font-size:15px}
#counsel2022 .weekfarmInfo li:nth-child(3n+1) { margin-left:0}
#counsel2022 .weekfarmInfo li strong { display:block; font-weight: 500; font-size:16px; }
#counsel2022 .weekfarmInfo li a { position:absolute; top:0; right:0; width:62px; height:100%; overflow:hidden; text-indent:-999px; background:#374548 url(../images/common/download.png) no-repeat 50% }
#counsel2022 .inform>ul>li { width:calc(33.33% - 6px); margin-left:9px}
#counsel2022 .inform>ul>li:after { display: none;}
#counsel2022 .inform>ul>li:first-child { margin-left:0}
#counsel2022 .inform>ul>li p { margin:0; line-height: 50px; border-radius: 0; font-size:18px}
#counsel2022 .inform>ul>li p strong { top:auto; margin-left:0; color:inherit; font-size:18px; line-height:140%; background:none}
#counsel2022 .inform ul ul { height:149px; margin-top:0; padding:10px 0; border:1px solid #d7d7d7; border-top:0}
#counsel2022 .inform li li:nth-child(even) { background:none}
#counsel2022 .inform li li a { line-height: inherit;}
#counsel2022 .inform li li a:before { top:45%; background:#374548 !important}

#counsel2022 .imgList:after { content:''; clear:both; display:block}
#counsel2022 .imgList li { position:relative; float: left; width:23.5%; margin-left:2%; margin-bottom:2%; padding:3px}
#counsel2022 .imgList li:nth-child(4n+1) { margin-left:0}
#counsel2022 .category  { position:absolute; top:0; left:0; width:70px; height:75px; text-align:center; color:#fff; font-size:15px; background:#374548}
#counsel2022 .category i { display:block; height:42px; margin:6px auto 0; background:url(../images/common/icon2022.png) no-repeat}
#counsel2022 .category.cate1 i { width:38px; background-position: -79px -116px;}
#counsel2022 .category.cate2 i { width:38px; background-position: -120px -116px;}
#counsel2022 .category.cate3 i { width:28px; background-position: -160px -116px;}
#counsel2022 .category.cate4 i { width:44px; background-position: -190px -116px;}
#counsel2022 .category.cate5 i { width:30px; background-position: -236px -116px;}
#counsel2022 .imgList li a { display:block; color:#333} 
#counsel2022 .imgList li a img { width:100%} 
#counsel2022 .imgList .contGroup { padding:15px; border:1px solid #d7d7d7; border-top:0}
#counsel2022 .imgList .contGroup .state { margin-left:5px; color:#ff0000; font-size:15px}
#counsel2022 .imgList .contGroup .date { float:right; color:#686868}
#counsel2022 .imgList .contGroup .cont { display:block; padding:10px 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}

#counsel2022 .myList .total { margin-bottom:10px; text-align:center; font-size:20px; font-weight: 300; color:#374548}
#counsel2022 .myList .total strong { font-size:20px}
#counsel2022 .myList ul { border-top:1px solid #374548; border-right:1px solid #d7d7d7}
#counsel2022 .myList ul>li { position:relative; padding:14px 30px 14px 85px; overflow: hidden; border-bottom:1px solid #d7d7d7; background:#f6f6f6}
#counsel2022 .myList .category { height:100%;}
#counsel2022 .myList .contGroup span { position:relative; margin-left:10px; padding-left:11px; }
#counsel2022 .myList .contGroup span:before { content:''; position: absolute; top:8px; left:0; width:1px; height:10px; background:#374548}
#counsel2022 .myList .contGroup .addr { margin-left:0; padding-left:0;}
#counsel2022 .myList .contGroup .addr:before,
#counsel2022 .myList .contGroup .state:before { display:none}
#counsel2022 .myList .contGroup .state { padding-left:0; color:#0079c0; font-weight: 500;}
#counsel2022 .myList .contGroup .cont { display:block; margin-top:5px;}
#counsel2022 .myList .process { float: right; margin-top:10px}
#counsel2022 .myList .process li { float: left;}
#counsel2022 .myList .process li + li:before { content:''; display:inline-block; width:15px; height:14px; margin:0 20px; background:url(../images/common/icon2022.png) no-repeat -122px -190px}
#counsel2022 .myList .process li i { position:relative; display:inline-block; width:46px; height:46px; margin-right:5px; border-radius:50%; vertical-align:middle; text-align:center; background:#ddd;}
#counsel2022 .myList .process li i.step3 { background:#e6e6e6}
#counsel2022 .myList .process li i.step4 { margin-left:-14px}
#counsel2022 .myList .process li i:after { content:''; display:inline-block; height:26px; margin-top:9px; background:url(../images/common/icon2022.png) no-repeat}
#counsel2022 .myList .process li i.step1:after { width:21px; background-position: -164px -160px;}
#counsel2022 .myList .process li i.step2:after { width:18px; background-position: -187px -160px;}
#counsel2022 .myList .process li i.step3:after { width:23px; background-position: -207px -160px;}
#counsel2022 .myList .process li i.step4:after { width:14px; background-position: -232px -160px;}
#counsel2022 .myList .process li i.active { background:#3086c9;}
#counsel2022 .myList .process li i.active.step3 { z-index:2}
#counsel2022 .myList .process li i.active.step4 { background:#1d649b; z-index:3}
#counsel2022 .myList .process li i.active.step1:after { background-position: -80px -160px;}
#counsel2022 .myList .process li i.active.step2:after { background-position: -103px -160px;}
#counsel2022 .myList .process li i.active.step3:after { background-position: -123px -160px;}
#counsel2022 .myList .process li i.active.step4:after { background-position: -148px -160px;}


#counsel2022 .tab_btn { display: flex; margin-bottom:20px}
#counsel2022 .tab_btn li { flex:1; text-align:center}
#counsel2022 .tab_btn li a { display:block; margin-left:-1px; border:1px solid #cecece; border-bottom-color:#00a9dd; color:#374548; font-size:18px; line-height:48px}
#counsel2022 .tab_btn li.active a { color:#fff; font-weight:500; border-color:#00a9dd; background:#00a9dd}
#counsel2022 .tab_btn li a .noti { display:inline-block; width:12px; height:17px; margin:0 0 -1px 7px; overflow: hidden; text-indent:-999px ; background:url(../images/common/icon2022.png) no-repeat -94px -207px}
#counsel2022 .tab_con .tab_content { display:none}
#counsel2022 #tabArea { position:relative; padding-top:52px}
#counsel2022 #tabArea:after { content:''; display: block; position:absolute; top:41px; left:0; width:100%; height:1px; background:#374548}
#counsel2022 #tabArea .tabBtn { position:absolute; top:0; left:0; width:218px; }
#counsel2022 #tabArea .tabArea02 .tabBtn { left:218px;}
#counsel2022 #tabArea .tabBtn a { display:block; border:1px solid #cecece; text-align:center; line-height:40px; color:#374548; background:#f6f6f6}
#counsel2022 #tabArea .active .tabBtn a { color:#fff; border-color:#374548; background:#374548 }
#counsel2022 #tabArea .tabCont { display:none; }
#counsel2022 #tabArea .active .tabCont { display:block}

#counsel2022 .counselView .viewTitle { position: relative; padding:22px 30px 23px 90px}
#counsel2022 .counselView .viewTitle .title,
#counsel2022 .counselView .viewTitle .title strong { display:inline-block; line-height:30px; vertical-align:top; font-size:18px;}
#counsel2022 .counselView .viewTitle .state { position:relative; display:inline-block; margin-left:20px; padding:0 10px; color:#fff; font-size:15px; font-weight: 300; line-height:30px; background:#ff6060;}
#counsel2022 .counselView .viewTitle .state:before { content:''; position:absolute; top:0; right:-15px; width:0; height:0; border-top:15px solid #ff6060; border-right:15px solid transparent }
#counsel2022 .counselView .viewTitle .state:after { content:''; position:absolute; bottom:0; right:-15px; width:0; height:0; border-bottom:15px solid #ff6060; border-right:15px solid transparent }
#counsel2022 .counselView .viewTitle .addr { float:right; line-height:30px}
#counsel2022 .counselView .viewTitle .addr:before { content:''; display: inline-block; width:12px; height:16px; margin:0 5px -2px 0; background: url(../images/common/icon2022.png) no-repeat -108px -207px; }
#counsel2022 .counselView .viewCont { padding:20px 30px;}
#counsel2022 .counselView .viewPhoto { position:relative}
#counsel2022 .counselView .viewPhoto h3 { display:block; padding:6px 10px !important; font-size:20px; background:#f0f0f0}
#counsel2022 .counselView .viewPhoto h3 span { position:relative; top:auto; left:auto; color:#000; font-size:20px; visibility:initial}
#counsel2022 .counselView .viewPhoto .thumb { position:relative}
#counsel2022 .counselView .viewPhoto .thumb img { width:100%}
#counsel2022 .counselView .viewPhoto .thumb .btnDownload { position: absolute; right:0; bottom:0; width:50px; height:40px; overflow:hidden; text-indent: -999px; background:#374548 url(../images/common/download.png) no-repeat 50%;}
#counsel2022 .counselView .viewPhoto li span { display:block; margin-top:15px; text-align: center;}
#counsel2022 .counselView .viewPhoto .swiper-button-next, 
#counsel2022 .counselView .viewPhoto .swiper-button-prev { top:0; left:auto; width:55px; height:40px; margin-top:0; overflow: hidden; border:1px solid #d7d7d7; text-indent:-999px; background-color:#fff }
#counsel2022 .counselView .viewPhoto .swiper-button-next { right:0; }
#counsel2022 .counselView .viewPhoto .swiper-button-prev { right:54px;}
#counsel2022 .counselView .viewPhoto .swiper-button-next:after, 
#counsel2022 .counselView .viewPhoto .swiper-button-prev:after { width:10px; height:17px; background:url(../images/common/icon2022.png) no-repeat }
#counsel2022 .counselView .viewPhoto .swiper-button-next:after { background-position:-151px -189px ;} 
#counsel2022 .counselView .viewPhoto .swiper-button-prev:after { background-position:-139px -189px ;}
#counsel2022 .counselView .viewPhoto .swiper-button-next.swiper-button-disabled, 
#counsel2022 .counselView .viewPhoto .swiper-button-prev.swiper-button-disabled { opacity: 1; cursor: pointer;}
#counsel2022 .counselView .wrInfo { display: inline-block; margin-bottom:7px}
#counsel2022 .counselView .wrInfo span { padding:0 20px 0 15px; font-size:20px}
#counsel2022 .counselView .wrInfo strong { font-size:20px; color:#000; font-weight: 500;}
#counsel2022 .counselView .starRating { margin-top:5px; padding:5px 30px 0; text-align:center;}
#counsel2022 .counselView .starRating dt { border-bottom:1px solid #d7d7d7; font-size:20px; font-weight:500; line-height:45px;}
#counsel2022 .counselView .starRating .itemRating { display:inline-block; width:44px; height:42px; margin:20px 15px; background:url(../images/common/icon2022.png) no-repeat 0 -188px;}
#counsel2022 .counselView .starRating .itemRating.outline { cursor:pointer; background-position:-46px -188px;}
#counsel2022 .counselView .cropSch>div { border:1px solid #d7d7d7}
#counsel2022 .counselView .cropSch h4 { margin:0; padding:0; border-bottom:1px solid #d7d7d7; color:#686868; line-height: 28px; text-align:center; background:#ececec }
#counsel2022 .counselView .orderList dl { padding:7px 15px}
#counsel2022 .counselView .orderList dl:after { content:''; clear:both; display: block;}
#counsel2022 .counselView .orderList dt,
#counsel2022 .counselView .orderList dd { float:left; color:#686868; line-height: 21px;}
#counsel2022 .counselView .orderList dt { width:20%; font-weight: 500; }
#counsel2022 .counselView .orderList dd { width:80%; font-weight: 300;}
#counsel2022 .counselView .orderList dt span { display:inline-block; width:21px; height:21px; margin-right:12px; padding:2px 0; border:1px solid #cecece; border-radius: 2px; vertical-align: top; text-align:center}
#counsel2022 .counselView .orderList dt span a { display:block; width:9px; height:6px; margin:1px auto; overflow:hidden; text-indent: -999px; background:url(../images/common/icon2022.png) no-repeat }
#counsel2022 .counselView .orderList dt span a.btnUp { background-position: -163px -190px;}
#counsel2022 .counselView .orderList dt span a.btnDown { background-position: -163px -199px;}

#counsel2022 .counselWrite .boxStyle1 { position: relative}
#counsel2022 .counselWrite .boxStyle1 .step { position:absolute; top:-43px; right:10px; color:#e2e2e2; font-size:45px; font-weight: 900; font-style: italic; line-height: 1;}
#counsel2022 .counselWrite table { width:100%}
#counsel2022 .counselWrite table th { width:145px; padding:6px 12px; line-height:40px; text-align:left; vertical-align:top}
#counsel2022 .counselWrite table th:before { content:''; display: inline-block; width:5px; height:5px; margin:0 8px 4px 0; background:#374548}
#counsel2022 .counselWrite table td { padding:6px 0}
#counsel2022 .counselWrite table td .inputTel { border:1px solid #ccc !important; background:#fff;}
#counsel2022 .counselWrite .fileUpload { padding:6px 30px}
#counsel2022 .counselWrite .fileUpload .thumbList { position:relative; border-top:1px solid #d7d7d7; padding:10px 0;}
#counsel2022 .counselWrite .fileUpload .thumbList:after { content:''; clear:both; display:block;}
#counsel2022 .counselWrite .fileUpload li { float:left; width:calc(20% - 8px); max-width:191px; height:125px; background:#ececec}
#counsel2022 .counselWrite .fileUpload li + li { margin-left:10px; }
#counsel2022 .counselWrite .fileUpload li a { position:relative; display:block; height:100%; }
#counsel2022 .counselWrite .fileUpload li a img { width:100%; height:100%}
#counsel2022 .counselWrite .fileUpload li a button { display:none; position:absolute; top:50%; left:50%; width:80px; height:40px; border:1px solid #cecece; color:#374548; text-align:center; transform: translate(-50%, -50%); background:#fff; z-index:2}
#counsel2022 .counselWrite .fileUpload li a:hover:after { content:''; display: block; position:absolute; top:0; left:0; width:100%; height:100%; opacity: .6; background:#000}
#counsel2022 .counselWrite .fileUpload li a:hover button { display:block;}
#counsel2022 .counselWrite .fileUpload .thumbList .btn { position:absolute; top:10px; right:0}
#counsel2022 .counselWrite .cropStep1 table th { width:125px; padding:14px 0 14px 42px}
#counsel2022 .counselWrite .cropStep1 table td { padding:14px 32px 14px 0}
#counsel2022 .counselWrite .cropStep1 table .cropChk { padding:7px 42px; border-top:1px solid #d7d7d7; background:#f2f2f2}
#counsel2022 .counselWrite .cropStep1 table .cropChk li { float:left; width:calc(20% - 8px); margin:0 0 5px 10px}
#counsel2022 .counselWrite .cropStep1 table .cropChk li:nth-child(5n+1) { margin-left:0}
#counsel2022 .counselWrite .cropStep1 table .cropChk input { position:absolute; width:0; height:0; overflow: hidden;}
#counsel2022 .counselWrite .cropStep1 table .cropChk label { position:relative; display:block; padding:0 27px 0 12px; line-height: 35px; overflow:hidden; text-overflow: ellipsis; white-space: nowrap; color:#686868; border:1px solid #d7d7d7; background:#fff}
#counsel2022 .counselWrite .cropStep1 table .cropChk label:before { content:''; display: block; position:absolute; top:0; right:0; width:27px; height:100%; background:#f2f2f2}
#counsel2022 .counselWrite .cropStep1 table .cropChk label:after { content:''; display: block; position:absolute; top:10px; right:7px; width:12px; height:13px; background:url(../images/common/icon2022.png) no-repeat -108px -190px}
#counsel2022 .counselWrite .cropStep1 table .cropChk input[type='checkbox']:checked+label { border-color:#00a9dd; color:#fff; background:#00a9dd}
#counsel2022 .counselWrite .cropStep1 table .cropChk input[type='checkbox']:checked+label:before { background:#00a9dd}
#counsel2022 .counselWrite .cropStep1 table .cropChk input[type='checkbox']:checked+label:after { background-position-x: -94px;}
#counsel2022 .counselWrite .cropStep2 { padding:12px 30px}
#counsel2022 .counselWrite .cropStep2 table th { padding:0 12px}
#counsel2022 .counselWrite .cropStep2 table td { padding:0; vertical-align: top;}
#counsel2022 .counselWrite .cropStep3 { padding:0 30px 20px 30px}
#counsel2022 .counselWrite .cropStep3 ul:after { content:''; clear:both; display:block}
#counsel2022 .counselWrite .cropStep3 li { float:left; width:calc(70% - 20px)}
#counsel2022 .counselWrite .cropStep3 li:first-child { width:30%; margin:20px 20px 0 0}
#counsel2022 .counselWrite .cropStep3 table { margin-bottom:15px; border-bottom:1px solid #d7d7d7}
#counsel2022 .counselWrite .cropStep3 table th { width:112px; padding:12px 5px}
#counsel2022 .counselWrite .cropStep3 table td { padding:12px 0}
#counsel2022 .counselWrite .cropStep4 { padding:6px 30px}
#counsel2022 .counselWrite .cropStep4 td.relative .btn { position:absolute; top:17px; right:11px}

#counsel2022 .fileInput label { position:relative; display: inline-block; cursor: pointer; overflow: hidden; width: 100px; height: 40px; margin-left:-3px; border:1px solid #cecece; color:#374548; text-align:center; line-height: 38px;}
#counsel2022 .fileInput label input { position:absolute; overflow: hidden; width: 0; height: 0;}
#counsel2022 .fileInput input[type=text] { display: inline-block; width:calc(100% - 100px); height:40px; padding:0; border:0 !important; border-radius:0; line-height: 40px; background:#ececec}

.layerPop2022 { position:fixed; top:0; left:0; width:100%; height:100vh; background:rgba(0, 0, 0, 0.3)}
.layerPop2022 .popupWrap { position:absolute; top:50%; left:50%; width:910px; border:0; transform: translate(-50%, -50%); background:#fff }
.layerPop2022 .popupWrap .layerTitle { padding:0 20px; line-height:55px !important; color:#fff; font-size:22px !important; background:#374548}
.layerPop2022 .popupWrap .layerCont { padding:20px}
.layerPop2022 #popupTab { position:relative; padding-top:40px}
.layerPop2022 #popupTab:after { content:''; display: block; position:absolute; top:39px; left:0; width:100%; height:1px; background:#00a9dd}
.layerPop2022 #popupTab .tabBtn { position:absolute; top:0; left:50%; width:168px; }
.layerPop2022 #popupTab .tabArea01 .tabBtn { margin-left:-168px;}
.layerPop2022 #popupTab .tabBtn a { display:block; border:1px solid #cecece; text-align:center; line-height:38px; color:#374548; background:#fff}
.layerPop2022 #popupTab .active .tabBtn a { color:#fff; border-color:#00a9dd; background:#00a9dd }
.layerPop2022 #popupTab .tabCont { display:none; }
.layerPop2022 #popupTab .active .tabCont { display:block}
.layerPop2022 #popupTab .counselWrite { padding:6px 20px 6px 10px; border:1px solid #cecece; border-top:0 }
.layerPop2022 #popupTab .sampleList { padding:14px 5px 14px 15px}
.layerPop2022 #popupTab .sampleList:after { content:''; clear:both; display:block;}
.layerPop2022 #popupTab .sampleList li { float:left; width:calc(33.33% - 8px); margin-left:12px}
.layerPop2022 #popupTab .sampleList li:first-child { margin-left:0}
.layerPop2022 #popupTab .sampleList li .thumb { width:100%; height:177px; background:#374548}
.layerPop2022 #popupTab .sampleList li img { width:100%; height:100%}
.layerPop2022 #popupTab .sampleList li span { display:block; margin-top:10px; word-break: keep-all;}
.layerPop2022 .popupWrap .layerClose { position:absolute; top:0; right:10px; width:55px; height:55px; overflow:hidden; text-indent:-999px; background:none }
.layerPop2022 .popupWrap .layerClose:after { content:''; display:block; position:absolute; top:50%; left:50%; transform: translate(-50%, -50%); width:23px; height:23px; background:url(../images/common/icon2022.png) no-repeat -236px -62px}




@media all and (min-width:1713px) {
	#counsel2022 .counselApply .applyStep1 li { padding:0 25px;}
	#counsel2022 .myList .contGroup { float:left; width:calc(100% - 500px)}
	#counsel2022 .myList .process { margin-top:0}
}

/* 2022 08 29 */
#counsel2022 .category{ left: 3px; top: 3px}
#counsel2022 .inputData.bgW{ background: #fff; border: 1px solid #ccc !important;}
#counsel2022 .counselView .viewPhoto .thumb .btnPreview{ right: 52px; background: #374548 url(../images/common/preview.png) no-repeat 50%}
#layer_preview{ z-index: 11003}
#layer_preview .popupWrap{ width: auto; min-width: 400px; max-width: 1300px}
#layer_preview .layerCont{ text-align: center}
#counsel2022 .helpBtnArea{ display: inline-block}
#counsel2022 .button.help{ background: none; font-size: 0; vertical-align: middle; width: 23px; height: 23px; text-align: center; vertical-align: top}
#counsel2022 .button.help:before{ content:''; display: inline-block; background: url(../images/common/icon2022.png) no-repeat -125px -210px; width: 17px; height: 17px;}
#counsel2022 .helpCont{ display: none; position: absolute; padding: 3px 5px ; background: #fff; border:1px solid #484848; border-radius: 3px; font-size: 0.8rem; color: #686868; font-weight: 300; z-index: 99; margin-top: 0; width: 380px; margin-left: -130px}
#counsel2022 .helpCont:before{ content: ''; display: block; width: 8px; height: 8px; background: #f2f4f6; border: 1px solid #484848; border-right: 0; border-bottom: 0; position: absolute; top: -5px; transform: rotate(45deg); left: 40%}
#counsel2022 .chkBoxArea span.mr0{ margin-right: 0}
#counsel2022 .boxStyle1 .helpBtnArea{ vertical-align: middle !important}

/* 병해충 예측지도 */
.forecastMap_tp{ background: #489fe4; padding: 0 20px; margin-top: 10px; position: relative}
.forecastMap_tp .inToday{ text-align: center; color: #fff; font-size: 20px; line-height: 50px; border-bottom: 1px solid rgba(255,255,255,.5); }
.forecastMap_tp>ul{ padding: 10px 0; text-align: center;}
.forecastMap_tp>ul>li{ display: inline-block}
.forecastMap_tp .cropBox li a{ display: block; background: transparent; border-radius: 5px; width: 85px; height: 90px; padding-top: 10px; color: #fff}
.forecastMap_tp .cropBox li.active a{ background: #fff; color: #323232; font-weight: 600}
.forecastMap_tp .cropBox li a i{ display: block; margin: 0 auto 5px; width: 60px; height: 54px; box-sizing: border-box; background: url(../images/common/iconCrop.png) no-repeat;}
.forecastMap_tp .cropBox li.persimmon a i{ background-position: -10px -182px}
.forecastMap_tp .cropBox li.persimmon.active a i{ background-position: -10px -12px}
.forecastMap_tp .cropBox li.tangerine a i{ background-position: -89px -182px}
.forecastMap_tp .cropBox li.tangerine.active a i{ background-position: -89px -12px}
.forecastMap_tp .cropBox li.chili a i{ background-position: -168px -182px}
.forecastMap_tp .cropBox li.chili.active a i{ background-position: -168px -12px}
.forecastMap_tp .cropBox li.apple a i{ background-position: -248px -182px}
.forecastMap_tp .cropBox li.apple.active a i{ background-position: -248px -12px}
.forecastMap_tp .cropBox li.radish a i{ background-position: -331px -182px}
.forecastMap_tp .cropBox li.radish.active a i{ background-position: -331px -12px}
.forecastMap_tp .cropBox li.cabbage a i{ background-position: -440px -182px}
.forecastMap_tp .cropBox li.cabbage.active a i{ background-position: -440px -12px}
.forecastMap_tp .cropBox li.barley a i{ background-position: -490px -182px}
.forecastMap_tp .cropBox li.barley.active a i{ background-position: -490px -12px}
.forecastMap_tp .cropBox li.peach a i{ background-position: -570px -182px}
.forecastMap_tp .cropBox li.peach.active a i{ background-position: -570px -12px}
.forecastMap_tp .cropBox li.garlic a i{ background-position: -651px -182px}
.forecastMap_tp .cropBox li.garlic.active a i{ background-position: -651px -12px}
.forecastMap_tp .cropBox li.onion a i{ background-position: -729px -182px}
.forecastMap_tp .cropBox li.onion.active a i{ background-position: -729px -12px}
.forecastMap_tp .cropBox li.bean a i{ background-position: -808px -182px}
.forecastMap_tp .cropBox li.bean.active a i{ background-position: -808px -12px}
.forecastMap_tp .cropBox li.grape a i{ background-position: -888px -182px}
.forecastMap_tp .cropBox li.grape.active a i{ background-position: -888px -12px}
.forecastMap_tp .cropBox li.pear a i{ background-position: -968px -182px}
.forecastMap_tp .cropBox li.pear.active a i{ background-position: -968px -12px}
.forecastMap_tp .cropBox li.rice a i{ background-position: -1053px -182px}
.forecastMap_tp .cropBox li.rice.active a i{ background-position: -1053px -12px}
.forecastMap_tp .cropBox li.potato a i{ background-position: -1128px -182px}
.forecastMap_tp .cropBox li.potato.active a i{ background-position: -1128px -12px}
.forecastMap_tp .cropBox li.welshonion a i{ background-position: -1211px -182px}
.forecastMap_tp .cropBox li.welshonion.active a i{ background-position: -1211px -12px}
.forecastMap_tp .cropBox li.sesame a i{ background-position: -1290px -182px}
.forecastMap_tp .cropBox li.sesame.active a i{ background-position: -1290px -12px}
.forecastMap_tp .cropBox li span{ display: block; line-height: 1.8}
.forecastMap_tp .cropBox li.active span{ font-weight: 600}

.mapBtnArea.forecastMap{ text-align: center}
.mapBtnArea.forecastMap .mapBtn:after{ display:none}
.mapBtnArea.forecastMap .mapBtn .button{ margin-right: 20px !important}
.mapBtnArea.forecastMap .mapBtn .button:last-child{ margin-right: 0 !important}
.dateBarS{ display: inline-block; position: relative; width: 90%; box-sizing: border-box;}
.dateBarS>div{ position: absolute}
.dateBarS>.fill_bg, .dateBarS>.fill{ background: #fff; border: 1px solid #d2d2d2; height: 30px; top: 0; left: 0; width: 100%; border-radius: 25px; box-sizing: border-box}
.dateBarS>.fill{ background: #0c4ca3; border-radius: 25px 0 0 25px; border-color: #0c4ca3}
.dateBarS .fill_handle{ height: 30px; background: #fff; border: 3px solid #0c4ca3; border-radius: 30px;  padding: 0 5px; font-size: 13px; line-height: 23px; top: 0; font-weight: 600;  box-sizing: border-box}
.dateBarS .start, .dateBarS .end{ background:#fff; border: 1px solid #d2d2d2; z-index: 5; padding: 0 5px; height: 28px; line-height: 28px; font-size: 12px; top: 0; border-radius: 28px}
.dateBarS .end{ right: 0;}
.tab_btn.mapsR{ display: flex;}
.tab_btn.mapsR>li{ flex: 1; text-align: center;}
.tab_btn.mapsR>li a{ display: block; margin-left: -1px; border: 1px solid #cecece; border-bottom-color: #00a9dd; color: #374548; line-height: 40px;}
.tab_btn.mapsR>li.active a{ color: #fff; font-weight: 500; border-color: #00a9dd; background: #00a9dd;}
.tab_con.mapsR{ background: #f1f1f1; padding: 8px 10px}
.tab_con.mapsR>div{ display: none}
.inSchBox{ text-align: center; padding-bottom: 8px}
.tab_con.mapsR .title{ text-align: center; font-size: 18px; line-height: 30px}
i.step{ display: inline-block; width: 10px; height: 10px; background: #000}
i.step.step1{ background: #105db4}
i.step.step2{ background: #00FF00}
i.step.step3{ background: #ffc107}
i.step.step3-2{ background: #fff000}
i.step.step4{ background: #bf0000}

.forecastMap_tp .afterClear{  padding: 10px 0}
.forecastMap_tp .fl-l, .forecastMap_tp .fl-r{ width: 49%; box-sizing: border-box}
.forecastMap_tp .cropBox.fl-l>li{ display: inline-block; text-align: center}
.forecastMap_tp .fl-r{ padding-left: 105px; height: 100px; position: relative}
.forecastMap_tp .fl-r strong{ display: block; position: absolute; left: 0; top: 0; width: 85px; height: 100px; border-radius: 5px; background: #0079c0; color: #fff; line-height: 100px; text-align: center; font-size: 16px; font-weight: 500}
.forecastMap_tp .fl-r>ul{ height: 100px; overflow: auto; box-sizing: border-box; padding: 5px 0}
.forecastMap_tp .fl-r>ul::-webkit-scrollbar{ width: 20px; /*스크롤바의 너비*/}
.forecastMap_tp .fl-r>ul::-webkit-scrollbar-thumb{ background: #0079c0; /*스크롤바의 색상*/}
.forecastMap_tp .fl-r>ul::-webkit-scrollbar-track{ background: #a4cff2; /*스크롤바 트랙 색상*/}
.forecastMap_tp .fl-r>ul>li a{ display: block; font-size: 15px; line-height: 1.3; color: #fff; padding: 5px 0}
.forecastMap_tp .fl-r>ul>li a:before{ content: ''; display: inline-block; width: 5px; height: 5px; background: #fff; margin-right: 7px; vertical-align: top; position: relative; top: 7px}
.forecastMap_tp .button.newButton{ position: absolute; right: 20px; top: 10px}
.forecastMap_tp .button.newButton:before{ content: '\01C3'; display: inline-block; width: 15px; height: 15px; background: #fff; border-radius: 50%; text-align: center; color: #000; vertical-align: top; line-height: 1; margin-right: 5px; position: relative; top: 8px}
.compareMap{ position: relative}
.compareMap .fl-l, .compareMap .fl-r{ width: 49.5%}
.compareMap .newSchBox{ border: 1px solid #ccc}
.compareMap .inMapArea{ position: relative; padding: 47px 5px 5px; box-sizing: border-box; background: #eef0f2;}
.compareMap .inMapArea .mapArea{ background: #fff}
.compareMap .mapThem{ position: absolute; top: 75px; width: 80%; left: 10%; background: rgba(0,0,0,.5); text-align: center; border-radius: 8px; box-sizing: border-box; padding: 10px; font-size: 1.1rem; font-weight: 500; color: #fff; z-index: 1}
.compareMap .btnConnect{ position: absolute; left: 50%; transform: translateX(-50%); -webkit-transform: translateX(-50%); top: 8px; width: 45px; height: 45px; border-radius: 50%; background: #0079c0; text-align: center; font-size: 0;}
.compareMap .btnConnect:before{ content: ''; display: inline-block; background: url(../images/common/icon2022.png) no-repeat -180px -190px; width: 23px; height: 23px;}
.compareMap .btnConnect.notConnect{ background: #4c4f56}
.compareMap .btnConnect.notConnect:before{ background-position: -209px -190px}
.layerPop2022{ z-index: 10}
.layerPop2022 .layerCont p.title{ font-size: 18px; line-height: 30px; margin-bottom: 5px}

.smallLayer{ display: inline-block; position: relative; background: #f3f3f3; border: 1px solid #999; border-radius: 3px; padding: 5px; text-align: center; font-size: 0.85rem; color: #767676;}
.smallLayer strong{ display: block; border-bottom: 1px solid #d3d3d3; font-weight: 600; line-height: 1.5; padding: 0 5px}
.smallLayer div{ background: #fff; padding: 3px 5px; margin-top: 2px}

/* 2022 10 05 */
.forecastMap_tp .fl-r strong{ line-height: 90px}
.forecastMap_tp .fl-r .button.txtN{ position: absolute; left: 20px; top: 65px}
.forecastMap_tp .fl-r .button.txtN.down{  left: 42px; top: 64px}
.button.txtN.arr{ font-size: 0; width: 21px; height: 21px; background: url(../images/common/icon2022.png) no-repeat; margin: 0}
.button.txtN.arr.up, .button.txtN.arr.down{ background-position: -249px -186px}
.button.txtN.arr.lft, .button.txtN.arr.rgt{ background-position: -249px -206px}
.button.txtN.arr.down, .button.txtN.arr.rgt{ transform: rotate(180deg); top: -1px}

/* 2022 12 02 */
.forecastMap_tp .fl-r .button.txtN{ left: auto; top: 0; right: 0; margin: 0 !important}
.forecastMap_tp .fl-r .button.txtN.down{  left: auto; top: auto; bottom: 0}
.forecastMap_tp .button.txtN.arr{ width: 20px; height: 12px; background: #a4cff2; text-align: center;}
.forecastMap_tp .button.txtN.arr::before{ content: '\25B4'; display: inline-block; color: #0079c0; font-size: 1rem; line-height: 7px;}

.icBox{ position: relative; padding: 15px 55px 13px 115px; border-bottom: 1px solid #d3d3d3; box-shadow: 0 3px 0 rgb(235 235 235); background: #ebebeb;}
.icBox:before{ content: ''; display: block; position: absolute; left: 17px; background: url(../images/common/icon2022.png) no-repeat 0 -245px; width: 73px; height: 85px; top: 10px}
.icBox dt{ margin-bottom: 7px; font-size: 22px; font-weight: 500;}
.icBox+p img{ max-width: 100%; width: 100%}

/* 2022 12 22 */
#situationBoard.mapLCont .boardStep2 .fl{ padding: 47px 0px 0px;}
.compareMap .inMapArea{ padding: 47px 0px 0px;}
.forecastMap_tp .fl-r>ul{ overflow-y: scroll;}
.forecastMap_tp .fl-r>ul>li.active a{ background: #fff; color: #323232;}
.forecastMap_tp .fl-r>ul>li a:before{ margin-left: 5px;}
.forecastMap_tp .fl-r>ul>li.active a:before{ background: #323232;}
.smallLayer>button{ background: #fff; border: 1px solid #36373c; border-radius: 50%; width: 20px; height: 20px; font-size: 0; text-align: center; position: absolute; right: -8px; top: -8px;}
.smallLayer>button:before { content: '\2716'; display: inline-block; font-size: 0.8rem; color: #36373c; line-height: 0.5;}

/* 2023 01 31 */
.layerPop2022 {z-index: 11003}
#counsel2022 .counselView .starRating .itemRating {margin: 0px;}

/* 2023 03 06 */
#counsel2022 .category.cate6 i { width:31px; background-position: -272px -116px;}

/* 2023 08 03 */
.newSchBox.outLine{ border: 1px solid #ccc; position: relative;}
.newSchBox.outLine .dateBarS{ height: 30px; width: 80%}
.newSchBox.outLine .button.txtN{ top: 4px}
.newSchBox.outLine .buttonN.icon{ position: absolute; right: 0; top: 14px}

.flexW{ display: flex; flex-wrap: wrap; justify-content: space-between;}
#container .tab_con.mapsR h4, #container .layerPop2022 h4{ padding-left: 0; font-weight: 500;}
#container .tab_con.mapsR h4:before, #container .layerPop2022 h4:before{ content: ''; display: inline-block; border: 4px solid #0079c0; width: 4px; height: 4px; margin-right: 8px;}
.tab_con.mapsR .tableN2{ position: relative}
.tab_con.mapsR .tableN2 .tabAreaR{ position: absolute; right: 0; top: 0}
.tab_con.mapsR .tableN2 .tabAreaR>ul{ display: flex;}
.tab_con.mapsR .tableN2 .tabAreaR ul li{ margin: 0 0 0 3px}
.tab_con.mapsR .tableN2 .tabAreaR ul li a{ display: block; line-height: 25px; background: #fff; border-radius: 5px; padding: 0 9px; font-size: 14px; border: 1px solid #ccc}
.tab_con.mapsR .tableN2 .tabAreaR ul li a.current{ background: #0079c0; color: #fff; border-color: #0079c0}

.tab_con.mapsR .newSchBox{ padding: 0; margin: 0; background: none;}
.tab_con.mapsR .newSchBox table{ margin: 0;}

.counsel.imgList{ display: flex; flex-wrap: wrap; justify-content: space-around;}
.counsel.imgList li{ position: relative; float: left; width: 33.33%; height: 230px; margin-bottom: 5px; padding: 3px; box-sizing: border-box; overflow: hidden}
.counsel.imgList .category{ position: absolute; top: 3px; left: 3px; width: 70px; height: 75px; text-align: center; color: #fff; font-size: 15px; background: #374548;}
.counsel.imgList .category i { display: block; height: 42px; margin: 6px auto 0; background: url(../images/common/icon2022.png) no-repeat}

.counsel.imgList .category.cate1 i{ width: 38px; background-position: -79px -116px;}
.counsel.imgList .category.cate2 i{ width: 38px; background-position: -120px -116px;}
.counsel.imgList .category.cate3 i{ width: 28px; background-position: -160px -116px;}
.counsel.imgList .category.cate4 i{ width: 44px; background-position: -190px -116px;}
.counsel.imgList .category.cate5 i{ width: 30px; background-position: -236px -116px;}

.counsel.imgList li a{ display: block; color: #333;  background: #fff;}
.counsel.imgList li a img{ width: 100%; height: 130px;}
.counsel.imgList .contGroup{ padding: 5px; position: relative;}
.counsel.imgList .contGroup *{ display: block; text-align: left;}
.counsel.imgList .contGroup .title{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 16px; line-height: 1.3;}
.counsel.imgList .contGroup .state{ color: #ff0000; font-size: 13px; position: absolute; right: 5px; top: 5px; display: inline-block; background: #fff; line-height: 20px;}
.counsel.imgList .contGroup .date{ color: #686868;}
.counsel.imgList .contGroup .cont{ display: block; padding: 10px 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}

.in_boardMap{ padding: 47px 0 2px; box-sizing: border-box; position: relative}
.in_boardMap .mapArea{ background: #fff; position: relative;}

.layerPop2022 .flexW .r_imgA{ margin-left: 2%; width: 48%; box-sizing: border-box; border: 5px solid #eef0f2; overflow: hidden;  text-align: center;}
.layerPop2022 .flexW .r_imgA img{ width: 100%; height: 100%; border: 1px solid #f7f7f7; box-sizing: border-box;}
.layerPop2022 .flexW .r_imgAList{ margin-left: 2%;}
.btnWrap.counsel{ margin: 25px 0 0}
.btnWrap.counsel .btnL{ height: 50px; padding: 0 40px !important; line-height: 50px; display: inline-block; font-size: 16px;}
.btnWrap.counsel .btnBlue{ background: #0c4ca3; color: #fff !important; border: 0}

.grid.bord_tp2{ border-top: 2px solid #64c0cf;}
.ulDot2{ margin: 0 0 15px 20px}
.ulDot2 li{ padding-left: 15px; position: relative;}
.ulDot2 li:before{ content: ''; display: block; width: 5px; height: 5px; position: absolute; left: 0; top: 10px; background: #374548;}

.inImgA>li{ display: flex; flex-wrap: wrap; justify-content: space-between;}
.inImgA>li>div{ width: 58%; margin-right: 2%;}
.inImgA>li>p{ width: 40%; margin-top: 15px}
.inImgA>li>p img{ width: 100%}

.colorExemArea{ display: flex; position: relative}
.colorExemArea>li{ margin: 0 5px 50px 0;}
.colorExemArea>li span{ display: block; border: 1px solid #fdce32; background: #fdce32; height: 50px; line-height: 50px; min-width: 140px; box-sizing: border-box; padding-left: 70px; padding-right: 25px; position: relative}
.colorExemArea>li span i{ display: block; width: 50px; height: 48px; background: #fff; position: absolute; top: 0; left: 0; text-align: center;}
.colorExemArea>li span i:before{ content: ''; display: inline-block; background: url(../images/common/icon2023.png) no-repeat; height: 23px; position: relative; top: 5px;}
.colorExemArea>li.value1 span i:before{ background-position: 0 -105px; width: 23px}
.colorExemArea>li.value2 span i:before{ background-position: -28px -105px; width: 24px}
.colorExemArea>li.value3 span i:before{ background-position: -57px -105px; width: 21px}
.colorExemArea>li.value4 span i:before{ background-position: -89px -103px; width: 21px}
.colorExemArea>li p{ display: none; background: #fdce32; position: absolute; left: 0; padding: 10px; min-width: 410px; text-align: center; font-size: 1rem; font-weight: 600;}
.colorExemArea>li:hover p{ display: block;}



.colorExemArea>li.value2 span, .colorExemArea>li.value2 p{ background: #ff9434; border-color: #ff9434}
.colorExemArea>li.value3 span, .colorExemArea>li.value3 p{ background: #74dfa6; border-color: #74dfa6}
.colorExemArea>li.value4 span, .colorExemArea>li.value4 p{ background: #d5dfdc; border-color: #d5dfdc}


/* 2023 08 09 */
.halfGrid:after { content:''; display: block; clear: both;}
.halfGrid .fl-l { position: relative; width:40%}
.halfGrid .fl-l .btnChoice { position: absolute; top:50%; right:-41px; width:32px; height:32px; margin-top:20px; display: flex; justify-content: center; align-items: center; font-size:0 !important; border:1px solid #d7d7d7}
.halfGrid .fl-l .btnChoice:after { content:''; display:block; width:8px; height:9px; background:url(../images/common/icon2023.png) no-repeat -120px -104px}
.halfGrid .fl-r { width:calc(60% - 50px)}
.layerPop2022 .schBox2022 { padding:13px 20px 13px 10px !important}
#container .tab_con.mapsR h4, #container .layerPop2022 h4{ background: none;}

.layerPop2022 .schBox2022 { margin-bottom:20px; padding:23px 30px 23px 20px; }
.layerPop2022 .schBox2022.boxStyle1 { border: 1px solid #d7d7d7;box-shadow: 0 3px 0 rgb(229,229,229);}
.layerPop2022 .schBox2022 span { margin:0 10px 0 20px}
.layerPop2022 .schBox2022 label { display:inline-block; min-width:73px; margin-right:10px; line-height:40px;}
.layerPop2022 .schBox2022 label:before { content:''; display:inline-block; width:5px; height:5px; margin-right:10px; margin-top:-2px; vertical-align:middle; background:#374548 }
.layerPop2022 .schBox2022 .btn { min-width:80px;}
.layerPop2022 .schBox2022.padS { padding:12px 20px 12px 0}

#main2020 .layerPop2022 .schBox2022 .inputData { height:40px; line-height:40px; border:0 !important; background:#ececec}
#main2020 .layerPop2022 .schBox2022 .inputCal { display:inline-block; padding-right:37px; background:#ececec url(../images/icon/calendar2.gif) no-repeat right 7px top 50%}
.layerPop2022 .schBox2022 textarea { width:100%; padding:5px; resize:none}
.layerPop2022 .schBox2022 select { height: 40px !important;}
.layerPop2022 .schBox2022 sup { color:#ff0000; vertical-align:top}
.layerPop2022 .schBox2022 .chkBoxArea label { line-height:35px}
.layerPop2022 .schBox2022 .btnWrap { margin:25px 0}
.layerPop2022 .schBox2022 .btn { display:inline-block; height:40px; padding:0 15px !important; border:0; border-radius:0; text-align:center; color:#fff !important; line-height:40px; background:#0079c0}
.layerPop2022 .schBox2022 .btnL { height:50px; padding:0 40px !important; line-height:50px}
.layerPop2022 .schBox2022 .btnGray { background:#374548}
.layerPop2022 .schBox2022 .btnBlue { background:#0c4ca3}
.layerPop2022 .schBox2022 .btnYellow { color:#374548 !important; background:#febc32}
.layerPop2022 .schBox2022 .btnSch:before { content:''; display:inline-block; width:16px; height:16px; margin-right:5px; margin-bottom:-1px; background:url(../images/common/icon.png) no-repeat -185px -259px }
.layerPop2022 .schBox2022 .btnApply:before { content:''; display:inline-block; width:23px; height:22px; margin-right:3px; margin-bottom:-4px; background:url(../images/common/icon2022.png) no-repeat -123px -162px }
.layerPop2022 .schBox2022 .chkBoxArea{ padding: 0}
.layerPop2022 .schBox2022 .chkBoxArea span{ display: inline-block; margin: 0 35px 0 0; font-weight: 400;}
.layerPop2022 .schBox2022 .chkBoxArea label{ display: inline-block; position: relative; padding-left: 30px; line-height: 35px}
.layerPop2022 .schBox2022 .chkBoxArea label:before{ content: ''; display: block; background: url(../images/common/formC.png) no-repeat 0 -43px; width: 20px; height: 20px; position: absolute; left: 0; top: 10px}
.layerPop2022 .schBox2022 .chkBoxArea input{ position: absolute; width: 0; height: 0; overflow: hidden;}
.layerPop2022 .schBox2022 .chkBoxArea input[type='checkbox']:checked+label, .layerPop2022 .schBox2022 .layerPop2022 .schBox2022 .chkBoxArea.radio input[type='radio']:checked+label{ font-weight: 600}
.layerPop2022 .schBox2022 .chkBoxArea input[type='checkbox']:checked+label:before{ background-position: 0 -65px}

.layerPop2022 .schBox2022 .chkBoxArea.radio label:before{ background-position: 0 0}
.layerPop2022 .schBox2022 .chkBoxArea.radio input[type='radio']:checked+label:before{ background-position: 0 -21px}

/* 2023.08.22 jbh */
.counsel.imgList .category.cate6 i{ width: 30px; background-position: -272px -116px;}

/* 2023 09 05 */
.counsel.imgList{ justify-content: flex-start;}
.inputData+.btn_calendar{ display: inline-block; background: url(../images/icon/calendar2.gif) no-repeat 50% 50%; font-size: 0; width: 30px; height: 40px; position: relative; left: -38px}
.legendArea.blight{ background: rgba(255,255,255,.9) !important; border-radius: 10px; box-shadow: 0 0 10px rgba(0,0,0,.35); right: 15px !important; bottom: 15px !important;}
.legendArea.blight>ul{ padding: 10px 15px !important;}
.legendArea.blight>ul li span, .legendArea.blight>ul li strong{ display: inline-block; font-size: 15px; font-weight: 500; color: #323232; vertical-align: top;}
.legendArea.blight>ul li span i{ display: block; width: 20px; height: 20px; background: #fff; border: 1px solid #bbb;}
.legendArea.blight>ul li.s2 span i{ background: #00a85f;}
.legendArea.blight>ul li.s3 span i{ background: #fbd500;}
.legendArea.blight>ul li.s4 span i{ background: #f79331;}
.legendArea.blight>ul li.s5 span i{ background: #ee3135;}
.legendArea.blight>p{margin: -5px 10px 0; text-align: center; font-weight: 500;}
.legendArea.blight>p::before{ content: ''; display: block; width: 100%; height: 1px; border-top: 1px dashed #323232; margin-bottom: 8px;}
.legendArea.blight>ul.pick li img{ margin-right: 5px}

/* 2023.08.30 kdh */
.colorExemArea>li span i:before{ top: 13px;}
.colorExemArea>li.value3 span, .colorExemArea>li.value3 p{ background: lightpink; border-color: lightpink}

/* 2023 09 26 */
.mapBtnArea.forecastMap.both{ text-align: left;}
.mapBtnArea .selChkArea{ position: absolute; right: 10px; top: 7px}
.mapBtnArea .selChkBox{ display: none; position: absolute; left: -1px; top: 34px; background: #fff; width: calc(100% + 2px); padding: 5px; border: 1px solid #0079c0; box-sizing: border-box;}
.mapBtnArea .selChkBox span{ display: block;}
.mapBtnArea .selChkBox label{ display: inline-block; line-height: 32px; position: relative; width: 100%; color: #323232; font-size: 15px; box-sizing: border-box;}
.mapBtnArea .selChkBox label:after{ content: ''; display: block; position: absolute; right: 8px; top: 8px; background: url(../fb_static/images/blight/icon.png) no-repeat -147px -69px; width: 15px; height: 16px;}
.mapBtnArea .selChkBox input[type='checkbox']{ width: 0; height: 0; opacity: 0; margin: 0}
.mapBtnArea .selChkBox input[type='checkbox']:checked+label:after{ background-position: -127px -69px}
.mapBtnArea .button.selChk{ padding: 0 35px 0 5px !important; width: 130px; text-align: left; z-index: 10; background: #fff !important; border-radius: 0; margin: 0 !important; height: 33px !important;}
.mapBtnArea .button.selChk:after{ content: ''; display: block; background: url(../fb_static/images/blight/icon.png) no-repeat -124px -43px; width: 21px; height: 21px; vertical-align: top; margin: 0 3px 0 0; position: absolute; right: 0; top: 4px}
.mapBtnArea .selChkArea.active .button.selChk:after{ background-position: -146px -43px}

/* 2023 10 12 */
.mapArea .legendArea.blight{ position: absolute; z-index: 1}
.mapArea .legendArea.blight>ul li{ margin: 8px 0;}
.mapArea .legendArea.blight>ul li i{ margin-right: 10px;}


/* 2024 05 16 AI영상진단 */
.AIimagingWrap *,
.AIDiagn * { font-family: Malgun Gothic, '맑은 고딕', sans-serif; color:#1d1d1d}
#counsel2022 .counselInfo.icon02:before { width:53px; height:75px; left:33px; margin-top:-37px; background-position:-75px -245px;}
#counsel2022 h2 span.noline { position: relative; display: inline-block; vertical-align: top; font-size: 22px; line-height: 1; z-index: 1;}
#counsel2022 h2 span.noline:after { content:''; display: block; position: absolute; bottom:-1px; left:0; width:100%; height: 5px; background: #fff; z-index: -1;} 
#counsel2022 .imagingUse { display: flex; gap:20px; margin-top:13px }
#counsel2022 .imagingUse .imagingStep { flex:1; text-align: center;}
#counsel2022 .imagingUse .imagingStep h3 { display: block !important; margin-bottom: 0; padding:17px 0 !important; line-height: 25px !important; border-radius: 25px 25px 0 0; color:#fff; background: #00a9dd;}
#counsel2022 .imagingUse .imagingStep h3 em { position: absolute; bottom:-4px; left:0; font-size:55px; line-height: 1; font-style: italic; color:#fff}
#counsel2022 .imagingUse .imagingStep div { display: flex; flex-direction: column; align-items: center; padding:23px 29px 19px 29px; border-radius: 0 0 25px 25px; border:1px solid #d7d7d7; border-top:0}
.imagingUse .imagingStep div i { width:110px; height:110px; display: flex; align-items: center; justify-content: center; margin-bottom:10px; border:1px solid #9d9d9d; border-radius: 100%;}
.imagingUse .imagingStep div i.icon1:after { content:''; display: block; width:60px; height:48px; background:url(../images/common/icon2022.png) no-repeat -130px -245px}
.imagingUse .imagingStep div i.icon2:after { content:''; display: block; width:61px; height:56px; background:url(../images/common/icon2022.png) no-repeat -192px -245px}
.imagingUse .imagingStep div i.icon3:after { content:''; display: block; width:65px; height:41px; background:url(../images/common/icon2022.png) no-repeat -255px -245px}
.imagingUse .imagingStep div span { display: block; margin-bottom: 20px; }
.imagingUse .imagingStep div a { width:100%; border:1px solid #d7d7d7; line-height: 33px !important; font-size:15px !important; background:#f7f7f7}
.imagingUse .imagingStep.active h3:after { content:''; display: inline-block; width:25px; height:25px; margin-left:10px; vertical-align: top; background:url(../images/common/icon2022.png) no-repeat -272px -186px}
#counsel2022 .imagingUse .imagingStep.active div { border-color:#00a9dd !important; border-bottom:0; padding-bottom:38px; border-radius: 0; background:#ecf9ff }
.imagingUse .imagingStep.active div i { border-color:#00a9dd; background:#00a9dd}
.imagingUse .imagingStep.active div a { border:2px solid #374548; color:#000; line-height: 31px !important; background:#fff}
#counsel2022 .txt_ac h3 span { visibility: inherit; position: static; color:#686868; font-size:20px; font-weight: 300; background: none;}
.AIimagingWrap .imagingStepTab { position: relative; padding-top:53px}
.AIimagingWrap .imagingStepTab .tabBtn { position: absolute; top:0; left:50%; width:300px; box-shadow: 0 3px 0 rgb(229,229,229);}
.AIimagingWrap .imagingStepTab .tabArea01 .tabBtn { left:calc(50% - 299px)}
.AIimagingWrap .imagingStepTab .tabBtn a { display: block; border:1px solid #d7d7d7; line-height: 48px !important; color:#8c8c8c; font-size:20px !important; font-weight: 500; background:#fff}
.AIimagingWrap .imagingStepTab .tabBtn a span { display: none;}
.AIimagingWrap .imagingStepTab .tabCont { display: none;}
.AIimagingWrap .imagingStepTab .tabCont>p { margin-top: 30px; font-weight: bold; font-size:15px !important; }
.AIimagingWrap .imagingStepTab .active .tabBtn:after { content:''; display: block; position: absolute; bottom:-3px; left:0; width:calc(100% + 299px); height:3px; background:#374548; z-index: 1;}
.AIimagingWrap .imagingStepTab .tabArea02.active .tabBtn:after { left:auto; right:0}
.AIimagingWrap .imagingStepTab .active .tabBtn a { border-color:#374548; color:#fff; background:#374548}
.AIimagingWrap .imagingStepTab .active .tabBtn a span { display: inline-block; font-size: 20px !important; color:#fff}
.AIimagingWrap .imagingStepTab .active .tabCont { display: block;}

.disease_area { display: flex; justify-content: center; gap:30px; margin-bottom: 60px;}
.disease_area>div { position: relative; width:272px; padding:20px; border:1px solid #ffd9c8; border-radius: 20px; background:#fff}
.disease_area h4 { margin:0 0 12px 0 !important; padding:0 !important; font-size:18px !important; color:#374548; font-weight: bold; text-align: left;;}
.disease_area h4 span { font-size:18px !important; color:#de7651}
.disease_area > div > ul { display: flex; flex-wrap: wrap; gap:10px;}
.disease_area > div > ul > li { width:calc(50% - 5px); height:85px; }
.disease_area > div > ul a { display: flex; justify-content: center; align-items: center; flex-direction: column; height:100%;  border:1px solid transparent; border-radius: 10px; color:#5d5d5d; background:#f6f6f6;}
.disease_area > div > ul a:hover,
.disease_area > div > ul a:focus,
.disease_area > div > ul a.active { font-weight: bold; color:#000; border-color:#ef7e54; background:#ffede5; }
.disease_area .cropCategory i { display: block; height:45px; margin:5px 0; background:url(../images/common/icon2022.png) no-repeat}
.disease_area .cropCategory i.cateAll { width:45px; background-position: -305px -116px;}
.disease_area .cropCategory i.cate1 { width:54px; background-position: -130px -304px;}
.disease_area .cropCategory i.cate2 { width:58px; background-position: -187px -304px;}
.disease_area .cropCategory i.cate3 { width:43px; background-position: -248px -304px;}
.disease_area .cropCategory i.cate4 { width:56px; background-position: -294px -304px;}
.disease_area .cropList { width:392px}
.disease_area .cropList > ul { height:275px; overflow-y: auto;}
.disease_area .cropList > ul > li { width:calc(33.33% - 6.66px)}
.disease_area .cropList i { display:block; height:50px; margin-bottom:5px; background-image:url(../images/common/iconCrop2024_1.png); background-repeat: no-repeat }
.disease_area .crop1 { width:53px; background-position:-20px -18px;}/*감*/
.disease_area .crop2 { width:56px; background-position:-109px -18px;}/*감귤*/
.disease_area .crop3 { width:61px; background-position:-195px -18px;}/*감자*/
.disease_area .crop4 { width:61px; background-position:-282px -18px;}/*고구마*/
.disease_area .crop5 { width:47px; background-position:-381px -18px;}/*고추*/
.disease_area .crop6 { width:48px; background-position:-473px -18px;}/*단고추*/
.disease_area .crop7 { width:49px; background-position:-559px -18px;}/*들깨*/
.disease_area .crop8 { width:54px; background-position:-648px -18px;}/*딸기*/
.disease_area .crop9 { width:60px; background-position:-736px -18px;}/*땅콩*/
.disease_area .crop10 { width:56px; background-position:-826px -18px;}/*마늘*/
.disease_area .crop11 { width:53px; background-position:-20px -108px;}/*매실*/
.disease_area .crop12 { width:56px; background-position:-109px -108px;}/*멜론*/
.disease_area .crop13 { width:61px; background-position:-195px -108px;}/*무*/
.disease_area .crop14 { width:61px; background-position:-282px -108px;}/*배*/
.disease_area .crop15 { width:47px; background-position:-381px -108px;}/*배추*/
.disease_area .crop16 { width:48px; background-position:-473px -108px;}/*보리*/
.disease_area .crop17 { width:49px; background-position:-559px -108px;}/*복숭아*/
.disease_area .crop18 { width:54px; background-position:-648px -108px;}/*브로콜리*/
.disease_area .crop19 { width:60px; background-position:-736px -108px;}/*비트*/
.disease_area .crop20 { width:56px; background-position:-826px -108px;}/*사과*/
.disease_area .crop21 { width:53px; background-position:-20px -198px;}/*생강*/
.disease_area .crop22 { width:56px; background-position:-109px -198px;}/*석류*/
.disease_area .crop23 { width:61px; background-position:-195px -198px;}/*수박*/
.disease_area .crop24 { width:61px; background-position:-282px -198px;}/*양파*/
.disease_area .crop25 { width:47px; background-position:-381px -198px;}/*오이*/
.disease_area .crop26 { width:48px; background-position:-473px -198px;}/*옥수수*/
.disease_area .crop27 { width:49px; background-position:-559px -198px;}/*자두*/
.disease_area .crop28 { width:60px; background-position:-736px -198px;}/*참깨*/
.disease_area .crop29 { width:56px; background-position:-826px -198px;}/*참외*/
.disease_area .crop30 { width:61px; background-position:-195px -288px;}/*콩*/
.disease_area .crop31 { width:61px; background-position:-282px -288px;}/*토마토*/
.disease_area .crop32 { width:54px; background-position:-648px -198px;}/*파*/
.disease_area .crop33 { width:53px; background-position:-20px -288px;}/*포도*/
.disease_area .crop34 { width:56px; background-position:-109px -288px;}/*호박*/
.disease_area .schResult>ul { height:275px; overflow-y: auto;}
.disease_area .schResult .select { display: flex; justify-content: center; align-items: center; flex-direction: column; width:calc(50% - 5px); height:85px; font-weight: bold; border:2px solid #ef7e54; border-radius: 10px; background:#ffede5}
.disease_area .schResult .select i { display:block; height:50px; margin-bottom:5px; background-image:url(../images/common/iconCrop2024_1.png); background-repeat: no-repeat }

.disease_area .schResult>p { position: absolute; bottom:-60px; left:15px; padding-left:20px; text-align: left;  color:#565656; font-size: 15px !important; line-height: 20px !important;}
.disease_area .schResult>p:before { content:''; display: block; position: absolute; top:1px; left:0; width:17px; height:17px; margin-right:3px; background:url(../images/common/icon2022.png) no-repeat -184px -212px}

.pest_area { display: flex; justify-content: center; gap:30px; margin-bottom: 60px;}
.pest_area>div { position: relative; width:272px; padding:20px; border:1px solid #c8e2fa; border-radius: 20px; background:#fff}
.pest_area h4 { margin:0 0 12px 0 !important; padding:0 !important; font-size:18px !important; color:#374548; font-weight: bold; text-align: left;;}
.pest_area h4 span { font-size:18px !important; color:#2b85d7}
.pest_area > div > ul { display: flex; flex-wrap: wrap; gap:10px;}
.pest_area > div > ul > li { width:calc(50% - 5px); height:85px; }
.pest_area > div > ul a { display: flex; justify-content: center; align-items: center; flex-direction: column; height:100%;  border:1px solid transparent; border-radius: 10px; color:#5d5d5d; background:#f6f6f6;}
.pest_area > div > ul a:hover,
.pest_area > div > ul a:focus,
.pest_area > div > ul a.active { font-weight: bold; color:#000; border-color:#509ee4; background:#ecf6ff; }
.pest_area .pestCategory i { display: block; margin:5px 0; background-image:url(../images/common/icon2022.png); background-repeat:no-repeat}
.pest_area .cateAll { width:45px; height:45px; background-position: -305px -116px;}
.pest_area .cate1 { width:32px; height:28px; background-position: -272px 0;}
.pest_area .cate2 { width:36px; height:41px; background-position: -314px 0;}
.pest_area .cate3 { width:42px; height:38px; background-position: -272px -30px;}
.pest_area .cate4 { width:45px; height:29px; background-position: -272px -71px;}
.pest_area .schResult { width:512px}
.pest_area .schResult > ul > li { width:calc(25% - 7.5px)}
.pest_area .schResult .select { display: flex; justify-content: center; align-items: center; flex-direction: column; width:calc(25% - 7.5px); height:85px; font-weight: bold; border:2px solid #509ee4; border-radius: 10px; background:#ecf6ff}
.pest_area .schResult .select i { display:block; margin-bottom:5px; background-image:url(../images/common/icon2022.png); background-repeat: no-repeat }
.pest_area .paging { margin-top:40px; text-align: center;}
.pest_area .paging strong,
.pest_area .paging a { display: inline-block; width:35px; height:30px; margin:0 2px; border-radius: 5px; font-size: 15px !important;}
.pest_area .paging strong {  color:#fff; font-weight: bold; line-height: 30px !important; background:#509ee4}
.pest_area .paging a { border:1px solid #ddd; color:#5d5d5d; line-height: 28px !important; background: #ecf9ff;}
.pest_area .schResult>p { position: absolute; bottom:-40px; left:15px; padding-left:20px; text-align: left;  color:#565656; font-size: 15px !important; line-height: 20px !important;}
.pest_area .schResult>p:before { content:''; display: block; position: absolute; top:1px; left:0; width:17px; height:17px; margin-right:3px; background:url(../images/common/icon2022.png) no-repeat -184px -212px}

#counsel2022 .btnSkyBlue { background:#00a9dd }
#counsel2022 .imagingStepTab .inputData { border:1px solid #d7d7d7 !important; background:#fff}

.AIimagingWrap .btnExample { margin:30px 0}
.AIimagingWrap .btnExample a { display: inline-block; vertical-align: middle; margin:0 2px; padding:0 20px; border:1px solid #cecece; border-radius: 10px; font-weight: 300; line-height: 40px !important; color:#374548; background:#fff;}
.AIimagingWrap .btnExample a.active { border-color:#00a9dd; color:#fff; font-weight: 500; background:#00a9dd }
.AIimagingWrap .imgExample { display: flex; max-height: 465px;}
.AIimagingWrap .imgExample .imgThumb { position: relative; width:57%; border-bottom-left-radius: 25px; overflow: hidden; }
.AIimagingWrap .imgExample .imgThumb img { width:100%; height: 100%;}
.AIimagingWrap .imgExample .imgThumb .enlarge { position: absolute; bottom:0; right:0; display: flex; align-items: center; justify-content: center; font-size: 0 !important; width:50px; height:40px; background:#374548}
.AIimagingWrap .imgExample .imgThumb .enlarge:after { content:''; display: block; width:16px; height:16px; background:url(../images/common/icon.png) no-repeat -185px -259px}
.AIimagingWrap .imgExample .imgExplain { width:43%; padding:30px 40px; text-align: left; line-height:210% !important}
.AIimagingWrap #guide2 .imgExample { display: block; max-height: none;}
.AIimagingWrap #guide2 .imgExample .imgThumb { width:100%; display: flex; flex-wrap: wrap; gap:10px; border-radius: 0;}
.AIimagingWrap #guide2 .imgExample .imgThumb img { width:calc(50% - 5px)}
.AIimagingWrap #guide2 .imgExample .imgExplain { width:100%; padding:15px 0 0; border-top:1px solid #00a9dd; margin-bottom:12px; display: flex; flex-wrap: wrap;}
.AIimagingWrap #guide2 .imgExample .imgExplain p { width:50%; padding:5px 10px 5px 32px; text-indent: -23px;}
.AIimagingWrap .guideC { margin-top:-1px; padding:30px; border:1px solid #00a9dd; border-radius: 25px; background:#ecf9ff}
.AIimagingWrap #guide1 { border-top-left-radius: 0;}
.AIimagingWrap #guide3 { border-top-right-radius: 0;}

#counsel2022 .AIDiagn .tab_btn { margin-bottom:10px; border-bottom:1px solid #00a9dd}
#counsel2022 .AIDiagn .tab_btn li { flex:none; width:300px;}
#counsel2022 .AIDiagn .tab_btn li a { border-bottom:0}
.AIDiagn .agreeBox { position: relative; padding:30px; background:#f6f6f6}
.AIDiagn .agreeBox .chkBoxArea { margin-top:30px; border-top:1px solid #d7d7d7}
.AIDiagn .agreeBox .chkBoxArea span { margin:0}
.AIDiagn .agreeBox .chkBoxArea span + span { margin-left:70px}
.AIDiagn .agreeBox .btnArea { position: absolute; top:25px; right:30px; margin:0; padding-top:0}
.AIDiagn .btnArea .btn + .btn { margin-left:5px}
.AIDiagn .boxStyle1 { padding:30px}
.AIDiagn .boxStyle1 .imgUpload { display: flex; justify-content: center; align-items: center; gap:15px; padding:20px; border:1px dashed #cbcbcb; border-radius: 25px; background:#fafafa}
.AIDiagn .boxStyle1 .imgUpload:before { content:''; display: inline-block; width:144px; height:144px; opacity: .3; background:url(../images/common/disb_deco.png) no-repeat 0 0}
.AIDiagn .boxStyle1 .imgUpload div { display: inline-block;}
.AIDiagn .boxStyle1 .imgUpload p { margin-bottom:20px }
.AIDiagn .boxStyle1 .imgDiagn { background:#fff}
.imgDiagn { display: flex; gap:20px; height:485px; justify-content: center;}
.imgDiagn .imgThumb { width:57%; text-align: center; background:#eaefff45; border:1px solid #fbfbfb; border-radius:16px; box-shadow:inset 0 0 8px #d5e3e7}
.imgDiagn .imgThumb img { max-width:100%; max-height:100% }
.imgDiagn .diagnArea { position: relative; width:calc(43% - 20px); padding-bottom:80px;}
.imgDiagn .diagnArea ul { overflow-y: auto; height:100%}
.imgDiagn .diagnArea li { display: flex; justify-content: space-between; margin-bottom:5px;  position: relative; padding:0 15px 0 67px; border:1px solid #cdcdcd; line-height: 38px !important; }
.imgDiagn .diagnArea li i { position: absolute; top:-1px; left:-1px; display: inline-block; width:53px; height:calc(100% + 2px)}
.imgDiagn .diagnArea li span { line-height:38px !important; letter-spacing: 0 !important;}
.imgDiagn .diagnArea .btnArea { position: absolute; bottom:0; left:0; margin:0; padding-top:0}
.imgDiagn .diagnCont { height:300px; overflow-y: auto;}
.imgDiagn .aiBackgroundImg { padding:15px 10px; background: url(../images/common/bgThumb.jpg) no-repeat 0 20%;}
.imgDiagn .cropImgList { display: flex; justify-content: center; gap:10px; flex-wrap: wrap;}
.imgDiagn .cropImgList a { display: block; width:80px; text-align: center;}
.imgDiagn .cropImgList a span { font-weight: bold;}
.imgDiagn .cropImgList a i { display: inline-block; width:80px; height:80px; background: url(../images/common/iconCrop2024_2.png) no-repeat ;}
.imgDiagn .cropImgList a i:after { content:''; display: block; width:100%; height:100%; border:3px solid transparent; border-radius: 100%; box-sizing: border-box;}
.imgDiagn .cropImgList a i.crop1 { background-position:-5px -5px;}
.imgDiagn .cropImgList a i.crop2 { background-position:-94px -5px;}
.imgDiagn .cropImgList a i.crop3 { background-position:-185px -5px;}
.imgDiagn .cropImgList a i.crop4 { background-position:-275px -5px;}
.imgDiagn .cropImgList a i.crop5 { background-position:-365px -5px;}
.imgDiagn .cropImgList a i.crop6 { background-position:-455px -5px;}
.imgDiagn .cropImgList a i.crop7 { background-position:-544px -5px;}
.imgDiagn .cropImgList a i.crop8 { background-position:-635px -5px;}
.imgDiagn .cropImgList a i.crop9 { background-position:-723px -5px;}
.imgDiagn .cropImgList a i.crop10 { background-position:-815px -5px;}
.imgDiagn .cropImgList a i.crop11 { background-position:-5px -95px;}
.imgDiagn .cropImgList a i.crop12 { background-position:-94px -95px;}
.imgDiagn .cropImgList a i.crop13 { background-position:-185px -95px;}
.imgDiagn .cropImgList a i.crop14 { background-position:-275px -95px;}
.imgDiagn .cropImgList a i.crop15 { background-position:-365px -95px;}
.imgDiagn .cropImgList a i.crop16 { background-position:-455px -95px;}
.imgDiagn .cropImgList a i.crop17 { background-position:-544px -95px;}
.imgDiagn .cropImgList a i.crop18 { background-position:-635px -95px;}
.imgDiagn .cropImgList a i.crop19 { background-position:-723px -95px;}
.imgDiagn .cropImgList a i.crop20 { background-position:-815px -95px;}
.imgDiagn .cropImgList a i.crop21 { background-position:-5px -185px;}
.imgDiagn .cropImgList a i.crop22 { background-position:-94px -185px;}
.imgDiagn .cropImgList a i.crop23 { background-position:-185px -185px;}
.imgDiagn .cropImgList a i.crop24 { background-position:-275px -185px;}
.imgDiagn .cropImgList a i.crop25 { background-position:-365px -185px;}
.imgDiagn .cropImgList a i.crop26 { background-position:-455px -185px;}
.imgDiagn .cropImgList a i.crop27 { background-position:-544px -185px;}
.imgDiagn .cropImgList a i.crop28 { background-position:-723px -185px;}
.imgDiagn .cropImgList a i.crop29 { background-position:-815px -185px;}
.imgDiagn .cropImgList a i.crop30 { background-position:-185px -275px;}
.imgDiagn .cropImgList a i.crop31 { background-position:-275px -275px;}
.imgDiagn .cropImgList a i.crop32 { background-position:-635px -185px;}
.imgDiagn .cropImgList a i.crop33 { background-position:-5px -275px;}
.imgDiagn .cropImgList a i.crop34 { background-position:-94px -275px;}
.imgDiagn .cropImgList a.active span { color:#0053c4}
.imgDiagn .cropImgList a.active span:before { content:''; display: inline-block; width:18px; height:18px; margin-right:3px; margin-top:2px; vertical-align: top; background:url(../images/common/icon2022.png) no-repeat -163px -212px}
.imgDiagn .cropImgList a.active i:after { border-color:#0053c4}

.diseaseList { display: flex; gap:10px; flex-wrap: wrap;}
.diseaseList li { position: relative; width:calc(20% - 8px); padding:0 52px 0 12px; border:1px solid #d7d7d7; color:#686868 !important; line-height: 38px !important; text-align: left;}
.diseaseList li .btnBlank { position: absolute; top:0; right:0; width:40px; height:38px; display: flex; justify-content: center; align-items: center; font-size: 0 !important; background:#f2f2f2}
.diseaseList li .btnBlank:after { content:''; display: block; width:15px; height:15px; background:url(../images/common/icon2022.png) no-repeat -145px -210px} 

#counsel2022 .btnLine { border:1px solid #cecece; color:#374548 !important; line-height: 38px; background:#fff}
#counsel2022 .listDot li { position: relative; margin-bottom: 25px; padding-left:15px}
#counsel2022 .listDot li .title { display: block; margin-bottom:10px;}
#counsel2022 .listDot li:after { content:''; display: block; position: absolute; top:9px; left:0; width:5px; height:5px; background:#374548 }
#counsel2022 .layerCont .listDot li .chkBoxArea { padding:0}
.imgDiagn .diagnArea .cropSwiper { padding:0; height:300px; overflow-y: auto; gap:10px}
.imgDiagn .diagnArea h4 { margin:0 !important; padding:12px 5px; border-radius: 10px 10px 0 0; font-size: 18px !important; font-weight: 700; background:#f6f6f6}
.imgDiagn .diagnArea h4 span { font-size:18px !important; font-weight: 400;}
.imgDiagn .diagnArea .chkBoxArea { display: flex; margin-bottom: 15px; padding:0}
.imgDiagn .diagnArea .chkBoxArea span { width:50%; margin:0}
.imgDiagn .diagnArea .chkBoxArea label { display: block; padding-left:0; border:1px solid #d7d7d7; border-radius: 0 0 10px 0; line-height:38px !important; cursor: pointer; background:#ebebeb}
.imgDiagn .diagnArea .chkBoxArea span:nth-of-type(1) label { border-radius: 0 0 0 10px;}
.imgDiagn .diagnArea .chkBoxArea label:before { display: none;}
.imgDiagn .diagnArea .chkBoxArea.radio input[type='radio']:checked+label { color:#fff; font-weight: 400; border-color:#80849d; background:#80849d}
.layerCont .imgDiagn { height:380px}
.layerCont .imgDiagn .imgThumb { overflow: hidden;}
.layerCont .imgDiagn .imgThumb img { width:auto; height:auto}
.layerCont .imgDiagn .diagnArea { padding-bottom:0}
.layerCont .imgDiagn .diagnArea .crop { margin-bottom:20px; padding:0 15px; font-size:15px !important; line-height: 50px !important; background:#ebebeb}
.layerCont .imgDiagn .diagnArea .crop strong { font-size:18px !important;}
.layerCont .imgDiagn .diagnArea ul { height:calc(100% - 70px)}
.layerCont .diseaseList li { width:235px}

.mb30 { margin-bottom: 30px !important;}

.tab_depth3 { display: inline-flex; border:1px solid #d7d7d7; border-radius: 10px; background:#ebebeb}
.tab_depth3 a { width:260px; line-height: 43px !important; text-align: center; }
.tab_depth3 a.active { color:#fff; font-weight: 700; border-radius: 10px; background: #80849d;}
.AIDiagn .tabS button { color:inherit; border-radius: 10px 10px 0 0; line-height: 39px !important; }
.AIDiagn .tabS:after,
.AIDiagn .tabS button.active,
.AIDiagn .picScroll { border-width:1px; border-color:#07a9d8}

/* 2024 06 13 추가 */
#main2020 .listDetail .photoSch .button.epmso{ position: absolute; right: 30px; bottom: 30px;}

/* 2024 06 17 */
.AIimagingWrap .imagingStepTab .tabBtn a{ position: relative;}
.AIimagingWrap .imagingStepTab .tabBtn a em{ display: block; position: absolute; left: -60%; top: -20px; padding: 5px; font-weight: 600; font-size: 18px !important}
.AIimagingWrap .imagingStepTab .tabBtn a em::after{ content: ''; display: inline-block; background: #fff url(../images/common/err.png) no-repeat; width: 44px; height: 43px; vertical-align: middle; margin-left: 8px; border-radius: 50%;}
.AIimagingWrap .imagingStepTab .tabArea02 .tabBtn a em{ left: auto; right: -60%;}
.AIimagingWrap .imagingStepTab .tabArea02 .tabBtn a em::before{ content: ''; display: inline-block; background: #fff url(../images/common/err.png) no-repeat; width: 44px; height: 43px; vertical-align: middle; margin-right: 8px; border-radius: 50%;}
.AIimagingWrap .imagingStepTab .tabArea02 .tabBtn a em::after{ display: none;}

.imgDiagn .diagnArea .chkBoxArea{ margin-bottom: 25px;}
.imgDiagn .diagnArea .chkBoxArea span{ position: relative;}
.imgDiagn .diagnArea .chkBoxArea span em{ position: absolute; z-index: 1; bottom: -10px; width: 80%; left: 10%; font-size: .85rem !important; background: rgba(255,255,255,.9); border-radius: 15px;}
.imgDiagn .diagnArea .chkBoxArea span em::before{ content: ''; display: inline-block; background: url(../images/common/err.png) no-repeat 0 0 / 17px auto; width: 17px; height: 17px; position: relative; top: 2px; margin-right: 3px;}

/* 2024 06 25 */
#footer .tel{ display: flex; gap: 40px; padding-left: 50px !important}
#footer .tel div:last-child{ position: relative;}
#footer .tel div:last-child::before{ content: ''; display: block; position: absolute; left: -20px; top: 0; width: 1px; height: 100%; background: #d7daee;}

/* 2024 07 04 */
.picScroll .imgLview{ position: relative;}
.picScroll .imgLview>p{ padding-top: 20px;}
.picScroll .imgLview>button{ bottom: 0; right: 0;}
.picScroll .imgLview>span{ position: absolute; left: 0; bottom: 13px; /* background: #f1fdff; */ line-height: 25px !important; padding: 5px 15px; border-radius: 5px; /* border: 1px solid #c6e2e7; */ color: #858585;}
.picScroll .imgLview>span strong{ margin-left: 5px; font-weight: 400; color: #323232}

/* 2024 08 16 */
#main2020 #container.midSList .midCenter .pestMidBox>div.counsel{ width: calc(100% - 390px - 215px);}
#main2020 #container.midSList .midCenter .pestMidBox .counsel ul li{ width: 33.33%}
#main2020 #container.midSList .midCenter .pestMidBox>a{ display: inline-block; height: 100%; width: 215px; overflow: hidden;}

/* 2025 01 08 header 화면크기 추가 */
.header_util { display:flex; align-items:center; gap:8px; margin-right:13px}
.header_util > li { position: relative; padding-right:9px;}
.header_util > li:before { content:""; position:absolute; right:0; top:9px; height:16px; border-left:1px solid #d8d8d8}
.header_util > li:last-child { padding-right:0;}
.header_util > li:last-child:before { display:none}
.header_util > li > a,
.header_util > li > button { display:flex; align-items:center; height:35px; border-radius:4px; transition:0.4s ease-in-out; color:rgba(255,255,255,.8); background:none;}
.header_util > li > button:after  {content:""; display:inline-block; margin-left:2px; width:16px; height:16px; background:url(../images/default/icon_arrow_bot.svg) center no-repeat; background-size:8px auto; transition:all .5s}
.header_util > li.active > button:after { transform:rotate(180deg)}

#main2020 .header_tp .innerDiv .drop_wrap { position: relative;}
#main2020 .header_tp .innerDiv .drop_wrap.active > .drop_menu { display:block}
#main2020 .header_tp .innerDiv .drop_wrap .drop_menu { display:none; position:absolute; left:50%; top:100%; margin-top:16px; min-width:128px; padding:8px; transform:translateX(-50%); border:1px solid #d8d8d8; border-radius:12px; background:#fff; z-index:11002; font-size:17px; box-shadow:0 4px 12px rgba(0,0,0,.12)}
#main2020 .header_tp .innerDiv .drop_wrap .drop_menu:before { content:""; position:absolute; left:50%; top:-11px; width:21px; height:12px; transform:translateX(-50%); background:url(../images/default/bg_top_arrow.svg); background-size:20px auto}
#main2020 .header_tp .innerDiv .drop_menu .drop_list > li > a { float: none; box-sizing: border-box; color:#1d1d1d; line-height: 1; display:flex; align-items:center; gap:8px; width:100%; min-height:48px; padding:8px 12px; border-radius:8px; white-space:nowrap; transition:all .2s}
#main2020 .header_tp .innerDiv .drop_menu .drop_list > li > a:hover,
#main2020 .header_tp .innerDiv .drop_menu .drop_list > li > a:focus { background:#edf1f5}
#main2020 .header_tp .innerDiv .drop_menu .drop_list > li > a:active { background:#cdd7e4}
#main2020 .header_tp .innerDiv .drop_menu .drop_list > li > a[target="_blank"]:after { margin-left:0 !important}
#main2020 .header_tp .innerDiv .drop_wrap.zoom_drop .drop_list a:before { content:'가'; display: inline-flex; align-items: center; justify-content: center; width:24px; height:24px; color:#555; border:1px solid #d8d8d8; border-radius: 4px; background:#fff }
#main2020 .header_tp .innerDiv .drop_wrap.zoom_drop .drop_list a.xsm:before { font-size: 15px; width:21px; height:21px}
#main2020 .header_tp .innerDiv .drop_wrap.zoom_drop .drop_list a.md:before { font-size: 19px; width:25px; height:25px}
#main2020 .header_tp .innerDiv .drop_wrap.zoom_drop .drop_list a.lg:before { font-size: 21px; width:27px; height:27px}
#main2020 .header_tp .innerDiv .drop_wrap.zoom_drop .drop_list a.xlg:before { font-size: 23px; width:30px; height:30px}
#main2020 .header_tp .innerDiv .drop_wrap.zoom_drop .drop_list a.active { color:#003675; font-weight: 700; background:#edf1f5}
#main2020 .header_tp .innerDiv .drop_wrap.zoom_drop .drop_list a.active:before { color:#fff; font-weight: 400; border-color:#003675; background:#003675} 
#main2020 .header_tp .innerDiv .drop_menu .drop_btm_btn { margin-top:8px; padding-top:8px; border-top:1px solid #d8d8d8; text-align: center;}
#main2020 .header_tp .innerDiv .drop_menu .drop_btm_btn .btn { width:100%; border:0; color:inherit; background:none; display: inline-flex; align-items: center; justify-content: center; gap:4px; padding:0 16px; height:36px; font-size: 15px;} 
#main2020 .header_tp .innerDiv .drop_menu .drop_btm_btn .btn:before { content:''; display: block; }
#main2020 .header_tp .innerDiv .drop_menu .drop_btm_btn .btn.ico_reset:before { width:16px; height: 16px; background:url(../images/default/ico_refresh_16.svg) no-repeat center; background-size: 16px;}
#main2020 .header_tp .innerDiv .drop_menu .drop_btm_btn .btn:hover { background:#edf1f5}

/* 2025 02 25 */
.disease_area .crop35 { width:47px; background-position:-381px -285px;}/*팥*/
.imgDiagn .cropImgList a i.crop35{ background-position: -365px -275px;}

/* 2025 03 10 AI 병해충 예측 */
#counsel2022.aiPredict .counselInfo:before{ background: url(../images/common/icon2025.png) no-repeat; width: 76px; height: 63px;}
#counsel2022.aiPredict .processInfo{ margin-bottom: 40px}
#counsel2022.aiPredict h2{ margin-bottom: 18px;}
#counsel2022.aiPredict .processInfo > ol{ display: flex; justify-content: space-between;}
#counsel2022.aiPredict .processInfo > ol > li{ width: calc(33.33% - 10px);}
#counsel2022.aiPredict .processInfo > ol > li strong{ display: flex; background: #fff; border: 1px solid #33363d; padding: .8rem 1.6rem; font-size: 19px; font-weight: 500; line-height: 150%;}

#counsel2022.aiPredict .processInfo > ol > li > div{ display: flex; flex-direction: row; justify-content: space-between; align-items: center; border: 1px solid #d7d7d7; border-top-width: 3px; border-radius: 0 0 10px 10px; height: 255px; overflow: hidden; position: relative; padding: .8rem .4rem; z-index: 1;}
#counsel2022.aiPredict .processInfo > ol > li > div::before{ content: ''; display: block; position: absolute; left: 0; top: 0; background: #fbfbfb; border-right: 1px solid #d7d7d7; width: 45%; height: 100%; z-index: -1;}
#counsel2022.aiPredict .processInfo > ol > li > div::after{ content: ''; display: block; position: absolute; left: calc(45% - 18px); top: calc(50% - 45px); background: url(../images/common/icon2025.png) no-repeat -93px 0; width: 65px; height: 90px; z-index: -1;}
#counsel2022.aiPredict .processInfo > ol > li:last-child > div::before, #counsel2022.aiPredict .processInfo > ol > li:last-child > div::after{ display: none;}
#counsel2022.aiPredict .processInfo > ol > li > div ul{ display: flex; flex-direction: column;}
#counsel2022.aiPredict .processInfo > ol > li > div ul li img, #counsel2022.aiPredict .processInfo > ol > li > div > img{ display: block; margin: 0 auto; max-width: 100%;}
#counsel2022.aiPredict .processInfo > ol > li > div .ulL{ width: 40%;  gap: 20px}
#counsel2022.aiPredict .processInfo > ol > li > div .ulL li{ font-size: 15px; text-align: center;}
#counsel2022.aiPredict .processInfo > ol > li > div .ulR{ width: 45%;}
#counsel2022.aiPredict .processInfo > ol > li > div .ulR li{ font-size: 17px; font-weight: 500; padding-left: 10px; position: relative;}
#counsel2022.aiPredict .processInfo > ol > li > div .ulR li:first-child{ padding-left: 0;}
#counsel2022.aiPredict .processInfo > ol > li > div .ulR li:first-child:before{ display: none;}
#counsel2022.aiPredict .processInfo > ol > li > div .ulR li:before{ content: ''; display: block; position: absolute; left: 0; top: 10px; width: 5px; height: 2px; !background: #000;}/*rjh*/
#counsel2022.aiPredict .processInfo > ol > li > div .ulR li img{ margin-bottom: 20px}
#counsel2022.aiPredict .processInfo > ol > li:last-child > div{ display: block;}
#counsel2022.aiPredict .processInfo > ol > li > div > p{ text-align: center; font-size: 19px; font-weight: 500; line-height: 150%; margin-top: 20px}

#counsel2022.aiPredict .predictInfoList{ display: flex; flex-direction: row; width: 100%; background: #fbfbfb; border-radius: 10px; border: 1px solid #d7d7d7; position: relative; margin-bottom: 40px}
#counsel2022.aiPredict .predictInfoList .listFour{ width: 55%; padding: 16px 20px; display: flex; justify-content: space-between;}
#counsel2022.aiPredict .predictInfoList .listFour > li{ width: 22%; display: flex; flex-direction: column; align-items: center; gap: 10px;}
#counsel2022.aiPredict .predictInfoList .listFour > li > button{ background: #fff; width: 100px; height: 100px; display: flex; flex-direction: column; align-items: center; border: 1px solid #9d9d9d; border-radius: 50%; font-size: 19px; font-weight: 500; padding: 0 0 10px;}
#counsel2022.aiPredict .predictInfoList .listFour > li > button > i{ display: block; margin: 10px auto 0; background: url(../images/common/iconCrop.png) no-repeat; transform: scale(80%);}
#counsel2022.aiPredict .predictInfoList .listFour > li.apple > button > i{ background-position: -255px -15px; width: 47px; height: 49px;}
#counsel2022.aiPredict .predictInfoList .listFour > li.chili > button > i{ background-position: -173px -14px; width: 48px; height: 46px;}
#counsel2022.aiPredict .predictInfoList .listFour > li.bean > button > i{ background-position: -814px -16px; width: 47px; height: 47px;}
#counsel2022.aiPredict .predictInfoList .listFour > li.rice > button > i{ background-position: -1054px -11px; width: 50px; height: 55px;}
#counsel2022.aiPredict .predictInfoList .listFour > li.active > button{ border: 2px solid #256ef4; color: #000}
#counsel2022.aiPredict .predictInfoList .listFour ul{ display: flex; flex-direction: column; gap: 5px; align-items: center; justify-content: center; width: 100%;}
#counsel2022.aiPredict .predictInfoList .listFour li li{ width: 100%;}
#counsel2022.aiPredict .predictInfoList .listFour li li button{ display: flex; width: 100%; border: 1px solid #d7d7d7; background: #f7f7f7; align-items: center; justify-content: center; padding: 5px 0; text-align: center;}
#counsel2022.aiPredict .predictInfoList .listFour li li.active button{ background: #fff; border-color: #256ef4; font-weight: 600;}
#counsel2022.aiPredict .predictInfoList .fourDtl{ width: 45%; margin: -1px -1px 0 0; height: calc(100% + 2px); border: 1px solid #256ef4; border-radius: 10px; position: absolute; right: 0; top: 0; background: #fff; display: flex; flex-direction: column;}
#counsel2022.aiPredict .predictInfoList .fourDtl > strong{ display: block; border-radius: 8px 8px 0 0; background: #256ef4; color: #fff; font-size: 19px; font-weight: 600; padding: 14px 20px;}
#counsel2022.aiPredict .predictInfoList .fourDtl > div{ height: calc(100% - 15px - 38px); padding: 15px 15px 28px;}
#counsel2022.aiPredict .predictInfoList .fourDtl .predictCont{ height: 100%; line-height: 160%; overflow-y: auto;}
#counsel2022.aiPredict .predictInfoList .fourDtl .btnArea{ position: absolute; right: 20px; top: 12px; margin: 0; display: flex;}
#counsel2022.aiPredict .predictInfoList .fourDtl .btnArea button{ font-size: 0; padding: 4px; background: transparent;}
#counsel2022.aiPredict .predictInfoList .fourDtl .btnArea button::before{ content: ''; display: block; width: 10px; height: 10px; border-radius: 50%; !background: #fff;}/*rjh*/

#counsel2022.aiPredict .predictList{ position: relative; padding: 12px 20px; margin-bottom: 40px; z-index: 1;}
#counsel2022.aiPredict .predictList::before{ content: ''; display: block; position: absolute; left: 0; top: 0; width: 100%; height: 70px; background: #256ef4; border-radius: 10px; z-index: -1}
#counsel2022.aiPredict .predictList ul{ display: flex; flex-direction: row; gap: 10px;}
#counsel2022.aiPredict .predictList ul li{ display: flex; flex-direction: row; gap: 10px}
#counsel2022.aiPredict .predictList > ul > li > button{ background: #fff; width: 110px; height: 110px; display: flex; flex-direction: column; align-items: center; border: 1px solid #9d9d9d; border-radius: 50%; font-size: 19px; font-weight: 500; padding: 0 0 10px;}
#counsel2022.aiPredict .predictList > ul li > button > i{ display: block; margin: 10px auto; background: url(../images/common/iconCrop.png) no-repeat;}
#counsel2022.aiPredict .predictList > ul li.apple > button > i{ background-position: -255px -15px; width: 47px; height: 49px;}
#counsel2022.aiPredict .predictList > ul li.chili > button > i{ background-position: -173px -14px; width: 48px; height: 46px;}
#counsel2022.aiPredict .predictList > ul li.bean > button > i{ background-position: -814px -16px; width: 47px; height: 47px;}
#counsel2022.aiPredict .predictList > ul li.rice > button > i{ background-position: -1054px -11px; width: 50px; height: 55px;}
#counsel2022.aiPredict .predictList > ul li.active > button{ border: 2px solid #256ef4; color: #000}
#counsel2022.aiPredict .predictList ul ul{ gap: 5px; display: none;}
#counsel2022.aiPredict .predictList > ul li.active ul{ display: flex; margin-right: 20px;}
#counsel2022.aiPredict .predictList li li button{ height: 45px; border-radius: 6px; background: #b1cefb; text-align: center; min-width: 100px; padding: 0 10px;}
#counsel2022.aiPredict .predictList li li.active button{ border: 0; background: #fff; font-weight: 600;}

#counsel2022.aiPredict .aipredictDtl{ display: flex; gap: 20px; margin-bottom: 18px}
#counsel2022.aiPredict .aipredictDtl .aipredictMap{ width: 480px; flex-shrink: 0; position: relative; background: #9ec4d7; border-radius: 10px; overflow: hidden;}
#counsel2022.aiPredict .aipredictDtl .aipredictMap .mapArea{ min-height: 600px;}
#counsel2022.aiPredict .aipredictDtl .aipredictMap .schArea{ position: absolute; left: 0; top: 0; width: 100%; border: 1px solid #256ef4; border-radius: 10px; z-index: 1; display: flex; flex-direction: column; overflow: hidden;}
#counsel2022.aiPredict .aipredictDtl .aipredictMap .formA{ background: rgba(255,255,255,.95); padding: 10px 50px;}
#counsel2022.aiPredict .aipredictDtl .aipredictMap .formA label{ display: block; margin-bottom: 6px; font-size: 14px}
#counsel2022.aiPredict .aipredictDtl .aipredictMap .formA input[type='text']{ width: calc(100% - 75px); height: 40px; border: 1px solid #d7d7d7; border-radius: 0; padding-left: 10px}
#counsel2022.aiPredict .aipredictDtl .aipredictMap .formA button{ background: #33363d; color: #fff; height: 40px; width: 75px; text-align: center; margin-left: -4px;}
#counsel2022.aiPredict .aipredictDtl .aipredictMap .areaChk{ background: rgba(51,54,61,.95); padding: 10px 50px 16px;}
#counsel2022.aiPredict .aipredictDtl .aipredictMap .areaChk input[type='radio']{ appearance: none; border: max(2px, 0.1em) solid #dbdbdb; border-radius: 50%; width: 20px; height: 20px; transition: border 0.5s ease-in-out;}
#counsel2022.aiPredict .aipredictDtl .aipredictMap .areaChk input[type='radio']:checked{ border: 6px solid #fff;}
#counsel2022.aiPredict .aipredictDtl .aipredictMap .areaChk label{ color: #fff; margin-right: 20px;}
#counsel2022.aiPredict .aipredictDtl .aipredictMap .areaChk input[type='radio']:checked + label{ font-weight: 600;}
#counsel2022.aiPredict .aipredictDtl .aipredictCont{ width: 100%; display: flex; flex-direction: column;}
#counsel2022.aiPredict .aipredictDtl .calendarBox{ display: flex; border: 1px solid #256ef4; border-radius: 10px 10px 0 0; padding: 12px; flex-direction: row; gap: 12px}
#counsel2022.aiPredict .aipredictDtl .calendarBox .yearA, #counsel2022.aiPredict .aipredictDtl .calendarBox .monthA{ display: flex; flex-direction: column; gap: 10px}
#counsel2022.aiPredict .aipredictDtl .calendarBox .yearA{ width: 45%;}
#counsel2022.aiPredict .aipredictDtl .calendarBox .yearA > ul{ display: flex; gap: 5px; flex-wrap: wrap; justify-content: space-evenly; height: calc(100% - 40px);}
#counsel2022.aiPredict .aipredictDtl .calendarBox .yearA > ul > li{ width: calc(25% - 5px); display: flex;}
#counsel2022.aiPredict .aipredictDtl .calendarBox .yearA > ul > li a{ width: 100%; display: flex; justify-content: center; align-items: center; position: relative; border-radius: 4px; font-size: 15px;}
#counsel2022.aiPredict .aipredictDtl .calendarBox .monthA{ width: 55%; gap: 8px}
#counsel2022.aiPredict .aipredictDtl .calendarBox .monthA .tp_selChk{ display: flex; justify-content: space-between;}
#counsel2022.aiPredict .aipredictDtl .calendarBox .monthA .tp_selChk button{ background: #fff; border: 1px solid #256ef4; border-radius: 4px; padding: 0 12px; font-size: 14px}
#counsel2022.aiPredict .aipredictDtl .calendarBox select{ height: 40px; border: 1px solid #d7d7d7}
#counsel2022.aiPredict .aipredictDtl .predictDtlBox{ display: flex; border: 1px solid #d7d7d7; border-top: 3px solid #ececec; border-radius: 0 0 10px 10px; padding: 12px; background: #fbfbfb; flex-direction: column; height: 100%;}
#counsel2022.aiPredict .aipredictDtl .calendarBox .calendarA > table{ width: 100%; border-collapse: separate; border-spacing: 2px;}
#counsel2022.aiPredict .aipredictDtl .calendarBox .calendarA > table th, #counsel2022.aiPredict .aipredictDtl .calendarBox .calendarA > table td a{ border-radius: 4px; font-size: 13px; text-align: center;}
#counsel2022.aiPredict .aipredictDtl .calendarBox .calendarA > table th{ background: #256ef4; color: #fff; height: 23px;}
#counsel2022.aiPredict .aipredictDtl .calendarBox .calendarA > table td{ width: calc(100% / 7);}
#counsel2022.aiPredict .aipredictDtl .calendarBox .calendarA > table td a{ display: flex; justify-content: center; align-items: center; height: 28px; position: relative}
#counsel2022.aiPredict .aipredictDtl .calendarBox .yearA > ul > li a, #counsel2022.aiPredict .aipredictDtl .calendarBox .calendarA > table td a{ border: 2px solid transparent}/*rjh*/
#counsel2022.aiPredict .aipredictDtl .safe{ border-color: #A9DAB4 !important;}
#counsel2022.aiPredict .aipredictDtl .caution{ border-color: #FFC95C !important;}
#counsel2022.aiPredict .aipredictDtl .warning{ border-color: #F48771 !important;}
#counsel2022.aiPredict .aipredictDtl .pestC{border-color: #B22626 !important; background: url(../images/common/ic_pest.png) no-repeat 100% 0; }/*rjh*/
#counsel2022.aiPredict .aipredictDtl .calendarBox .yearA > ul > li .pestC{ background-size: 23px auto;}
#counsel2022.aiPredict .aipredictDtl .calendarBox .calendarA > table td a.pestC{ background-size: 16px auto;}
#counsel2022.aiPredict .aipredictDtl .calendarBox .yearA > ul > li a.active, #counsel2022.aiPredict .aipredictDtl .calendarBox .calendarA > table td a.active{ background-color: #cae4ff;}/*rjh*/
#counsel2022.aiPredict .aipredictDtl .predictDtlBox > strong{ display: block; font-size: 19px; font-weight: 500; padding: 0 20px 10px; text-align: center; border-bottom: 1px solid #d7d7d7}
#counsel2022.aiPredict .aipredictDtl .predictDtlBox > div{ background: #fff; padding: 10px 0; overflow-y: auto; height: 330px;}
#counsel2022.aiPredict .aipredictDtl .predictDtlBox ul{ display: flex; flex-direction: column; gap: 15px;}
#counsel2022.aiPredict .aipredictDtl .predictDtlBox ul li{ display: flex; flex-direction: row; gap: 15px;}
#counsel2022.aiPredict .aipredictDtl .predictDtlBox ul li span{ display: flex; flex-shrink: 0; width: 105px; justify-content: center; align-items: center; height: 50px; border: 2px solid transparent; border-radius: 4px;}/*rjh*/
#counsel2022.aiPredict .aipredictDtl .predictDtlBox ul li span.pestC{ background-position: -1px 50%; background-size: 20px auto;}
#counsel2022.aiPredict .aipredictDtl .predictDtlBox ul li p{ width: 100%; line-height: 150%;}

#counsel2022.aiPredict .tab_btn{ margin: 0}
#counsel2022.aiPredict .tab_btn li{ position: relative;}
#counsel2022.aiPredict .tab_btn li button{ position: absolute; right: 25%; top: 33%; background: transparent; font-size: 0;}
#counsel2022.aiPredict .tab_btn li button::before{ content: ''; display: inline-block; background: url(../images/common/icon2025.png) no-repeat -171px 0; width: 17px; height: 17px;}
#counsel2022.aiPredict .tab_btn li a{ border-color: #cecece; color: #363c48; font-size: 16px;}
#counsel2022.aiPredict .tab_btn li:first-child a{ border-radius: 10px 0 0;}
#counsel2022.aiPredict .tab_btn li:last-child a{ border-radius: 0 10px 0 0;}
#counsel2022.aiPredict .tab_btn li.active a{ background: #b1cefb; border-color: #b1cefb; font-weight: 600;}
#counsel2022.aiPredict .tab_con .tab_content{ border: 1px solid #cecece; border-top: 0; background: #fbfbfb; padding: 10px; border-radius: 0 0 10px 10px;}
#counsel2022.aiPredict .tab_con .tab_content > div{ background: #fff; margin: 0; padding: 10px 0 20px;}
#counsel2022.aiPredict .tab_con .tab_content .graphDesc{ border-top: 1px dashed #363c48; overflow-y: auto; height: 150px; line-height: 160%;}
#counsel2022.aiPredict .tab_con .tab_content .graphDesc ul{ display: flex; flex-direction: column; gap: 15px; margin: 18px 0 0}
#counsel2022.aiPredict .tab_con .tab_content .graphDesc ul li{ display: flex; flex-direction: row; gap: 15px;}
#counsel2022.aiPredict .tab_con .tab_content .graphDesc ul li span{ display: flex; flex-shrink: 0; width: 105px; justify-content: center; align-items: center; height: 30px; border-radius: 4px;}
#counsel2022.aiPredict .tab_con .tab_content .graphDesc ul li span.today{ background: #b1cefb;}
#counsel2022.aiPredict .tab_con .tab_content .graphDesc ul li span.week{ background: #86affa;}
#counsel2022.aiPredict .tab_con .tab_content .graphDesc ul li p{ width: 100%; line-height: 150%;}

#counsel2022.aiPredict .tab_con .tab_content .weeklyArea > ul{ display: flex;}
#counsel2022.aiPredict .tab_con .tab_content .weeklyArea > ul > li{ display: flex; flex-wrap: wrap; align-content: center; flex-direction: column; gap: 8px; width: calc(100% / 7); border-right: 1px solid #f2f3f3; text-align: center;}
#counsel2022.aiPredict .tab_con .tab_content .weeklyArea > ul > li:last-child{ border: 0}
#counsel2022.aiPredict .tab_con .tab_content .weeklyArea .cell_date{ font-size: 14px; color: #77777a; letter-spacing: 0;}
#counsel2022.aiPredict .tab_con .tab_content .weeklyArea .cell_date strong{ display: block; font-size: 17px; color: #545454}
#counsel2022.aiPredict .tab_con .tab_content .weeklyArea .cell_weather i{ display: block; width: 50px; height: 41px; margin: 0 auto 16px; font-size: 0; background: url(../images/common/weather_2022.png) no-repeat;}
#counsel2022.aiPredict .tab_con .tab_content .weeklyArea .cell_weather i.wt1{ background-position: 50% 0;}
#counsel2022.aiPredict .tab_con .tab_content .weeklyArea .cell_weather i.wt2{ background-position: 50% -41px;}
#counsel2022.aiPredict .tab_con .tab_content .weeklyArea .cell_weather i.wt3{ background-position: 50% -82px;}
#counsel2022.aiPredict .tab_con .tab_content .weeklyArea .cell_weather i.wt4{ background-position: 50% -123px;}
#counsel2022.aiPredict .tab_con .tab_content .weeklyArea .cell_weather i.wt5{ background-position: 50% -164px;}
#counsel2022.aiPredict .tab_con .tab_content .weeklyArea .cell_weather i.wt6{ background-position: 50% -205px;}
#counsel2022.aiPredict .tab_con .tab_content .weeklyArea .cell_weather i.wt7{ background-position: 50% -246px;}
#counsel2022.aiPredict .tab_con .tab_content .weeklyArea .cell_weather i.wt8{ background-position: 50% -287px;}
#counsel2022.aiPredict .tab_con .tab_content .weeklyArea .cell_weather i.wt9{ background-position: 50% -328px;}
#counsel2022.aiPredict .tab_con .tab_content .weeklyArea .cell_weather i.wt10{ background-position: 50% -369px;}
#counsel2022.aiPredict .tab_con .tab_content .weeklyArea .cell_chart{ border: 2px solid transparent; border-radius: 4px; height: 30px; width: 85%;}
#counsel2022.aiPredict .tab_con .tab_content .weeklyArea .cell_chart.safe{ border-color: #A9DAB4 !important;}
#counsel2022.aiPredict .tab_con .tab_content .weeklyArea .cell_chart.caution{ border-color: #FFC95C !important;}
#counsel2022.aiPredict .tab_con .tab_content .weeklyArea .cell_chart.warning{ border-color: #F48771 !important;}
#counsel2022.aiPredict .tab_con .tab_content .weeklyArea .cell_chart.pestC{ border-color: #B22626 !important; background: url(../images/common/ic_pest.png) no-repeat 5% 50%; background-size: 20px auto; padding-left: 10px;}/*rjh*/