/* 메인 배너영역 */
#mainVisualBannerWrap { background-color: #A1B8C1; overflow: hidden; }
#mainVisualBannerWrap > div { width: 2000px; left: 50%; margin-left: -1000px; }
#mainVisualBannerWrap > div > div { height: 780px; background-image: url(/images/mainVisualBannerBG.jpg); background-size: cover; background-position: center; }
#mainVisualBannerWrap * { -ms-user-select: none; -moz-user-select: -moz-none; -webkit-user-select: none; -khtml-user-select: none; user-select: none; }

#mainVisualBannerWrap .slideWrap { position: absolute; width: 100%; left: 0; top: 135px; }

#mainVisualBannerWrap .slideWrap > .line { position: absolute; width: 1px; height: 40px; left: 50%; margin-left: -0.5px; top: 0; background-color: #00A79D; }
#mainVisualBannerWrap .slideWrap > .itemWrap { width: 100%; float: left; margin-top: 30px; }
#mainVisualBannerWrap .slideWrap > .itemWrap > ul { width: 100%; float: left; }
#mainVisualBannerWrap .slideWrap > .itemWrap > ul > li { width: 100%; float: left; display: none; }
#mainVisualBannerWrap .slideWrap > .itemWrap > ul > li > p { width: 100%; float: left; text-align: center; color: #333; opacity: 0; top: 20px; }
#mainVisualBannerWrap .slideWrap > .itemWrap > ul > li > p.big { font-size: 48px; margin-bottom: 30px; }
#mainVisualBannerWrap .slideWrap > .itemWrap > ul > li > p.small { font-size: 21px; line-height: 32px; font-weight: 300; }

#mainVisualBannerWrap .slideWrap > .itemWrap > ul > li.active { display: block; }
#mainVisualBannerWrap .slideWrap > .itemWrap > ul > li > p.active { opacity: 1; top: 0; }
#mainVisualBannerWrap .slideWrap > .itemWrap > ul > li > p.active.big { transition: opacity 1s, top 1s; }
#mainVisualBannerWrap .slideWrap > .itemWrap > ul > li > p.active.small { transition: opacity 1s 0.1s, top 1s 0.1s; }

#mainVisualBannerWrap .couponWrap { position: absolute; width: 1200px; height: 200px; left: 50%; margin-left: -600px; bottom: 90px; background-color: rgba(0, 0, 0, 0.4); }
#mainVisualBannerWrap .couponWrap > form { width: 100%; float: left; margin-top: 55px; text-align: center; }
#mainVisualBannerWrap .couponWrap > form > * { display: inline-block; height: 60px; border: none; margin: 0 5px; }
#mainVisualBannerWrap .couponWrap > form > select { width: 230px; font-size: 16px; color: #333; padding: 0 15px; }
#mainVisualBannerWrap .couponWrap > form > input { width: 700px; font-size: 16px; color: #333; padding: 0 15px; }
#mainVisualBannerWrap .couponWrap > form > button { width: 140px; font-size: 16px; color: #FFF; font-weight: 500; background-color: #08817A; top: 1px; }
#mainVisualBannerWrap .couponWrap > .infoWrap { width: 100%; float: left; text-align: center; margin-top: 25px; color: #FFF; font-size: 14px; }
#mainVisualBannerWrap .couponWrap > .infoWrap > i { margin-right: 10px; }

#mainVisualBannerWrap .mainVisualBannerBtn { position: absolute; font-size: 45px; top: 50%; margin-top: -22.5px; z-index: 2; cursor: pointer; color: #FFF; }
#mainVisualBannerWrap .mainVisualBannerBtn.typePrev { left: 300px; }
#mainVisualBannerWrap .mainVisualBannerBtn.typeNext { right: 300px; }

/* 메인 서비스및솔루션소개영역 */
#mainServiceInfoWrap > div > div { padding: 0 50px; }

#mainServiceInfoWrap .infoWrap { width: 100%; float: left; }
#mainServiceInfoWrap .infoWrap > p { width: 100%; float: left; font-size: 18px; color: #333; line-height: 28px; text-align: center; }
	
