/**
 * @author Calliopus
 */


@charset 'utf-8';


/* Page */

body {background: #f5f7fa;}

.page {box-sizing: border-box; position: relative; min-width: 1500px; padding: 70px 0 0 48px; line-height: 1.65; font-family: 'S-Core Dream', sans-serif; font-size: 12px; color: #000;}
.page.gnb-active {padding-left: 190px;}
.page.gnb-sub {padding-left: 330px;}


/* Header */

.header {position: fixed; top: 0; left: 0; width: 100%; height: 70px; background: #fff; box-shadow: 0px 4px 10px 0 rgba(0, 0, 0, 0.07); z-index: 2000;}

.header .logo {position: absolute; top: 0; left: 0; width: 70px; height: 70px; background: url(../img/common/imgLogo.png) no-repeat; line-height: 0; font-size: 0; transition: opacity 0.15s;}
.header .logo:hover {opacity: 0.8;}

.header .title {position: absolute; top: 21px; left: 96px; line-height: 29px; font-size: 21px; letter-spacing: 1.05px;}
.header .title .org {font-weight: 600; color: #2f74eb;}
.header .title .org,
.header .title .website {vertical-align: top;}
.header .title .website {font-weight: 400; color: #232323;}
.header .title .website:before {content: "\007c\00a0"; display: inline;}

.header .user {position: absolute; top: 10px; right: 35px;}

.header .user .func {position: absolute; top: 8px; right: 52px;}

.header .user .func .name {position: relative; height: 21px; padding: 7px; padding-left: 23px; white-space: nowrap; line-height: 1.4; font-size: 15px; font-weight: 500; color: #262626; transition: color 0.15s;}
.header .user .func .name:before {content: ""; display: block; position: absolute; top: 15px; left: 7px; width: 10px; height: 5px; background: url(../img/common/objSelect.png) no-repeat 0 100%;}
.header .user .func .name:hover {color: #2f74eb;}
.header .user .func .name:hover:before {background-position: 100% 100%;}

.header .user .func .link {display: none; position: absolute; top: 35px; left: 7px; min-width: 93px; border-radius: 10px; background-color: #fff; box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16); z-index: 20;}
.header .user .func .link:before,
.header .user .func .link:after {content: ""; display: block; height: 7px;}
.header .user .func .link li a {display: block; padding: 0 11px; line-height: 30px; font-size: 12px; color: #000; transition: background 0.15s;}
.header .user .func .link li a:hover {background: #f5f5f5;}

.header .user .func.on .name:before {background-position: 0 0;}
.header .user .func.on .name:hover:before {background-position: 100% 0;}
.header .user .func.on .link {display: block;}

.header .user .portrait,
.header .user .portrait:before {box-sizing: border-box; position: absolute; top: 0; right: 0; width: 52px; height: 52px; border-radius: 52px; overflow: hidden;}
.header .user .portrait:before {content: ""; display: block; border: solid 3px #2f74eb; background: #f5f7fa url(../img/common/icnUser.png) no-repeat 50%;}
.header .user .portrait img {position: relative;}

@media (max-width: 720px) {
	.header .title .org,
	.header .title .website:before {display: none;}
	.header .title .website {font-weight: 600;}
}


/* GNB */

.gnb {position: fixed; top: 70px; left: 0; width: 48px; height: calc(100vh - 70px); z-index: 1000;}
.gnb:after {content: ""; display: block; clear: both;}

.gnb .spread {box-sizing: border-box; position: absolute; top: 34px; left: 12px; width: 73px; height: 43px; border: solid 2px #f5f5f5; border-radius: 43px; background: #fff; box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.07); z-index: 10; text-align: center; line-height: 39px; font-size: 15px; font-weight: 700; color: #6f758d; transition: color 0.15s;}
.gnb .spread:before,
.gnb .spread:after {content: ""; width: 12px; height: 14px; margin-top: 13px; background: url(../img/common/icnGnbToggle.png) no-repeat 100% 0; vertical-align: top;}
.gnb .spread:before {display: none; margin-right: 5px; background-position: 0 0;}
.gnb .spread:after {display: inline-block; margin-left: 5px; background-position: 100% 0;}
.gnb .spread:hover {color: #2f74eb;}
.gnb .spread:hover:before {background-position: 0 100%;}
.gnb .spread:hover:after {background-position: 100% 100%;}

.gnb .nav {width: inherit; height: inherit; background: #2f74eb; overflow-x: hidden;}
.gnb .nav .pack {display: none; box-sizing: border-box; width: 190px; height: inherit; padding: 10px 0;}
.gnb .nav .pack .mCSB_inside > .mCSB_container {margin-right: 0;}

.gnb .nav .label {padding: 32px 0 0 22px; line-height: 1.4; font-size: 17px; font-weight: 700; color: #afc9f6; letter-spacing: 0.5px;}

.gnb .nav .list {margin-top: 12px;}
.gnb .nav .list:first-child {margin-top: 0;}
.gnb .nav .list li a {display: block; position: relative; padding: 11px 10px 12px 34px; line-height: 21px; font-size: 15px; color: #fff; letter-spacing: 0.6px; transition: background 0.15s;}
.gnb .nav .list li a:before {content: ""; display: inline-block; position: absolute; top: 18px; left: 22px; width: 7px; height: 7px; border-radius: 7px; background: #fff; vertical-align: top;}
.gnb .nav .list li a:hover,
.gnb .nav .list li.on a {background: #2259b9;}

.gnb.on {width: 190px;}
.gnb.on .spread {left: 154px;}
.gnb.on .spread:before {display: inline-block;}
.gnb.on .spread:after {display: none;}
.gnb.on .nav .pack {display: block;}

.gnb.has-sub .nav {position: relative; width: 190px;}
.gnb.has-sub .nav,
.gnb.has-sub .nav-sub {float: left;}
.gnb.has-sub .nav-sub {width: 140px; height: inherit; background: #00286e; overflow-x: hidden;}
.gnb.has-sub .nav-sub .pack {display: none; box-sizing: border-box; width: 140px; height: inherit; padding: 10px 0;}
.gnb.has-sub .nav-sub .pack .mCSB_inside > .mCSB_container {margin-right: 0;}

.gnb.has-sub .nav-sub .list {padding-top: 94px;}
.gnb.has-sub .nav-sub .list li {margin-top: 6px;}
.gnb.has-sub .nav-sub .list li:first-child {margin-top: 0;}
.gnb.has-sub .nav-sub .list li a {display: block; position: relative; padding: 13px 10px 13px 33px; line-height: 18px; font-size: 13px; color: rgba(255, 255, 255, 0.52); letter-spacing: 0.5px; transition: color 0.15s;}
.gnb.has-sub .nav-sub .list li a:before {content: ""; display: inline-block; position: absolute; top: 16px; left: 21px; width: 6px; height: 11px; background: url(../img/common/icnNavSub.png) no-repeat 0 0;}
.gnb.has-sub .nav-sub .list li a:hover,
.gnb.has-sub .nav-sub .list li.on a {color: #fff;}
.gnb.has-sub .nav-sub .list li a:hover:before,
.gnb.has-sub .nav-sub .list li.on a:before {background-position: 100% 0;}

.gnb.has-sub.on {width: 330px;}
.gnb.has-sub.on .spread {left: 294px;}
.gnb.has-sub.on .nav {box-shadow: 5px 0 10px 0 rgba(0, 0, 0, 0.1);}
.gnb.has-sub.on .nav-sub .pack {display: block;}


/* Container */

.container {min-height: calc(100vh - 70px);}


/* County List */

.item-county {position: relative; width: 107px; height: 100px; padding: 15px 6px 16px; text-align: center; line-height: 0; font-size: 0;}
.item-county > .link,
.item-county > .info {box-sizing: border-box; position: relative; width: inherit; height: inherit;}
.item-county > .link {z-index: 40;}
.item-county > .info {position: absolute; top: 39px; left: 6px; z-index: 10;}
.item-county > .image {content: ""; display: block; position: absolute; top: -67px; left: -64px; width: 247px; height: 265px; background: url(../img/common/bgItemCounty1.png) no-repeat 50%; transition: background 0.3s;}

.item-county > .info .name {position: relative; line-height: 1; font-size: 14px; font-weight: 600; color: #484848;}
.item-county > .info .value {display: inline-block; position: relative; margin-top: 9px; padding: 4px; border: solid 1px #dfdfdf; border-radius: 34px; background: #fff;}
.item-county > .info .value > span {width: 24px; height: 24px; margin-left: 3px; border-radius: 24px; background: #04cf5c;}
.item-county > .info .value > span:first-child {margin-left: 0 !important;}

.item-county.active > .info .name {color: #fff;}
.item-county.active > .info .value > span > em {display: block; line-height: 24px; font-size: 15px; font-weight: 600; color: #fff;}
.item-county.active > .info .value > span:first-child {background: #77a9ff;}
.item-county.active > .info .value > span:last-child {background: #ff5c56;}

.item-county.active > .image {background-image: url(../img/common/bgItemCounty2.png);}

.item-county > .link:hover + .info,
.item-county.on > .info {top: 24px;}
.item-county > .link:hover + .info {z-index: 35;}
.item-county.on > .info {z-index: 25;}
.item-county > .link:hover + .info .name,
.item-county.on > .info .name {font-size: 22px;}
.item-county > .link:hover + .info .value,
.item-county.on > .info .value {margin-top: 18px; padding: 5px; border-radius: 50px;}
.item-county > .link:hover + .info .value > span,
.item-county.on > .info .value > span {width: 38px; height: 38px; margin-left: 4px; border-radius: 38px;}
.item-county.active > .link:hover + .info .value > span > em,
.item-county.active.on > .info .value > span > em {line-height: 38px; font-size: 22px;}

.item-county > .link:hover + .info + .image,
.item-county.on > .image {background-image: url(../img/common/bgItemCounty1On.png);}
.item-county > .link:hover + .info + .image {z-index: 30;}
.item-county.on > .image {z-index: 20;}
.item-county.active > .link:hover + .info + .image,
.item-county.active.on > .image {background-image: url(../img/common/bgItemCounty2On.png);}


/* Layout : Main */

.layout-main {padding-bottom: 50px; background: #f5f7fa;}

.layout-main .area-head {background: #fff;}
.layout-main .area-head .crop-select,
.layout-main .area-head .crop-detail {box-sizing: border-box; position: relative; border-bottom: solid 2px #e8e8e8;}

.layout-main .area-head .crop-select {height: 105px;}
.layout-main .area-head .crop-select:after {content: ""; display: block; clear: both;}

.layout-main .area-head .crop-select .text {float: left; padding: 28px 0 0 68px; line-height: 43px; font-size: 31px; font-weight: 600;}
.layout-main .area-head .crop-select .text .label {color: #262626;}
.layout-main .area-head .crop-select .text .label,
.layout-main .area-head .crop-select .text .select {display: inline-block; vertical-align: top;}
.layout-main .area-head .crop-select .text .select {position: relative; z-index: 30;}

.layout-main .area-head .crop-select .text .select .current {position: relative; padding: 0 26px 0 4px; vertical-align: top; color: #2f74eb;}
.layout-main .area-head .crop-select .text .select .current:after {content: ""; display: block; position: absolute; top: 0; right: 0; width: 17px; height: 43px; background: url(../img/common/icnSelectLG.png) no-repeat 0 50%;}
.layout-main .area-head .crop-select .text .select .current:hover:after,
.layout-main .area-head .crop-select .text .select.on .current:after {background-position: 100% 50%;}

.layout-main .area-head .crop-select .text .select .list {position: absolute; top: 32px; right: 8px; z-index: 10;}
.layout-main .area-head .crop-select .text .select .list ul {display: none; position: absolute; top: 0; left: 0; padding: 0 6px; border-radius: 10px; background: #fff; box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16); line-height: 28px; font-size: 13px; font-weight: 400; color: #9c9c9c;}
.layout-main .area-head .crop-select .text .select .list ul:before,
.layout-main .area-head .crop-select .text .select .list ul:after {content: ""; display: block; height: 6px;}
.layout-main .area-head .crop-select .text .select .list li {margin-top: 4px;}
.layout-main .area-head .crop-select .text .select .list li:first-child {margin-top: 0;}
.layout-main .area-head .crop-select .text .select .list li > a {box-sizing: border-box; display: block; position: relative; min-width: 74px; height: 28px; padding: 0 27px 0 9px; border-radius: 28px; white-space: nowrap; transition: background 0.15s, font-weight 0.15s, color 0.15s;}
.layout-main .area-head .crop-select .text .select .list li > a:after {content: ""; display: block; position: absolute; top: 9px; right: 9px; width: 10px; height: 10px; border-radius: 10px; background: #dcdcdc; transition: background 0.15s;}
.layout-main .area-head .crop-select .text .select .list li > a:hover,
.layout-main .area-head .crop-select .text .select .list li.on > a {background: #f5f5f5; font-weight: 500; color: #313131;}
.layout-main .area-head .crop-select .text .select .list li.on > a:after {background: #2f74eb;}
.layout-main .area-head .crop-select .text .select.on .list {display: block;}

.layout-main .area-head .crop-select .image {float: left; padding: 14px 0 0 49px; line-height: 0; font-size: 0;}
.layout-main .area-head .crop-select .image:after {content: ""; display: block; clear: both;}
.layout-main .area-head .crop-select .image li {float: left; box-sizing: border-box; width: 77px; height: 77px; margin-left: 13px; padding: 2px; border: solid 3px transparent; border-radius: 77px; text-align: center; transition: border-color 0.15s;}
.layout-main .area-head .crop-select .image li:first-child {margin-left: 0;}
.layout-main .area-head .crop-select .image li > a {display: block; border-radius: 67px; overflow: hidden;}
.layout-main .area-head .crop-select .image li > a,
.layout-main .area-head .crop-select .image li > a > img {width: 67px; height: 67px;}
.layout-main .area-head .crop-select .image li:hover,
.layout-main .area-head .crop-select .image li.on {border-color: #2f74eb;}

.layout-main .area-head .crop-detail {height: 85px; padding-left: 57.5%;}
.layout-main .area-head .crop-detail .target,
.layout-main .area-head .crop-detail .count {box-sizing: border-box; height: inherit;}

.layout-main .area-head .crop-detail .target {position: absolute; top: 0; left: 0; width: 57.5%; height: inherit; padding: 22px 0 0 69px; border-right: solid 2px #e8e8e8; line-height: 0; font-size: 0;}
.layout-main .area-head .crop-detail .target .label {margin-right: 18px; line-height: 41px; font-size: 20px; font-weight: 600; color: #262626;}
.layout-main .area-head .crop-detail .target .value {padding: 0 18px; border-radius: 41px; background: #2f74eb; line-height: 41px; font-size: 20px; color: #fff;}
.layout-main .area-head .crop-detail .target .value + .value {margin-left: 11px;}

.layout-main .area-head .crop-detail .target .value.tag {color: #262626;}
.layout-main .area-head .crop-detail .target .value.tag.blue {background: #cfe1ff;}
.layout-main .area-head .crop-detail .target .value.tag.red {background: #fdeeed;}

.layout-main .area-head .crop-detail .count {padding: 12px 0 0 18px;}
.layout-main .area-head .crop-detail .count:after {content: ""; display: block; clear: both;}
.layout-main .area-head .crop-detail .count dl {float: left;}
.layout-main .area-head .crop-detail .count dl + dl {margin-left: 23px;}
.layout-main .area-head .crop-detail .count dl:after {content: ""; display: block; clear: both;}
.layout-main .area-head .crop-detail .count dt,
.layout-main .area-head .crop-detail .count dd {float: left;}
.layout-main .area-head .crop-detail .count dd {margin-left: 12px;}
.layout-main .area-head .crop-detail .count dt > a,
.layout-main .area-head .crop-detail .count dd > a {box-sizing: border-box; display: block; width: 58px; height: 58px; border-radius: 58px; text-align: center; transition: border 0.15s, background 0.15s, color 0.15s;}
.layout-main .area-head .crop-detail .count dt > a {line-height: 54px; font-size: 17px; font-weight: 600;}
.layout-main .area-head .crop-detail .count dd > a {padding-top: 8px; cursor: default;}

.layout-main .area-head .crop-detail .count dd .value {line-height: 25px; font-size: 19px;}
.layout-main .area-head .crop-detail .count dd .value,
.layout-main .area-head .crop-detail .count dd .label {display: block; font-weight: 600; /* color: #1e1e1e; */ color: #fff;}
.layout-main .area-head .crop-detail .count dd .label {line-height: 0; font-size: 0;}
.layout-main .area-head .crop-detail .count dd .label > em {line-height: 15px; font-size: 12px;}

.layout-main .area-head .crop-detail .count dl dt > a {border: solid 2px #c5c5c5; background: #fff; color: #c5c5c5;}
.layout-main .area-head .crop-detail .count dl dt > a:hover {background: #c5c5c5; color: #fff;}
.layout-main .area-head .crop-detail .count dl.on dt > a {border-color: #727272; background: #727272; color: #fff;}

.layout-main .area-head .crop-detail .count dl dd > a {background: #b1ebb4;}
.layout-main .area-head .crop-detail .count dl dt + dd.active > a {background: #9abeff;}
.layout-main .area-head .crop-detail .count dl dt + dd + dd.active > a {background: #ff9a95;}
.layout-main .area-head .crop-detail .count dl.on dd > a {background: #04cf5c;}
.layout-main .area-head .crop-detail .count dl.on dt + dd.active > a {background: #77a9ff;}
.layout-main .area-head .crop-detail .count dl.on dt + dd + dd.active > a {background: #ff5c56;}

/* .layout-main .area-head .crop-detail .count dl.blue dt > a {border: solid 2px #77a9ff; color: #3c81f6;}
.layout-main .area-head .crop-detail .count dl.blue dt > a:hover {background: #cedffd;}
.layout-main .area-head .crop-detail .count dl.blue dd > a {background: #e9f1fd;}
.layout-main .area-head .crop-detail .count dl.blue.on dt > a {border-color: #3c81f6; background: #3c81f6; color: #fff;}
.layout-main .area-head .crop-detail .count dl.blue.on dd > a {background: #96b9f5;}

.layout-main .area-head .crop-detail .count dl.red dt > a {border: solid 2px #eb5c52; color: #ec3f33;}
.layout-main .area-head .crop-detail .count dl.red dt > a:hover {background: #facfcc;}
.layout-main .area-head .crop-detail .count dl.red dd > a {background: #fdeeed;}
.layout-main .area-head .crop-detail .count dl.red.on dt > a {border-color: #ec3f33; background: #ec3f33; color: #fff;}
.layout-main .area-head .crop-detail .count dl.red.on dd > a {background: #f39d97;} */

.layout-main .area-body {position: relative; min-height: 760px; padding-left: 57.5%;}
.layout-main .area-body .county-select,
.layout-main .area-body .county-detail {box-sizing: border-box; min-height: inherit;}

.layout-main .area-body .county-select {position: absolute; top: 0; left: 0; width: 57.5%; height: inherit; padding: 34px 0 0 69px;}

.layout-main .area-body .county-select .title {position: relative;}
.layout-main .area-body .county-select .title .label {line-height: 31px; font-size: 20px; font-weight: 600; color: #262626;}
.layout-main .area-body .county-select .title .value {margin-left: 8px; padding: 0 14px; border: solid 2px #2f74eb; border-radius: 35px; line-height: 31px; font-size: 18px; font-weight: 600; color: #2f74eb;}

.layout-main .area-body .county-select .title .select {display: inline-block; position: absolute; top: -8px; left: 210px; min-width: 120px; border-radius: 5px; vertical-align: top; z-index: 50;}
.layout-main .area-body .county-select .title .select:first-child {margin-left: 0;}

.layout-main .area-body .county-select .title .select .select-button {box-sizing: border-box; display: inline-block; position: relative; min-width: inherit; height: 45px; padding: 10px 44px 10px 18px; border: solid 1px #ddd; border-radius: 5px; background: #fff;}
.layout-main .area-body .county-select .title .select .select-button .current {white-space: nowrap; line-height: 23px; font-size: 16px; font-weight: 500; color: #000;}
.layout-main .area-body .county-select .title .select .select-button:after {content: ""; display: block; position: absolute; top: 18px; right: 18px; width: 12px; height: 7px; background: url(../img/common/icnSelectLB.png) no-repeat;}
.layout-main .area-body .county-select .title .select .select-button:hover:after {background-position: 100% 0;}

.layout-main .area-body .county-select .title .select .select-list {box-sizing: border-box; display: none; width: 100%; max-width: 314px; border: solid 1px #ddd; border-radius: 0 5px 5px 5px; background: #fff;}
.layout-main .area-body .county-select .title .select .select-list:before {content: ""; display: block; height: 9px;}
.layout-main .area-body .county-select .title .select .select-list:after {content: ""; display: block; height: 8px; clear: both;}
.layout-main .area-body .county-select .title .select .select-list li {float: left; width: 104px; line-height: 1.5; font-size: 14px;}
.layout-main .area-body .county-select .title .select .select-list li a {display: block; padding: 0 18px; line-height: 35px; color: #000; transition: background 0.15s;}
.layout-main .area-body .county-select .title .select .select-list li a:hover {background: #f5f5f5;}
.layout-main .area-body .county-select .title .select .select-list li.on a {color: #2f74eb;}

.layout-main .area-body .county-select .title .select.ing .select-button,
.layout-main .area-body .county-select .title .select.on .select-button {border-radius: 5px 5px 0 0; border-bottom: 0;}
.layout-main .area-body .county-select .title .select.on .select-list {display: block;}

.layout-main .area-body .county-select .list {position: relative; width: 669px; margin: 15px auto 0;}
.layout-main .area-body .county-select .list li {position: absolute; top: 0; left: 0;}

.layout-main .area-body .county-detail {padding-top: 34px;}

.layout-main .area-body .county-detail .title {position: relative; width: 436px; line-height: 31px; font-size: 20px; font-weight: 600; color: #262626;}
.layout-main .area-body .county-detail .title .value {color: #2f74eb;}

.layout-main .area-body .county-detail .title .select {display: inline-block; position: absolute; top: -6px; right: 0; width: 234px; border-radius: 5px; vertical-align: top; z-index: 50;}
.layout-main .area-body .county-detail .title .select:first-child {margin-left: 0;}

.layout-main .area-body .county-detail .title .select .select-button {box-sizing: border-box; display: block; position: relative; min-width: inherit; height: 45px; padding: 10px 44px 10px 82px; border: solid 1px #ddd; border-radius: 5px; background: #fff;}
.layout-main .area-body .county-detail .title .select .select-button .label {position: absolute; top: 10px; left: 18px; width: 54px; font-weight: 600; transition: color 0.15s;}
.layout-main .area-body .county-detail .title .select .select-button .label:after {content: ""; display: block; position: absolute; top: 3px; right: 0; width: 1px; height: 17px; background: #d4d4d4;}
.layout-main .area-body .county-detail .title .select .select-button .label,
.layout-main .area-body .county-detail .title .select .select-button .current {line-height: 23px; font-size: 15px; color: #000;}
.layout-main .area-body .county-detail .title .select .select-button .current {vertical-align: top; white-space: nowrap; font-weight: 400;}
.layout-main .area-body .county-detail .title .select .select-button:after {content: ""; display: block; position: absolute; top: 18px; right: 18px; width: 12px; height: 7px; background: url(../img/common/icnSelectLB.png) no-repeat;}
.layout-main .area-body .county-detail .title .select .select-button:hover:after {background-position: 100% 0;}
.layout-main .area-body .county-detail .title .select .select-button:hover .label {color: #2f74eb;}

.layout-main .area-body .county-detail .title .select .select-list {box-sizing: border-box; display: none; width: 100%; border: solid 1px #ddd; border-radius: 0 0 5px 5px; background: #fff;}
.layout-main .area-body .county-detail .title .select .select-list:before {content: ""; display: block; height: 9px;}
.layout-main .area-body .county-detail .title .select .select-list:after {content: ""; display: block; height: 8px; clear: both;}
.layout-main .area-body .county-detail .title .select .select-list li {float: left; width: 116px; line-height: 1.5; font-size: 13px;}
.layout-main .area-body .county-detail .title .select .select-list li a {display: block; padding: 0 18px; white-space: nowrap; line-height: 35px; font-weight: 400; color: #000; transition: background 0.15s;}
.layout-main .area-body .county-detail .title .select .select-list li a:hover {background: #f5f5f5;}
.layout-main .area-body .county-detail .title .select .select-list li.on a {color: #2f74eb;}

.layout-main .area-body .county-detail .title .select.ing .select-button,
.layout-main .area-body .county-detail .title .select.on .select-button {border-radius: 5px 5px 0 0; border-bottom: 0;}
.layout-main .area-body .county-detail .title .select.on .select-list {display: block;}

.layout-main .area-body .county-detail .box {box-sizing: border-box; position: relative; width: 436px; border-radius: 20px; background-color: #fff; box-shadow: 0 0 30px 0 rgba(39, 64, 83, 0.08);}

.layout-main .area-body .county-detail .box .next {position: absolute; top: calc(50% - 21px); right: -21px; line-height: 0; font-size: 0;}
.layout-main .area-body .county-detail .box .next > a {box-sizing: border-box; width: 42px; height: 42px; padding-left: 17px; border-radius: 42px; background: #fff; border: solid 1px #f5f5f5; box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);}
.layout-main .area-body .county-detail .box .next > a:after {content: ""; display: block; width: 10px; height: 40px; background: url(../img/common/icnDetailNext.png) no-repeat 0 50%;}
.layout-main .area-body .county-detail .box .next > a:hover:after {background-position: 100% 50%;}

.layout-main .area-body .county-detail .box-tag {margin-top: 17px; padding: 26px 24px 16px;}
.layout-main .area-body .county-detail .box-tag .body {line-height: 0; font-size: 0;}

.layout-main .area-body .county-detail .box-tag .tag {margin: 0 5px 10px 0; padding: 0 16px; border-radius: 33px; white-space: nowrap; line-height: 37px; font-size: 14px; font-weight: 500; color: #262626; transition: border-color 0.15s, color 0.15s;}
.layout-main .area-body .county-detail .box-tag .tag.blue {border: solid 2px #cfe1ff; background: #cfe1ff;}
.layout-main .area-body .county-detail .box-tag .tag.blue:hover,
.layout-main .area-body .county-detail .box-tag .tag.blue.on {border-color: #77a9ff; color: #3c81f6;}
.layout-main .area-body .county-detail .box-tag .tag.red {border: solid 2px #fdeeed; background: #fdeeed;}
.layout-main .area-body .county-detail .box-tag .tag.red:hover,
.layout-main .area-body .county-detail .box-tag .tag.red.on {border-color: #eb5c52; color: #ec3f33;}

.layout-main .area-body .county-detail .owl-carousel.tag {margin-top: 17px;}
.layout-main .area-body .county-detail .owl-carousel.tag,
.layout-main .area-body .county-detail .owl-carousel.tag .box-tag {width: 436px; height: 144px;}
.layout-main .area-body .county-detail .owl-carousel.tag .box-tag {margin-top: 0; box-shadow: initial;}
.layout-main .area-body .county-detail .owl-carousel.tag .box-tag .body {height: 102px; overflow: hidden;}
.layout-main .area-body .county-detail .owl-carousel.tag .owl-stage-outer {border-radius: 20px; box-shadow: 0 0 30px 0 rgba(39, 64, 83, 0.08); overflow: hidden;}

.layout-main .area-body .county-detail .owl-carousel.tag .owl-nav {position: absolute; top: 0; left: 0; width: 100%; height: 0; line-height: 0; font-size: 0;}
.layout-main .area-body .county-detail .owl-carousel.tag .owl-nav button {box-sizing: border-box; position: absolute; top: 51px; width: 42px; height: 42px; padding-left: 17px; border: solid 1px #f5f5f5; border-radius: 42px; outline: 0; background: #fff; box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);}
.layout-main .area-body .county-detail .owl-carousel.tag .owl-nav button > span {content: ""; width: 10px; height: 40px; background-repeat: no-repeat;}
.layout-main .area-body .county-detail .owl-carousel.tag .owl-nav button.owl-prev {display: none; left: -21px;}
.layout-main .area-body .county-detail .owl-carousel.tag .owl-nav button.owl-prev > span {margin-left: -2px; background-image: url(../img/common/icnDetailPrev.png); background-position: 100% 50%;}
.layout-main .area-body .county-detail .owl-carousel.tag .owl-nav button.owl-prev:hover > span {background-position: 0 50%;}
.layout-main .area-body .county-detail .owl-carousel.tag .owl-nav button.owl-next {right: -21px;}
.layout-main .area-body .county-detail .owl-carousel.tag .owl-nav button.owl-next > span {margin-left: 4px; background-image: url(../img/common/icnDetailNext.png); background-position: 0 50%;}
.layout-main .area-body .county-detail .owl-carousel.tag .owl-nav button.owl-next:hover > span {background-position: 100% 50%;}

.layout-main .area-body .county-detail .box-chart {margin-top: 34px; padding: 22px 22px 30px;}
.layout-main .area-body .county-detail .box-chart .body {margin-top: 30px; height: 320px;}

.layout-main .area-body .county-detail .box-chart .tab {white-space: nowrap; line-height: 0; font-size: 0;}
.layout-main .area-body .county-detail .box-chart .tab li {display: inline-block; margin-left: 9px;}
.layout-main .area-body .county-detail .box-chart .tab li:first-child {margin-left: 0;}
.layout-main .area-body .county-detail .box-chart .tab li:first-child + li {margin-left: 10px;}
.layout-main .area-body .county-detail .box-chart .tab li > a {display: block; box-sizing: border-box; width: 91px; height: 39px; border: solid 1px rgba(102, 102, 102, 0.39); border-radius: 39px; text-align: center; line-height: 37px; font-size: 15px; font-weight: 500; color: #666; transition: border-color 0.15s, background 0.15s, color 0.15s;}
.layout-main .area-body .county-detail .box-chart .tab li.on > a {color: #fff !important;}
.layout-main .area-body .county-detail .box-chart .tab li:nth-child(1) > a:hover {border-color: #f25789; color: #f25789;}
.layout-main .area-body .county-detail .box-chart .tab li:nth-child(2) > a:hover {border-color: #78cf7d; color: #78cf7d;}
.layout-main .area-body .county-detail .box-chart .tab li:nth-child(3) > a:hover {border-color: #fba628; color: #fba628;}
.layout-main .area-body .county-detail .box-chart .tab li:nth-child(4) > a:hover {border-color: #75b0f6; color: #75b0f6;}
.layout-main .area-body .county-detail .box-chart .tab li:nth-child(1).on > a {border-color: #f25789; background: #f25789;}
.layout-main .area-body .county-detail .box-chart .tab li:nth-child(2).on > a {border-color: #78cf7d; background: #78cf7d;}
.layout-main .area-body .county-detail .box-chart .tab li:nth-child(3).on > a {border-color: #fba628; background: #fba628;}
.layout-main .area-body .county-detail .box-chart .tab li:nth-child(4).on > a {border-color: #75b0f6; background: #75b0f6;}


/* Layout : Map */

.layout-map {position: relative;}
.layout-map,
.layout-map .map {min-height: inherit;}

.layout-map .map-ctrl {position: absolute; bottom: 29px; right: 300px; width: 42px; height: 276px; z-index: 50; line-height: 0; font-size: 0;}

.layout-map .map-ctrl .relocate {box-sizing: border-box; position: absolute; top: 0; left: 0; width: 42px; height: 42px; border: solid 1px #c5c5c5; border-radius: 5px; background: #fff; box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16); text-align: center;}
.layout-map .map-ctrl .relocate:before {content: ""; display: inline-block; width: 25px; height: 40px; background: url(../img/common/icnRelocate.png) no-repeat 0 50%; vertical-align: top;}
.layout-map .map-ctrl .relocate:hover:before {background-position: 100% 50%;}

.layout-map .map-ctrl .zoom {box-sizing: border-box; position: absolute; bottom: 0; left: 0; width: 42px; height: 225px; padding: 49px 18px; border: solid 1px #c5c5c5; border-radius: 5px; background: #fff; box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);}
.layout-map .map-ctrl .zoom > a {position: absolute; left: 0; width: 40px; height: 34px; text-align: center;}
.layout-map .map-ctrl .zoom > a:before {content: ""; display: inline-block; vertical-align: top;}
.layout-map .map-ctrl .zoom > a.zoom-in {top: 0; border-bottom: solid 1px #e9e9e9;}
.layout-map .map-ctrl .zoom > a.zoom-in:before {width: 15px; height: 34px; background: url(../img/common/icnZoomIn.png) no-repeat 0 50%;}
.layout-map .map-ctrl .zoom > a.zoom-in:hover:before {background-position: 100% 50%;}
.layout-map .map-ctrl .zoom > a.zoom-out {bottom: 0; border-top: solid 1px #e9e9e9;}
.layout-map .map-ctrl .zoom > a.zoom-out:before {width: 15px; height: 34px; background: url(../img/common/icnZoomOut.png) no-repeat 0 50%;}
.layout-map .map-ctrl .zoom > a.zoom-out:hover:before {background-position: 100% 50%;}

.layout-map .map-ctrl .zoom-slider {width: 4px; height: 125px; border: 0; border-radius: 0; background: #ddd;}
.layout-map .map-ctrl .zoom-slider .ui-slider-range {border: 0; background: #0475f4;}
.layout-map .map-ctrl .zoom-slider .ui-slider-handle {left: -14px; width: 31px; height: 11px; margin-bottom: -7px; border: 0; outline: 0; background: url(../img/common/btnZoomSlide.png) no-repeat; cursor: pointer;}

.layout-map .area-select {position: absolute; top: 22px; left: 50px; z-index: 50; line-height: 0; font-size: 0;}

.layout-map .area-select .select {display: inline-block; position: relative; min-width: 215px; margin-left: 10px; border-radius: 5px; background: #fff; box-shadow: 0 3px 10px 0 rgba(0, 0, 0, 0.2); vertical-align: top;}
.layout-map .area-select .select:first-child {margin-left: 0;}

.layout-map .area-select .select .select-button {box-sizing: border-box; display: inline-block; position: relative; min-width: inherit; height: 45px; padding: 10px 44px 10px 92px; border: solid 1px #ddd; border-radius: 5px; background: #fff;}
.layout-map .area-select .select .select-button:after {content: ""; display: block; position: absolute; top: 18px; right: 18px; width: 12px; height: 7px; background: url(../img/common/icnSelectLB.png) no-repeat;}
.layout-map .area-select .select .select-button .label {position: absolute; top: 10px; left: 18px; width: 58px; font-weight: 600; transition: color 0.15s;}
.layout-map .area-select .select .select-button .label:after {content: ""; display: block; position: absolute; top: 3px; right: 0; width: 1px; height: 17px; background: #d4d4d4;}
.layout-map .area-select .select .select-button .label,
.layout-map .area-select .select .select-button .current {line-height: 23px; font-size: 16px; color: #000;}
.layout-map .area-select .select .select-button .current {white-space: nowrap;}
.layout-map .area-select .select .select-button:hover:after {background-position: 100% 0;}
.layout-map .area-select .select .select-button:hover .label {color: #2f74eb;}

.layout-map .area-select .select .select-list {box-sizing: border-box; display: none; width: 100%; border: solid 1px #ddd; border-top: 0; border-radius: 0 0 5px 5px; background: #fff;}
.layout-map .area-select .select .select-list:before {content: ""; display: block; height: 9px;}
.layout-map .area-select .select .select-list:after {content: ""; display: block; height: 8px;}
.layout-map .area-select .select .select-list li {line-height: 1.5; font-size: 14px;}
.layout-map .area-select .select .select-list li a {display: block; padding: 0 18px; line-height: 35px; color: #000; transition: background 0.15s;}
.layout-map .area-select .select .select-list li a:hover {background: #f5f5f5;}
.layout-map .area-select .select .select-list li.on a {color: #2f74eb;}

.layout-map .area-select .select.ing .select-button,
.layout-map .area-select .select.on .select-button {border-radius: 5px 5px 0 0;}
.layout-map .area-select .select.on .select-list {display: block;}

.layout-map .area-info {position: absolute; top: 15px; right: 21px; width: 258px; z-index: 50;}

.layout-map .area-info .box-time {height: 45px; border-radius: 10px; background: rgba(255, 255, 255, 0.6); white-space: nowrap; text-align: center; line-height: 45px; font-size: 16px; color: #000;}
.layout-map .area-info .box-time > span {vertical-align: top;}

.layout-map .area-info .box-board {height: calc(100vh - 170px); margin-top: 10px; border-radius: 10px; background: rgba(255, 255, 255, 0.65); box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16); overflow: hidden;}
.layout-map .area-info .box-board .body {padding: 14px 12px 18px; background: #fff;}

.layout-map .area-info .box-board .tab-outer:after {content: ""; display: block; clear: both;}
.layout-map .area-info .box-board .tab-outer li {float: left; width: 50%; text-align: center;}
.layout-map .area-info .box-board .tab-outer li a {display: block; line-height: 39px; font-size: 13px; font-weight: 500; color: rgba(0, 0, 0, 0.45); transition: background 0.15s, color 0.15s;}
.layout-map .area-info .box-board .tab-outer li a:hover {background: rgba(255, 255, 255, 0.5);}
.layout-map .area-info .box-board .tab-outer li.on a {background: #fff; color: #000;}

.layout-map .area-info .box-board .tab-inner {padding: 4px; border: solid 1px #ddd; border-radius: 41px; background: #fafafa;}
.layout-map .area-info .box-board .tab-inner:after {content: ""; display: block; clear: both;}
.layout-map .area-info .box-board .tab-inner li {float: left; width: 50%; text-align: center;}
.layout-map .area-info .box-board .tab-inner li a {display: block; border-radius: 31px; line-height: 31px; font-size: 13px; font-weight: 500; color: rgba(0, 0, 0, 0.5); transition: background 0.15s, font-size 0.15s, font-weight 0.15s, color 0.15s;}
.layout-map .area-info .box-board .tab-inner li a:hover {font-weight: 600;}
.layout-map .area-info .box-board .tab-inner li.on a {background: #2f74eb; font-size: 13px; font-weight: 600; color: #fff !important;}

.layout-map .area-info .box-board .count-total {margin-top: 13px; text-align: center; line-height: 0; font-size: 0;}
.layout-map .area-info .box-board .count-total dl {display: inline-block; position: relative; width: 64px; margin-left: 21px; padding-bottom: 26px;}
.layout-map .area-info .box-board .count-total dl:first-child {margin-left: 0;}
.layout-map .area-info .box-board .count-total dt {position: absolute; bottom: 0; left: 0; width: 100%; line-height: 18px; font-size: 13px; font-weight: 500; color: #000;}
.layout-map .area-info .box-board .count-total dd {width: inherit; height: 64px; border-radius: 64px; line-height: 64px; font-size: 33px; font-weight: 600; color: #fff;}
.layout-map .area-info .box-board .count-total dl.blue dd {background: #77a9ff;}
.layout-map .area-info .box-board .count-total dl.red dd {background: #ff5c56;}

.layout-map .area-info .box-board .table {height: calc(100vh - 400px); margin-top: 15px; padding-left: 6px;}
.layout-map .area-info .box-board .table .mCSB_inside > .mCSB_container {margin-right: 10px;}
.layout-map .area-info .box-board .table .mCSB_scrollTools {right: -5px;}

.layout-map .area-info .box-board .table table th,
.layout-map .area-info .box-board .table table td {height: 20px; border: solid 1px #ddd; text-align: center; line-height: 15px; font-size: 11px; font-weight: 500; color: #000;}
.layout-map .area-info .box-board .table table td:before {content: ""; display: inline-block; width: 9px; height: 9px; margin-right: 3px; border-radius: 9px; background: #04cf5c; vertical-align: middle;}
.layout-map .area-info .box-board .table table tr:nth-child(odd) th,
.layout-map .area-info .box-board .table table tr:nth-child(odd) td {background: #f5f5f5;}

.layout-map .area-info .box-board .table table tr.active th,
.layout-map .area-info .box-board .table table tr.active td {background: #ffedec;}
.layout-map .area-info .box-board .table table tr.active td.blue:before {background: #77a9ff;}
.layout-map .area-info .box-board .table table tr.active td.red:before {background: #ff5c56;}

.layout-map .area-legend {box-sizing: border-box; display: block; position: absolute; right: 35px; bottom: 35px; width: 118px; min-height: 191px; padding: 11px 13px; border: solid 1px #dddddd; border-radius: 5px; background: #fff; box-shadow: 0 3px 10px 0 rgba(0, 0, 0, 0.2); z-index: 50;}
.layout-map .area-legend .label {padding-bottom: 8px; border-bottom: solid 1px #e3e3e3; text-align: center; line-height: 23px; font-size: 16px; font-weight: 600; color: #000;}

.layout-map .area-legend .list {margin-top: 15px;}
.layout-map .area-legend .list li {position: relative; padding-left: 26px; line-height: 30px; font-size: 13px; color: #000;}
.layout-map .area-legend .list li:before {content: ""; display: block; position: absolute; top: 8px; left: 2px; width: 15px; height: 15px; border-radius: 15px;}

.layout-map .area-legend .list li.green:before {background: #c3d69b;}
.layout-map .area-legend .list li.blue:before {background: #93cddd;}
.layout-map .area-legend .list li.purple:before {background: #b3a2c7;}
.layout-map .area-legend .list li.red:before {background: #d99694;}

.layout-map.type-informal,
.layout-map.type-informal .map {min-height: 625px;}
.layout-map.type-informal .map-ctrl {top: 95px; right: 35px; bottom: auto;}
.layout-map.type-informal .area-select {left: auto; right: 35px;}


/* Layout : Search */

.layout-search {min-height: 50vh;}

.layout-search .search-form {box-sizing: border-box; position: relative; height: 81px; padding: 18px 33px 17px; border-bottom: solid 1px #d1d1d1; background: #fff; z-index: 10; text-align: left;}

.layout-search .search-form .search-item {display: inline-block; margin-left: 25px; vertical-align: top;}
.layout-search .search-form .search-item:first-child {margin-left: 0;}
.layout-search .search-form .search-item .label {display: inline-block; line-height: 45px; font-size: 16px; font-weight: 600; color: #000; vertical-align: top;}

.layout-search .search-form .search-item .select {display: inline-block; position: relative; width: 272px; margin-left: 16px; border-radius: 5px; background: #fff; vertical-align: top; text-align: left;}
.layout-search .search-form .search-item .select:first-child {margin-left: 0;}

.layout-search .search-form .search-item .select .select-button {box-sizing: border-box; display: block; position: relative; height: 45px; padding: 10px 44px 10px 18px; border: solid 1px #ddd; border-radius: 5px; background: #fff;}
.layout-search .search-form .search-item .select .select-button:after {content: ""; display: block; position: absolute; top: 18px; right: 18px; width: 12px; height: 7px; background: url(../img/common/icnSelectLB.png) no-repeat;}
.layout-search .search-form .search-item .select .select-button .current {white-space: nowrap; line-height: 23px; font-size: 16px; color: #000;}
.layout-search .search-form .search-item .select .select-button:hover:after {background-position: 100% 0;}
.layout-search .search-form .search-item .select .select-button:hover .label {color: #2f74eb;}

.layout-search .search-form .search-item .select .select-list {box-sizing: border-box; display: none; width: 100%; border: solid 1px #ddd; border-top: 0; border-radius: 0 0 5px 5px; background: #fff;}
.layout-search .search-form .search-item .select .select-list:before {content: ""; display: block; height: 9px;}
.layout-search .search-form .search-item .select .select-list:after {content: ""; display: block; height: 8px; clear: both;}
.layout-search .search-form .search-item .select .select-list li {float: left; width: 135px; line-height: 1.5; font-size: 14px;}
.layout-search .search-form .search-item .select .select-list li a {display: block; padding: 0 18px; line-height: 35px; color: #000; transition: background 0.15s;}
.layout-search .search-form .search-item .select .select-list li a:hover {background: #f5f5f5;}
.layout-search .search-form .search-item .select .select-list li.on a {color: #2f74eb;}

.layout-search .search-form .search-item .select.ing .select-button,
.layout-search .search-form .search-item .select.on .select-button {border-radius: 5px 5px 0 0;}
.layout-search .search-form .search-item .select.on .select-list {display: block;}

.layout-search .search-form .search-item:first-child .select {width: 407px;}

.layout-search .search-form .submit {width: 248px; height: 45px; margin-left: 27px; border: 0; border-radius: 5px; outline: 0; background: #2f74eb; vertical-align: top; text-align: center; line-height: 45px; font-size: 16px; color: #fff; transition: background 0.15s;}
.layout-search .search-form .submit:hover {background: #2259b9;}

.layout-search .search-result {line-height: 0; font-size: 0;}
.layout-search .search-result .mCSB_horizontal.mCSB_inside > .mCSB_container {margin-bottom: 10px;}

.layout-search .search-result .list {padding: 27px 35px; white-space: nowrap;}
.layout-search .search-result .list > li {display: inline-block; min-width: 255px; margin-left: 20px;}
.layout-search .search-result .list > li:first-child {margin-left: 0;}
.layout-search .search-result .list > li > a {display: block; padding: 16px 17px 14px; border: solid 1px #e2e2e2; border-radius: 7px; background: #fff; transition: border-color 0.15s;}
.layout-search .search-result .list > li > a:hover {border-color: #97b9f6;}

.layout-search .search-result .list .name {padding-bottom: 7px; border-bottom: solid 1px #e3e3e3; line-height: 24px; font-size: 17px; font-weight: 600; color: #000;}
.layout-search .search-result .list .info {margin-top: 12px; line-height: 18px; font-size: 12px; color: #000;}
.layout-search .search-result .list .info li {position: relative; margin-top: 3px; padding-left: 12px;}
.layout-search .search-result .list .info li:before {content: ""; display: block; position: absolute; top: 6px; left: 0; width: 7px; height: 7px; border-radius: 7px; background: #4b4b4b;}
.layout-search .search-result .list .info li:first-child {margin-top: 0;}


/* Marker & Marker Overlay */

.item-marker {position: absolute; top: 0; left: 0; z-index: 10;}

.item-marker .marker.county {box-sizing: border-box; position: relative; width: 119px; height: 131px; background: url(../img/common/bgItemCounty1.png) no-repeat 50%; text-align: center; line-height: 0; font-size: 0;}
.item-marker .marker.county .cluster {position: absolute; top: -6px; left: 0; width: 100%; z-index: 10;}
.item-marker .marker.county .cluster > em {box-sizing: border-box; display: inline-block; width: 26px; height: 26px; border: solid 2px #363636; border-radius: 26px; background: #fff700; box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16); line-height: 22px; font-size: 13px; font-weight: 600; color: #1a1a1a;}
.item-marker .marker.county .name {padding-top: 37px; line-height: 18px; font-size: 13px; font-weight: 600; color: #484848;}
.item-marker .marker.county .value {display: inline-block; margin-top: 9px; padding: 3px; border: solid 1px #dfdfdf; border-radius: 32px; background: #fff;}
.item-marker .marker.county .value > span {width: 24px; height: 24px; margin-left: 3px; border-radius: 24px; background: #04cf5c;}
.item-marker .marker.county .value > span:first-child {margin-left: 0 !important;}
.item-marker .marker.county .value > span > em {display: block; line-height: 24px; font-size: 15px; font-weight: 600; color: #fff;}

.item-marker .marker.county.active {background-image: url(../img/common/bgItemCounty2.png);}
.item-marker .marker.county.active .name {color: #fff;}
.item-marker .marker.county.active .value > span:first-child {background: #77a9ff;}
.item-marker .marker.county.active .value > span:last-child {background: #ff5c56;}

.item-marker .marker.county.large {width: 162px; height: 181px; background: url(../img/common/bgItemCounty1L.png) no-repeat 50%;}
.item-marker .marker.county.large .name {padding-top: 56px; line-height: 26px; font-size: 19px;}
.item-marker .marker.county.large .value {margin-top: 9px; padding: 5px; border-radius: 42px;}
.item-marker .marker.county.large .value > span {width: 30px; height: 30px; margin-left: 5px; border-radius: 30px;}
.item-marker .marker.county.large .value > span > em {line-height: 30px; font-size: 17px;}
.item-marker .marker.county.large.active {background-image: url(../img/common/bgItemCounty2L.png);}

.item-marker .marker.county.small {width: 92px; height: 102px; background-size: auto 102px;}
.item-marker .marker.county.small .name {padding-top: 32px; line-height: 15px; font-size: 11px;}
.item-marker .marker.county.small .value {margin-top: 5px; padding: 2px; border-radius: 23px;}
.item-marker .marker.county.small .value > span {width: 17px; height: 17px; margin-left: 2px; border-radius: 17px;}
.item-marker .marker.county.small .value > span > em {line-height: 17px; font-size: 11px;}

.item-marker .marker.period {box-sizing: border-box; position: relative; width: 51px; height: 58px; text-align: center; line-height: 0; font-size: 0;}
.item-marker .marker.period .icon {width: inherit; height: inherit; background-repeat: no-repeat; background-position: 50%;}
.item-marker .marker.period .icon.i1 {background-image: url(../img/common/bgMarkerPeriod1.png);}
.item-marker .marker.period .icon.i2 {background-image: url(../img/common/bgMarkerPeriod2.png);}
.item-marker .marker.period .icon.i3 {background-image: url(../img/common/bgMarkerPeriod3.png);}
.item-marker .marker.period .icon.i4 {background-image: url(../img/common/bgMarkerPeriod4.png);}

.item-marker .marker.farm {box-sizing: border-box; position: relative; width: 32px; height: 42px; line-height: 0; font-size: 0;}
.item-marker .marker.farm .icon {width: inherit; height: inherit; background-repeat: no-repeat; background-position: 50%;}
.item-marker .marker.farm .icon.green {background-image: url(../img/common/icnMarkerFarmGreen.png);}
.item-marker .marker.farm .icon.blue {background-image: url(../img/common/icnMarkerFarmBlue.png);}
.item-marker .marker.farm .icon.red {background-image: url(../img/common/icnMarkerFarmRed.png);}
.item-marker .marker.farm .icon.both {background-image: url(../img/common/icnMarkerFarmBoth.png);}

.item-marker .overlay {display: none; box-sizing: border-box; position: absolute; bottom: 0; left: 0; padding: 13px 18px 22px; border: solid 1px #ddd; border-radius: 7px; background: #fff; box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16); z-index: 20;}
.item-marker .overlay:after {content: ""; display: block; position: absolute; bottom: -24px; left: 0; width: 100%; height: 24px; background: url(../img/common/bgMarkerOverlay.png) no-repeat 50% 100%; z-index: 10;}

.item-marker .overlay .title {line-height: 21px; font-size: 15px; font-weight: 600; color: #1a1a1a;}
.item-marker .overlay .list {margin-top: 10px; border: solid 1px #ddd; border-radius: 7px; background: #fff;}
.item-marker .overlay .list li:first-child {margin-top: 0 !important;}

.item-marker .overlay .list.county-a {padding: 17px 8px; line-height: 16px;}
.item-marker .overlay .list.county-a li {position: relative; margin-top: 10px; padding-left: 24px; padding-right: 95px;}
.item-marker .overlay .list.county-a li .type {display: inline-block; position: absolute; top: 3px; left: 8px; width: 11px; height: 11px; border-radius: 11px; line-height: 0; font-size: 0;}
.item-marker .overlay .list.county-a li .type.blue {background: #77a9ff;}
.item-marker .overlay .list.county-a li .type.red {background: #ff5c56;}
.item-marker .overlay .list.county-a li .name {display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-weight: 600; color: #000;}
.item-marker .overlay .list.county-a li .period {position: absolute; top: 1px; right: 0; line-height: 14px; font-size: 10px; color: #a7a7a7;}

.item-marker .overlay .list.county-b {padding: 14px 18px; line-height: 16px; font-size: 12px; font-weight: 600; color: #000;}
.item-marker .overlay .list.county-b li {position: relative; margin-top: 7px; padding-left: 114px;}
.item-marker .overlay .list.county-b li .period {position: absolute; top: 0; left: 0;}
.item-marker .overlay .list.county-b li .name {display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.item-marker .overlay .list.county-b li .name.blue {color: #77a9ff;}
.item-marker .overlay .list.county-b li .name.red {color: #ff5c56;}

.item-marker .overlay .list.period {padding: 17px 8px; line-height: 16px;}
.item-marker .overlay .list.period li {position: relative; margin-top: 10px; padding-left: 24px;}
.item-marker .overlay .list.period li .text {display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-weight: 500; color: #000;}
.item-marker .overlay .list.period li .type {display: inline-block; position: absolute; top: 3px; left: 8px; width: 11px; height: 11px; border-radius: 11px; line-height: 0; font-size: 0;}
.item-marker .overlay .list.period li .type.i1 {background: #c3d69b;}
.item-marker .overlay .list.period li .type.i2 {background: #93cddd;}
.item-marker .overlay .list.period li .type.i3 {background: #b3a2c7;}
.item-marker .overlay .list.period li .type.i4 {background: #d99694;}

.item-marker .marker.county + .overlay {bottom: 128px; /* left: -88px; width: 295px; */ left: -103px; width: 325px;}
.item-marker .marker.county.large + .overlay {bottom: 178px; /* left: -67px; */ left: -82px;}
.item-marker .marker.county.small + .overlay {bottom: 99px; /* left: -102px; */ left: -117px;}
.item-marker .marker.period + .overlay {bottom: 82px; /* left: -122px; width: 295px; */ left: -137px; width: 325px;}
.item-marker .marker.farm + .overlay {bottom: 57px; left: -148px; width: 325px;}

.item-marker.on {z-index: 100;}
.item-marker.on .marker.county .cluster {display: none;}
.item-marker.on .overlay {display: block;}

.item-marker.stand-alone {position: relative;}
.item-marker.stand-alone .overlay {display: block; min-width: 295px;}

.marker-large .item-marker .marker.county {width: 162px; height: 181px; background: url(../img/common/bgItemCounty1L.png) no-repeat 50%;}
.marker-large .item-marker .marker.county .name {padding-top: 56px; line-height: 26px; font-size: 19px;}
.marker-large .item-marker .marker.county .value {margin-top: 9px; padding: 5px; border-radius: 42px;}
.marker-large .item-marker .marker.county .value > span {width: 30px; height: 30px; margin-left: 5px; border-radius: 30px;}
.marker-large .item-marker .marker.county .value > span > em {line-height: 30px; font-size: 17px;}
.marker-large .item-marker .marker.county.active {background-image: url(../img/common/bgItemCounty2L.png);}
.marker-large .item-marker .marker.county + .overlay {bottom: 178px; /* left: -67px; */ left: -82px;}

.marker-small .item-marker .marker.county {width: 92px; height: 102px; background-size: auto 102px;}
.marker-small .item-marker .marker.county .name {padding-top: 32px; line-height: 15px; font-size: 11px;}
.marker-small .item-marker .marker.county .value {margin-top: 5px; padding: 2px; border-radius: 23px;}
.marker-small .item-marker .marker.county .value > span {width: 17px; height: 17px; margin-left: 2px; border-radius: 17px;}
.marker-small .item-marker .marker.county .value > span > em {line-height: 17px; font-size: 11px;}
.marker-small .item-marker .marker.county + .overlay {bottom: 99px; /* left: -102px; */ left: -117px;}


/* Layout : Admin */

.layout-admin {padding-left: 20px;}
.layout-admin * {font-family: inherit !important;}

.layout-admin #content {float: none; width: auto; margin: 0; border-right: 0;}

.layout-admin #content .tbl_member table {width: 100%;}
.layout-admin #content .tbl_member th,
.layout-admin #content .tbl_member td {padding-left: 10px; padding-right: 10px;}
.layout-admin #content .tbl_member th {text-align: center;}

.layout-admin #content .memberBtn a,
.layout-admin #content .memberBtn_1 a {display: block !important; height: 43px !important; padding-top: 0 !important; line-height: 43px !important;}

.ui-datepicker * {font-family: 'S-Core Dream', sans-serif !important;}
.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {top: 4px !important;}


/* Popup */

#popup {box-sizing: border-box; position: relative; line-height: 1.65; font-family: 'S-Core Dream', sans-serif; font-size: 12px; color: #000;}
#popup * {font-family: inherit !important;}

#popup .gridTop li span {display: inline; vertical-align: initial;}
#popup .tbl_list th {text-align: center;}