#mainServiceInfoWrap .visualWrap { width: 100%; height: 250px; float: left; margin-top: 60px; }
#mainServiceInfoWrap .visualWrap > ul { width: 100%; height: 100%; float: left; }
#mainServiceInfoWrap .visualWrap > ul > li { width: 54%; height: 100%; position: absolute; border-radius: 300px; padding: 0 70px; }
#mainServiceInfoWrap .visualWrap > ul > li > .titWrap { width: 100%; float: left; margin-top: 70px; }
#mainServiceInfoWrap .visualWrap > ul > li > .titWrap > span { height: 30px; line-height: 30px; }
#mainServiceInfoWrap .visualWrap > ul > li > .titWrap > span.big { font-weight: bold; font-size: 30px; }
#mainServiceInfoWrap .visualWrap > ul > li > .titWrap > span.small { font-weight: 500; font-size: 18px; margin: 0 35px; }
#mainServiceInfoWrap .visualWrap > ul > li > .conWrap { width: 100%; float: left; font-size: 17px; color: #333; line-height: 24px; font-weight: 500; margin-top: 30px; }

#mainServiceInfoWrap .visualWrap > ul > li.leftVisual { left: 0; z-index: 2; background-color: rgba(0, 167, 157, 0.58); }
#mainServiceInfoWrap .visualWrap > ul > li.leftVisual > .titWrap > span { float: left; }
#mainServiceInfoWrap .visualWrap > ul > li.leftVisual > .titWrap > span.big { color: #FFF; }
#mainServiceInfoWrap .visualWrap > ul > li.leftVisual > .titWrap > span.small { color: #136F69; }
#mainServiceInfoWrap .visualWrap > ul > li.leftVisual > .conWrap { text-align: left; }

#mainServiceInfoWrap .visualWrap > ul > li.rightVisual { right: 0; z-index: 1; background-color: rgba(225, 225, 225, 0.8); }
#mainServiceInfoWrap .visualWrap > ul > li.rightVisual > .titWrap > span { float: right; }
#mainServiceInfoWrap .visualWrap > ul > li.rightVisual > .titWrap > span.big { color: #118F87; }
#mainServiceInfoWrap .visualWrap > ul > li.rightVisual > .titWrap > span.small { color: #118F87; }
#mainServiceInfoWrap .visualWrap > ul > li.rightVisual > .conWrap { text-align: right; }

/* 메인 서비스특징영역 */
#mainServiceCharWrap { background-color: #D4F0EE; }
#mainServiceCharWrap > div > div { padding: 0 50px; }

#mainServiceCharWrap .visualWrap { width: 100%; float: left; }
#mainServiceCharWrap .visualWrap > ul { width: 100%; float: left; }
#mainServiceCharWrap .visualWrap > ul > li { width: 100%; float: left; display: table; border-radius: 10px; overflow: hidden; margin-bottom: 5px; }
#mainServiceCharWrap .visualWrap > ul > li > div { height: 135px; display: table-cell; vertical-align: middle; }

#mainServiceCharWrap .visualWrap > ul > li > .tit { width: 385px; padding-left: 40px; }
#mainServiceCharWrap .visualWrap > ul > li > .tit > img { width: 86px; height: 86px; border-radius: 100%; vertical-align: middle; }
#mainServiceCharWrap .visualWrap > ul > li > .tit > span { font-weight: 500; color: #FFF; font-size: 21px; margin-left: 20px; }

#mainServiceCharWrap .visualWrap > ul > li > .con { background-color: #FFF; padding: 0 50px; }
#mainServiceCharWrap .visualWrap > ul > li > .con > p { width: 100%; float: left; font-size: 16px; color: #333; margin: 2px 0; }

/* 메인 분석서비스 리포트영역 */
#mainServiceReportWrap .commonTitle > .small { color: #666; line-height: 25px; }
#mainServiceReportWrap .commonTitle > .small > span { color: #999; font-size: 17px; line-height: 25px; }

#mainServiceReportWrap .tabListWrap { width: 100%; float: left; }
#mainServiceReportWrap .tabListWrap > ul { width: 100%; height: 55px; float: left; border-bottom: 1px solid #333; text-align: center; }
#mainServiceReportWrap .tabListWrap > ul > li { width: 300px; height: 55px; line-height: 55px; display: inline-block; cursor: pointer; background-color: #F5F5F5; border: 1px solid #DCDCDC; border-bottom: 1px solid #333; color: #A0A0A0; font-weight: 500; font-size: 18px; margin: 0 3px; }
#mainServiceReportWrap .tabListWrap > ul > li.active { background-color: #FFF; border: 1px solid #333; border-bottom: 1px solid #FFF; color: #333; }

#mainServiceReportWrap .tabItemWrap { width: 100%; float: left; padding: 0 85px; display: none; }
#mainServiceReportWrap .tabItemWrap * { -ms-user-select: none; -moz-user-select: -moz-none; -webkit-user-select: none; -khtml-user-select: none; user-select: none; }
#mainServiceReportWrap .tabItemWrap.active { display: block; }

#mainServiceReportWrap .tabItemWrap > .itemWrap { width: 100%; height: 550px; float: left; margin-top: 50px; border-radius: 10px; background-color: #EBEBEB; overflow: hidden; }
#mainServiceReportWrap .tabItemWrap > .itemWrap > ul { height: 100%; float: left; display: table; left: 0; transition: left 0.5s; }
#mainServiceReportWrap .tabItemWrap > .itemWrap > ul > li { width: 1030px; height: 100%; display: table-cell; vertical-align: middle; text-align: center; }
#mainServiceReportWrap .tabItemWrap > .itemWrap > ul > li > img { max-width: 1000px; max-height: 480px; vertical-align: middle; }
#mainServiceReportWrap .tabItemWrap > .itemWrap > ul > li > .conBig { display: none; }
#mainServiceReportWrap .tabItemWrap > .itemWrap > ul > li > .conSmall { display: none; }

#mainServiceReportWrap .tabItemWrap > .tabContentsSlideBtn { position: absolute; width: 70px; height: 70px; border-radius: 100%; background-color: #FFF; cursor: pointer; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); top: 290px; z-index: 2; font-size: 28px; line-height: 70px; text-align: center; color: #BBB; }
#mainServiceReportWrap .tabItemWrap > .tabContentsSlideBtn.typePrev { left: 50px; padding-right: 5px; }
#mainServiceReportWrap .tabItemWrap > .tabContentsSlideBtn.typeNext { right: 50px; padding-left: 5px; }

#mainServiceReportWrap .tabItemInfoWrap { width: 100%; height: 75px; float: left; margin-top: 60px; }
#mainServiceReportWrap .tabItemInfoWrap > div { width: 100%; float: left; text-align: center; color: #333; opacity:0; }
#mainServiceReportWrap .tabItemInfoWrap > .big { font-size: 28px; font-weight: 400; }
#mainServiceReportWrap .tabItemInfoWrap > .small { font-size: 15px; font-weight: 400; margin-top: 10px; }
#mainServiceReportWrap .tabItemInfoWrap > div > .point { color: #00A79D; }
#mainServiceReportWrap .tabItemInfoWrap > .active { transition: opacity 0.5s; opacity: 1; }

/* 쿠폰발급 */
.dataListWrap .couponWrap { width: 100%; float: left; background-color: #EBEBEB; padding-bottom: 40px; margin-top: 45px; }
.dataListWrap .couponWrap > form { width: 100%; float: left; margin-top: 55px; text-align: center; }
.dataListWrap .couponWrap > form > * { display: inline-block; height: 60px; border: none; margin: 0 5px; }
.dataListWrap .couponWrap > form > select { width: 230px; font-size: 16px; color: #333; padding: 0 15px; }
.dataListWrap .couponWrap > form > input { width: 700px; font-size: 16px; color: #333; padding: 0 15px; }
.dataListWrap .couponWrap > form > button { width: 140px; font-size: 16px; color: #FFF; font-weight: 500; background-color: #08817A; top: 1px; }
.dataListWrap .couponWrap > .infoWrap { width: 100%; float: left; text-align: center; margin-top: 25px; color: #333; font-size: 14px; }
.dataListWrap .couponWrap > .infoWrap > i { margin-right: 10px; }

/* 데이터 정리영역 */
.dataListWrap .dashboardWrap { width: 100%; float: left; border: 3px solid #E1E1E1; padding: 35px 0; display: table; }
.dataListWrap .dashboardWrap > div { display: table-cell; vertical-align: middle; }

.dataListWrap .dashboardWrap > .iconWrap { width: 230px; border-right: 1px solid #E1E1E1; text-align: center; font-size: 50px; color: #08A39F; }

.dataListWrap .dashboardWrap > .dataWrap { padding: 5px 30px; padding-right: 0; }
.dataListWrap .dashboardWrap > .dataWrap > .small { width: 100%; float: left; font-size: 15px; letter-spacing: -0.5px; color: #999; font-weight: 500; margin-bottom: 5px; }
.dataListWrap .dashboardWrap > .dataWrap > .big { width: 100%; float: left; }
.dataListWrap .dashboardWrap > .dataWrap > .big > li { float: left; border-right: 1px solid #333; padding-right: 25px; margin-right: 25px; }
.dataListWrap .dashboardWrap > .dataWrap > .big > li:last-of-type { border-right: 0; padding-right: 0; margin-right: 0; }
.dataListWrap .dashboardWrap > .dataWrap > .big > li > .label { float: left; font-size: 16px; font-weight: 500; color: #333; margin-right: 15px; }
.dataListWrap .dashboardWrap > .dataWrap > .big > li > .value { float: left; font-size: 16px; font-weight: bold; color: #00AB9F; letter-spacing: -0.5px; }

.dataListWrap .dashboardWrap > .btnWrap { width: 250px; border-left: 1px solid #E1E1E1; padding: 0 35px; float: none; margin: 0; }
.dataListWrap .dashboardWrap > .btnWrap > button { width: 100%; height: 45px; float: left; font-size: 17px; }

/* 데이터 가이드영역 */
.dataListWrap .guideWrap { width: 100%; float: left; border: 1px solid #EEE; display: table; margin-top: 15px; padding: 30px; }
.dataListWrap .guideWrap > div { display: table-cell; vertical-align: middle; }

.dataListWrap .guideWrap > .iconWrap { width: 100px; text-align: center; color: #DDD; font-size: 30px; }

.dataListWrap .guideWrap > .infoWrap > p { width: 100%; float: left; letter-spacing: -0.7px; font-size: 12px; color: #333; margin: 1px 0; }

/* 데이터 타이틀영역 */
.dataListWrap .titleWrap { width: 100%; float: left; margin-top: 50px; font-size: 21px; font-weight: bold; color: #07938A; text-align: center; }

/* 데이터 검색영역 */
.dataListWrap .searchWrap { width: 100%; float: left; border: 1px solid #EDEDED; padding: 30px 0; margin-top: 50px; }
.dataListWrap .searchWrap > form { width: 100%; float: left; }

.dataListWrap .searchWrap .formWrap { width: 100%; float: left; padding-left: 50px; }
.dataListWrap .searchWrap .formWrap > li { width: 100%; float: left; margin-bottom: 7px; }
.dataListWrap .searchWrap .formWrap > li:last-of-type { margin-bottom: 0; }
.dataListWrap .searchWrap .formWrap > li > * { float: left; }
.dataListWrap .searchWrap .formWrap > li > .label { width: 80px; height: 35px; line-height: 35px; font-size: 15px; font-weight: bold; color: #333; }
.dataListWrap .searchWrap .formWrap > li > select { margin-right: 10px; }
.dataListWrap .searchWrap .formWrap > li > .value { width: 500px; }
.dataListWrap .searchWrap .formWrap > li > .s_date { width: 140px; }
.dataListWrap .searchWrap .formWrap > li > .e_date { width: 140px; margin-right: 20px; }
.dataListWrap .searchWrap .formWrap > li > .hypen { width: 25px; height: 35px; float: left; line-height: 35px; color: #666; font-weight: 500; font-size: 16px; text-align: center; }
.dataListWrap .searchWrap .formWrap > li > .dateBtn { width: 50px; height: 35px; float: left; line-height: 35px; color: #333; font-weight: bold; font-size: 13px; text-align: center; cursor: pointer; background-color: #EBEBEB; margin-right: 7px; }
.dataListWrap .searchWrap .formWrap > li > .dateBtn:hover { background-color: #DDD; }

.dataListWrap .searchWrap .btnWrap { position: absolute; right: 0; top: 50%; padding: 0 65px; border-left: 1px solid #E1E1E1; margin-top: -17.5px; }
.dataListWrap .searchWrap .btnWrap > * { width: 130px; }

/* 데이터 정렬영역 */
.dataListWrap .sortWrap { width: 100%; float: left; margin-top: 60px; }
.dataListWrap .sortWrap span { font-size: 13px; font-weight: 700; color: #666; letter-spacing: -0.7px; }

/* 데이터 목록영역 */
.dataListWrap .tableWrap { width: 100%; float: left; margin-top: 15px; }
.dataListWrap .tableWrap > table { width: 100%; float: left; table-layout: fixed; border-top: 2px solid #00A79F; }
.dataListWrap .tableWrap > table > thead tr > * { height: 65px; background-color: #F5F5F5; font-size: 13px; font-weight: 700; color: #333; border-right: 1px solid #FFF; }
.dataListWrap .tableWrap > table > thead tr > * > .line { position: absolute; width: 1px; height: 25px; background-color: #01A69F; top: 50%; margin-top: -12.5px; right: -1px; }
.dataListWrap .tableWrap > table > thead tr > *:last-of-type { border-right: 0; }
.dataListWrap .tableWrap > table > tbody tr > * { height: 70px; font-size: 13px; font-weight: 400; color: #666; border-bottom: 1px solid #EBEBEB; text-align: center; border-right: 1px solid #F5F5F5; padding: 0 10px; }
.dataListWrap .tableWrap > table > tbody tr > *:last-of-type { border-right: 0; }
.dataListWrap .tableWrap > table .noData { color: #CCC; }
.dataListWrap .tableWrap > table .rowMove { cursor: pointer; }
.dataListWrap .tableWrap > table .rowMove:hover > * { background-color: #F5FDFD; }

/* 페이징 */
.dataListWrap .pagingWrap { width: 100%; float: left; margin-top: 60px; }
.dataListWrap .pagingWrap > ul { width: 100%; float: left; text-align: center; }
.dataListWrap .pagingWrap > ul > li { display: inline-block; margin: 0 2px; }
.dataListWrap .pagingWrap > ul > li > a { float: left; color: #AAA; font-weight: 500; font-size: 14px; padding: 2px 9px; border: 1px solid #EEE; }
.dataListWrap .pagingWrap > ul > li > a:hover { color: #999; border: 1px solid #CCC; }
.dataListWrap .pagingWrap > ul > li > span { float: left; color: #00A79F; font-weight: 500; font-size: 14px; padding: 2px 9px; border: 1px solid #00A79F; }
.dataListWrap .pagingWrap > ul > li i { color: #CCC; }

/* 데이터 작성영역 */
.dataWriteWrap .writeWrap { width: 100%; float: left; }
.dataWriteWrap .writeWrap table { width: 100%; float: left; border-top: 2px solid #00A79F; }
.dataWriteWrap .writeWrap table tr > * { border-bottom: 1px solid #EBEBEB; }
.dataWriteWrap .writeWrap table tr > .label { background-color: #F5F5F5; font-size: 13px; font-weight: 700; color: #333; padding: 15px; vertical-align: top; }
.dataWriteWrap .writeWrap table tr > .label.important::after { content: "*"; color: #DC3333; margin-left: 2px; top: -5px; }
.dataWriteWrap .writeWrap table tr > .value { font-size: 13px; font-weight: 400; color: #666; padding: 10px; }
.dataWriteWrap .writeWrap table tr > .value .checkCustomLabel { margin-right: 15px; }
.dataWriteWrap .writeWrap table tr > .value .checkCustomLabel > span { margin-left: 3px; }
.dataWriteWrap .writeWrap table tr > .value .checkCustomLabel > .off { color: #CCC; }
.dataWriteWrap .writeWrap table tr > .value .checkCustomLabel > .on { color: #00A79F; }
.dataWriteWrap .writeWrap table tr > .value .unitTxt > input { width: calc(100% - 70px); }
.dataWriteWrap .writeWrap table tr > .value .unitTxt::after { content: attr(data-unit); color: #BBB; letter-spacing: -0.5px; height: 35px; line-height: 35px; margin-left: 10px; }

.dataWriteWrap .writeWrap .tit { width: 100%; float: left; margin-top: 60px; font-size: 15px; font-weight: 700; color: #444; margin-bottom: 10px; }

.dataWriteWrap .btnWrap { width: 100%; float: left; text-align: center; margin-top: 30px; }
.dataWriteWrap .btnWrap > * { float: none; display: inline-block; margin: 0 2px; }

.cntControlerWrap { width: 100%; float: left; -ms-user-select: none; -moz-user-select: -moz-none; -webkit-user-select: none; -khtml-user-select: none; user-select: none; }
.cntControlerWrap > * { float: left; text-align: center; }
.cntControlerWrap > i { width: 35px; background-color: #F5F5F5; color: #BBB; border: 1px solid #CCC; font-size: 14px; height: 35px; line-height: 35px; cursor: pointer; }
.cntControlerWrap > input { width: 80px !important; border: 1px solid #CCC !important; border-left: 0 !important; border-right: 0 !important; height: 35px; text-align: center; font-weight: bold; }