@charset "UTF-8";

body, html {overflow-x: hidden; }
/*body {background-color: #F8F8F8;}*/
body::before {
    content: '';display: block;width: 100%;height: 762px;position: absolute;top: 120px;left: 0;z-index: -1;
    background: url("../../../images/main/bg.png");
}
/*#wrapper{padding-top: 50px}*/
/* no_img */
.no_img {background-color: darkgrey;width: 100%;height: 100%;display: inline-flex;justify-content: center;align-items: center;}
.no_img > img {}
/* display layout */ 
.wFix {max-width: 1600px;width: 100%;margin:0 auto;position:relative;}
/* visual */
.visual{margin-top: 60px; margin-bottom: 60px}
.visual .visualSlide { margin-top: 20px; }
.visual,
.visual .slick-slide img {width: 100%; height: 320px}
/*.visual .no_img {border-radius: 20px;}*/
@media screen and (max-width:1600px) {
    .wFix {max-width: auto !important;padding: 0 1em;width: 100%;}
}
@media screen and (max-width:1200px) {
    body::before{top: 60px}
    .visual .visualSlide{
        width: 100%;  display: flex}
    .visual, .visual .slick-slide img{height: auto; margin: 0;}
        .openData{display: block}
}


@media screen and (max-width:900px) {
    body::before {height: 350px;}
    .v-next .material-icons{
        right: -13px !important;}
    .v-prev .material-icons{
        left: -13px !important;}
    /*.visual{ margin-top: 85px; }*/
    .visControl{position: inherit !important}
    .visual_con{display: flex; gap: 5px}
    .visual_con button{
        width: 20px;}
    .visual{margin-bottom: 20px}
    .visual .slick-slide img  {height: auto;
        width: auto;}
    .visual .material-icons{        position: static !important;
        transform: translate(0, 0%) !important;}
    .visual .v-prev .material-icons {left: 20px !important;font-size: 24px !important;opacity: 1 !important;}
    .visual .v-next .material-icons {right: 20px !important;font-size: 24px !important;opacity: 1 !important;}
}

/*----------- slick ----------*/
/* slick 컨트롤러 : 공통 */
.slider-control {display:flex; justify-content:space-between;align-items:center;}
.slider-control > button {margin: 0 0.2em;width: 28px;height: 28px;border-radius: 100%;display: flex !important;align-items: center;justify-content: center;}
.slider-control i {font-size: 20px;}
.visControl {display: inline-flex;align-items: center; position: absolute; bottom: 65px;
    left: 92px;}

/* slick 컨트롤러 : prev/next */
.v-prev .material-icons,
.v-next .material-icons {font-size: 50px; position: absolute;top: 50%;transform: translate(0, -50%);}
.v-prev .material-icons:hover,
.v-next .material-icons:hover {opacity: 1;}
.v-prev .material-icons {left: -100px;}
.v-next .material-icons {right: -100px;}

/* slick 컨트롤러 : dots */
.slider-dots-box {line-height: 0;}
.slick-dots {display: inline-flex;align-items: center;}
.slick-dots > li {margin: 0 .3em;line-height: 0;}
.slick-dots > li.slick-active > button {width: 16px;height: 16px;background: transparent;border: 4px solid #fff;opacity: 1;}
.slick-dots > li > button {font-size: 0;width: 10px;height: 10px;border-radius: 50px;background: #fff;opacity: .2;}
.slick-dots > li > button:hover {opacity: 1;}

/* slick 컨트롤러 : pause/play */
.playBt {color: #fff;}
.playBt > .material-icons {font-size: 22px;}


/* slick 컨트롤러 : 프로그레이스바 */
@keyframes proBar{
    0%{width:0;}
    100%{width:100%;}
}
.pro-barwrap {position: relative;width: 200px;height: 2px;background: rgba(255 255 255 / 50%);}
.pro-bar{position:absolute;bottom:0;left:0;width:0;height:2px;background: #fff;}
.pro-ani{animation-name: proBar;animation-duration:5s;animation-iteration-count: 1;width:100%;}
.slider-box:hover .pro-bar{animation-play-state: paused;}


/*----------- header ----------*/
#header #m_toggle {display: none;}
#header #m_close {display: none;}

/* header : .topWrap */
.topWrap {display: flex;flex-direction: row;justify-content: center;align-items: center;}
.topWrap .logo {margin-top: 1.5em;}
.topWrap .logo > a {display: inline-flex;align-items: center;}
.topWrap .logo img {height: 57px;width: auto;}

/* header : .gnb */
.topWrap .gnb {width: 80%;position: absolute;top: 50%;left: 0;transform: translate(0, -50%);display: inline-block;}
#header .gnb > li {display: inline-flex;}
#header .gnb > li {margin-right: 1em;position: relative;}
#header .gnb > li::before {content: '';width: 1px;height: 12px;background-color: #fff;opacity: .2;position: absolute;top: 3px;left: -.7em;}
#header .gnb > li:first-child:before {display: none !important;}
#header .gnb a {font-size: .8rem;color: var(--white);}
#header .gnb a > .material-icons {font-size: 1rem;margin-right: .3em;}


/* 기존 빅데이터 메뉴 */
#header {
    /*position: absolute; top: 0;*/
    /*width: 100%; z-index:4;*/ background-color: #fff; margin-top: 0 !important;
}
/*.main #header {background: transparent !important;}*/

#logo {float: left;width: 244px;position: relative;height: auto; margin-right: 88px}
/* 로고 테마이미지 */
/* #logo a::before {content:"";display:inline-block;background:url("../../images/common/banner-sm.png");width:78px;height:79px;position:absolute;left:-7px;top:-15px;} */
#logo a {display: flex;align-items: center;/* padding-left:50px; */height: 100%;}
#logo a span{font-size: 22px;font-weight: bold;padding-left: 5px;}
#logo a > img {vertical-align: bottom;width: 100%;}
#logo .sub_banner{position:absolute;left: 0;top: -16px;z-index:-1;}
#logo .sub_banner img{width:auto;}

/*#nav {float: left;width: 55%;}*/
/*#nav ul:after { content: ''; display: block; clear: both; }*/
#nav ul{display:flex; gap: 72px; justify-content: space-between}
#nav ul li {float: left;/* width: 12.666667%; */text-align: center;}


#nav ul li a {display: block;padding-top: 18px;font-weight: 400;}
#nav ul li a:hover span{font-weight: 700}
#nav ul li a span {font-size: 18px;font-weight: 500;white-space:nowrap;position: relative; color: #fff}
.main #nav ul li a span {color: #161616}
/* #nav ul li a span:after{content:'';width: 30px;height: 0;display:inline-block;position:absolute;-webkit-transition:width 0.3s ease;-moz-transition:width 0.3s ease;transition: all 0.3s ease;top: 54px;opacity: 0;background: url('../../images/common/ic_menu3.svg')  center no-repeat;transform: translateX(-15px);left: 50%;} */

/*#tnb {float: right;position: absolute;right: 0;}*/
#tnb ul:after { content: ''; display: block; clear: both; }
#tnb ul li a {position: relative;display: block;padding: 5px 0;margin-left: 10px;font-size: 13px;color: #fff;}
#tnb ul li a.link {padding-left: 26px;}
#tnb ul li a.link:before { content: '\ef47'; font-family: 'icofont'; position: absolute; display: block; width: 22px; height: 22px; left: 0; top: 3px;
    font-size: 17px; text-align: center; color: #666666; }
#tnb ul li:first-child a { margin-left: 0; }
#tnb ul li .logout{cursor:pointer;}


#tnb {display: flex; justify-content: end }
/*#tnb ul { float: right; }*/
#tnb ul:after { content: ''; display: block; clear: both; }
#tnb ul {display: flex; align-items: center;}
#tnb .bar{
    width: 1px; height: 13px; margin-left: 8px; background-color: #666666}


#category {border-bottom: 1px solid #dfe3f6;background: #fff;}
#category ul:after { content: ''; display: block; clear: both; }
#category ul li {float: left;padding: 0 30px;}
#category ul li:first-child { padding-left: 0; }
#category ul li a {position: relative;display: block;padding: 17px 0;font-size: 16px;}
#category ul li a:before{content: '';position: absolute;width:0;height: 4px;left: 0;bottom: 0;background-color: #0d1544;-webkit-transition:width 0.3s ease;-moz-transition:width 0.3s ease;transition:width 0.3s ease;}
#category ul li a:hover, #category ul li.selected a{color: #0d1544;}
#category ul li a:hover:before, #category ul li.selected a:before{width:100%;}

#m_side, .side_btn {display: none;}


@media screen and (max-width:1600px) {
}
@media screen and (max-width:1200px) {  
	#header {margin-top: -10px;
        height: 60px;}
	#header #nav {display: none;}
	#header #tnb { display: none; }
    .topWrap .gnb {display: none;padding: 0 1em;height: 60px;line-height: 57px;top: 0;right: -80%;left: auto;z-index: 10003;transform: none;background-color: #252f3f;-webkit-transition: all 0.3s;-moz-transition: all 0.3s;transition: all 0.3s;}
    #header.active .gnb {right: 0;}
    #header .gnb a {font-size: .95rem;}
    #header .gnb a > .material-icons {font-size: 1.2rem;}
    .topWrap .logo {margin-top:0;}
    #logo {width: 214px;}
    
    
    /* 기존 빅데이터 메뉴 */
    
	.side_btn { position: fixed; display: block; top: 30px; right:10px; transition: .3s; z-index: 1300; cursor:pointer;}
	.side_btn.active { position: fixed; transition: .3s; }
	.side_btn button { width: 30px; height: 35px; background: none; }
	.side_btn button:before { content: ''; position: absolute; display: block; width: 30px; top: .5em;  border-top: 3px solid #000; transition: .3s; }
	.side_btn button:after { content: ''; position: absolute; display: block; width: 30px; bottom: .5em;  border-bottom: 3px solid #000; transition: .3s; }
	.side_btn button span { position: absolute; display: block; width: 30px; height: 0; top: 50%; border-top: 3px solid #000; transform: translateY(-50%); text-indent: -9999px; transition: .3s; overflow: hidden; }
	.side_btn.active button:before { transform: rotate(45deg); top:18px; border-width: 2px; transition: .3s; border-color:#fff !important;}
	.side_btn.active button:after { transform: rotate(-45deg); bottom:15px; border-width: 2px; transition: .3s; border-color:#fff !important;}
	.side_btn.active button span { opacity: 0; transition: .3s; }

	#m_side {position: fixed;display: block;width: 100%;height: 100%;right: -100%;top: 0;background-color: #fff;box-shadow: 0px 3px 6px rgba(0,0,0,0.16);z-index: 1200;transition: all .3s;}
	#m_side.active { right: 0; }
	#m_side .top_box { height: 60px; background:#291F4D;/*  background: linear-gradient(135deg, rgba(61,121,229,1) 0%, rgba(123,55,191,1) 100%);  */}
	#m_side .top_box span { display: block; padding:0 10px; line-height: 60px; font-size: 19px; color: #fff; }
	#m_side .side_inner {position:relative;height: 100%;}
	#m_side .side_inner .nav {height: calc(100%  - 111.5px - 51px);overflow:auto;padding-top: 7px;}
	#m_side .side_inner .nav ul li.dep1 {}
	#m_side .side_inner .nav ul li.dep1.active > a{color: #d11793;font-weight: 500;}
	#m_side .side_inner .nav ul li.dep1 > a {position: relative;display: block;padding: 15px 0 15px 15px;border-bottom: 1px solid #eee;font-size: .96rem;}
	#m_side .side_inner .nav ul li.dep1 > a span {font-size:15px;color:#000;}
	#m_side .side_inner .nav ul li.dep1.haschild > a:before { content: '\ea99'; position: absolute; font-family: 'icofont'; right: 5px; top: 50%; transform: translateY(-50%); transition: .3s; }
	#m_side .side_inner .nav ul li.dep1.haschild.active > a:before { transform: translateY(-50%) rotate(-180deg); }
	#m_side .side_inner .nav ul li.dep1 .dep2 {padding: 10px 0 10px 30px;}
	#m_side .side_inner .nav ul li.dep1 .dep2 li {}
	#m_side .side_inner .nav ul li.dep1 .dep2 li a {font-size: .9rem;padding: 14px 0;width: 100%;display: inline-block;border-bottom: 1px solid #eee;}
	#m_side .side_inner .nav ul li.dep1 .dep2 li a span {font-size:13px;position:relative;padding-left: 8px;color:#555;}
	#m_side .side_inner .nav ul li.dep1 .dep2 li a span::after{content: '';position: absolute;left:0;top:9px;width:2px;height:2px;background: #888;}

	#m_side .top_box{position:relative;padding:15px 10px;}
	#m_side .top_box .logo{width:80%;display:block;}
	#m_side .tnb {display: block;border-bottom: 1px solid #eee;padding: 10px;background: #122b4f;}
	#m_side .tnb .tnb_info:after { content: ''; display: block; clear: both; }
	#m_side .tnb .tnb_info li { float: left; width: 50%; }
	#m_side .tnb .tnb_info li:first-child {width:100%;height: 70px;display:flex;/* justify-content:center; */align-items:center;color: #fff;}
	#m_side .tnb .tnb_info li:first-child p{padding-left:5px;}
	/* #m_side .tnb ul li.link { display: block; width: 100%;margin-bottom: 15px;} */
	#m_side .tnb .tnb_info li a { display: block; text-align: center;font-size:13px;color:#000;}
	#m_side .tnb .tnb_info li:last-child {/* border-left: 1px solid #e0e0e0; */}
	/*  #m_side .tnb ul li.link a {background:#fff;display: block;text-align: center;padding: 8px 0;border: 1px solid #7e7e7e;color: #000;font-size: 13px;border-radius: 5px;box-shadow: 1px 1px 2px rgb(0 0 0 / 25%);} */
	#m_side .tnb .tnb_info li.link {/* border-top:1px solid #e0e0e0; */padding: 3px 3px;text-align: center;}
	#m_side .tnb .tnb_info li.link a {padding:10px 0;background: #014187;display: inline-block;width: 100%;/* border: 1px solid #eee; */color: #fff;}

	#m_side .tnb .tnb_nav{padding-bottom: 10px;display: inline-block;width: 100%;}
	#m_side .tnb .tnb_nav li{float: left;margin-right: 20px;}
	#m_side .tnb .tnb_nav li a{font-size: .84rem;padding: 0;border-radius: 20px;/* background: #6b3bc1; */color: #fff;}


	#m_side .bottom_nav {border-top:1px solid #e0e0e0;border-bottom:0;position:absolute;left:0;bottom:0;width:100%;z-index:999;background:#f6f6f6;}
	#m_side .bottom_nav ul {display:flex;width:100%;height:50px;}
	#m_side .bottom_nav ul li {border-right:1px solid #e0e0e0;height:100%;flex-grow:1;text-align:center;padding:13px 0;font-size: .8rem;}
	#m_side .bottom_nav ul li:last-child {border-right:0;flex-grow:2;}
	.side_bg { position: fixed; display: none; width: 100%; height: 100%; left: 0; top: 0; background: rgba(0, 0, 0, 0.5); z-index: 1100; }
}
@media screen and (max-width:900px) {
    .topWrap .logo img {height: 40px;}
}


/* header : .search */
#header #search {position: absolute;right: 0;top: 60%;transform: translate(0, -50%);display: inline-flex;}
#header #searchKeyword {width: 320px;padding: 0 1em;background-color: #E6EDF8;border-radius: 50px;font-size: .9rem;color: #000;border: 0;}
#header #searchKeyword::placeholder {color: #8A98AE;}
#header #search .btSearch {width: 45px;height: 45px;background: linear-gradient(141deg, #7BF8FE, #0045B5);border-radius: 100px;box-shadow: 0 0 10px rgba(42 72 91 / 28%);position: absolute;top: 0;right: 0;}
#header #search .btSearch > .material-icons {color: #fff;}
@media screen and (max-width:1600px) {
}
@media screen and (max-width:1200px) {  
    #header #search {width: 80%;height: 50px;top: 60px;right: -80%;left: auto;z-index: 10003;transform: none;background-color: #252f3f;-webkit-transition: all 0.3s;-moz-transition: all 0.3s;transition: all 0.3s;}
    #header.active #search {right: 0;}
    #header #search .headSearch {height: 100%;}
    #header #search .formbox {width: 100%;}
    #header #searchKeyword {width: 100%;height: 100%;border-radius: 0;}
    #header #search .btSearch {width: 50px;height: 50px;border-radius: 0;box-shadow: none;}
}
@media screen and (max-width:900px) {
}

/* header : .lnb */
#header .lnb .nav {margin-top: .6em;display: flex;justify-content: center;}
#header .lnb .nav > li {margin: 0 .3em;width:180px;position: relative;text-align: center;}
#header .lnb .nav > li > a {width:100%;height: 50px;color: var(--white);font-weight: 500;font-size: 1.2rem;display: inline-flex;justify-content: center;align-items: center;}
#header .lnb .nav > li > a.hover {background-color: #0074cc;background: linear-gradient(-90deg, #0079d6, #0045B5);color: var(--white);transition:all 0.8s;border-radius: 5px 5px 0 0;}
#header .lnb .depth1 {display: none;}

/* header.web_header : .depth1 */
#header.web_header .depth1 {width: 100%;position: absolute;z-index: 999;left: 50%;transform: translate(-50%, 0);border-radius: 0 0 5px 5px;overflow: hidden;box-shadow: 10px 10px 10px rgba(0 0 0 / 30%);}
#header.web_header .depth1 li:last-child a {border-bottom: 0;}
#header.web_header .depth1 a {width: 100%;height: 100%;display: block;padding: .7em .5em;background-color: #fff;color: var(--black);border-bottom: 1px solid #E7EDF5;}
#header.web_header .depth1 a:hover {background: #E7EDF5;color:var(--blue);font-weight: 500;transition:all 0.3s;}

.mo_header_bg {display: none;background-color: #000;position: fixed;opacity: .6;top: 0;left: 0;right: 0;bottom: 0;width: 100%;height: 100%;-webkit-transition: all 0.3s;-moz-transition: all 0.3s;transition: all 0.3s;z-index: 150;cursor: pointer;}
@media screen and (max-width:1600px) {
}
@media screen and (max-width:1200px) {  
    #header #m_toggle {display: block;color: var(--white);position: absolute;top: 20px;right: 15px;font-size: 2.4rem;cursor: pointer;z-index: 999;}  
    #header #m_close {display: block;color: var(--white);position: absolute;top: 13px;right: .5em;cursor: pointer;}  
    #header #m_close span {font-size: 2.4rem;}

    /* 모바일메뉴 */
    .mo_header .lnb {position: fixed;right: -80%;z-index: 20;overflow: auto;-webkit-transition: all 0.3s;-moz-transition: all 0.3s;transition: all 0.3s;width: 80%;max-width: 400px;height: 100%;z-index: 10002;bottom: 0;top: 0;background-color: #fff;}
    .mo_header.active .lnb {right:0%;}
    .mo_header .close-sb {position:absolute;top:17px;right:15px;cursor:pointer;}

    
    .mo_header .nav {padding: 105px 0 0 0;margin-top: 0 !important;width:100%;font-size:1.111em;text-align: left;flex-direction: column;}
    .mo_header .nav > li {width:100% !important;position:relative;margin: 0 !important;}
    .mo_header .nav > li .material-icons {position: absolute;top: 22px;right: .5em;z-index: 1;color:#c6c8d1;}
    .mo_header .nav > li.active .material-icons {color: #fff;}
    .mo_header .nav > li > a {height: auto !important;display:block; position:relative; padding:1.2em .8em; border-bottom:1px solid #e1e1e1;color: var(--black) !important;justify-content: flex-start !important;}
    .mo_header .nav > li .depth1 {display:none; width:100%; height:auto; padding:1em; opacity: 1 !important;background-color: #ecf0f7/*#f8f4f4*/; font-size:.8em;position: relative !important;}
    .mo_header .nav > li .depth1 > li:last-child {margin-bottom: 0;}
    .mo_header .nav > li .depth1 > li {margin-bottom: 10px;text-align: left;}
    .mo_header .nav > li .depth1 > li > a {font-size: .9rem;color: var(--black);transition:none}

    .mo_header .nav > li.active > a {background-color: #0f4899;/*background: linear-gradient( to right, #084B68, #349B7D );*/color:#fff !important; font-weight:500;}
    .mo_header .nav > li > a::before {content: '';width:24px;height: 24px;background: url('../../../images/mobility/common/plus.svg') no-repeat;background-size: 100%;position: absolute;right: .6rem;top: 1.2rem;}
    .mo_header .nav > li.active > a::before {content: '';width:24px;height: 24px;background: url('../../../images/mobility/common/minus_w.svg') no-repeat;background-size: 100%;position: absolute;right: .6rem;top: 1.2rem;}

}
@media screen and (max-width:900px) {
}


/*----------- footer ----------*/
#footer {padding: 2.5em 0 4em;background-color: #e9ebee;}
#footer > div {position: relative;}
#footer .footer_top {margin-bottom: 1.5em;display: flex;}
#footer .footer_top li {margin-right: 2em;}
#footer .footer_top a {font-weight: 500;}
#footer .footer_top a:hover {text-decoration: underline;}
#footer .footer_bottom > * {font-size: .9rem;color: var(--black);}
/*#footer .footer_logo {position: absolute;top: 50%;right: 0;transform: translate(-50%, 0);}*/
@media screen and (max-width:1600px) {
}
@media screen and (max-width:1200px) {
}
@media screen and (max-width:900px) {
    #footer {padding: 4.5em 0 2em;}
    #footer .footer_top {justify-content: center;margin-bottom: 1em;}
    #footer .footer_top li {margin-right: 0;}
    .footer_top a {font-size: .95rem;}
    .footer_bottom {text-align: center;}
    #footer .footer_logo {width: 100%;text-align: center;}
    #footer .footer_logo img {width: auto;height: 30px; margin-top: 20px}
    #footer > div:nth-child(2){display: block !important}
}

/* 데이터 포맷 */
.ext {margin-right: 5px;padding: 0 5px;font-size: .8rem !important;color: #fff !important;background-color: #222;display:inline-flex;white-space:nowrap;height: 26px;justify-content: center;align-items: center;border-radius: 3px;}
.xlsx {background-color: #2bab9e !important;}
.xml {background-color: #6b4ba5 !important;}
.hwp {background-color: #ed9b22 !important;}
.csv {background-color: #596bc3 !important;}
.json {background-color: #dd2563 !important;}
.jpg {background-color: #9c27b0 !important;}
.XLSX{background-color: #2bab9e !important;}
.XML {background-color: #6b4ba5 !important;}
.HWP {background-color: #ed9b22 !important;}
.CSV {background-color: #596bc3 !important;}
.JSON {background-color: #dd2563 !important;}
.JPG {background-color: #9c27b0 !important;}
.ic-price {position: absolute;bottom: 15px;right: 20px;width: 48px;height: 48px;line-height: 48px;text-align: center;border-radius: 50%;color: #fff;}
.free {background: #5A5C72;}
.pay {background: #DD2563;}

/*순위마크*/
.fav_mark, .fav_mark2 {position: absolute;left: 40px;width: 61px;text-align: center;height: 63px;color: #fff;line-height: 40px;z-index: 1;top: -2px;font-size: 1.1rem;font-weight: 500;background-size: 60px !important;padding-top: 4px;z-index:2;}
.fav_mark {background: url('../../../images/mobility/common/ic_fav2.svg') no-repeat;}
.fav_mark2 {background: url('../../../images/mobility/common/ic_fav1.svg') no-repeat;}

/* 분야 */
.main .cg{font-size: 15px; font-weight: 500; z-index: 1;/* color: #0c62c0; */padding:7px 5px;width: 85px;text-align: center;color: #fff;border-radius: 5px;}
.cg-bg01{color:#e91e63 !important;}
.cg-bg02{color:#ff8d00 !important;}
.cg-bg03{color: #8bc34a !important;}
.cg-bg04{color:#FF4D0A !important;}
.cg-bg05{color: #03A9F4 !important;}
.cg-bg06{color:#006908 !important;}
.cg-bg07{color:#0056b2 !important;}
.cg-bg08{color:#4E66DA !important;}
.cg-bg09{color:#252f68 !important;}
.cg-bg10{color:#FF0000 !important;}
.cg-bg11{color:#06aec4 !important;}
.cg-bg12{color:#555 !important;}
.cg-bg13{color:#067cd7 !important;}
.cg-bg14{color:#6F44C7 !important;}
.cg-bg15{color:#4B6F95 !important;}
.cg-bg16{color:#354694 !important;}
.cg-bg17{color: #EF273C !important;}
.cg-bg18{color:#1E702C !important;}
.cg-bg19{color: #237037 !important;}

.cg-bg01 { background: rgba(233, 30, 99, 0.2) !important; }
.cg-bg02 { background: rgba(255, 141, 0, 0.2) !important; }
.cg-bg03 { background: rgba(139, 195, 74, 0.2) !important; }
.cg-bg04 { background: rgba(255, 77, 10, 0.2) !important; }
.cg-bg05 { background: rgba(3, 169, 244, 0.2) !important; }
.cg-bg06 { background: rgba(0, 105, 8, 0.2) !important; }
.cg-bg07 { background: rgba(0, 86, 178, 0.2) !important; }
.cg-bg08 { background: rgba(78, 102, 218, 0.2) !important; }
.cg-bg09 { background: rgba(37, 47, 104, 0.2) !important; }
.cg-bg10 { background: rgba(255, 0, 0, 0.2) !important; }
.cg-bg11 { background: rgba(6, 174, 196, 0.2) !important; }
.cg-bg12 { background: rgba(85, 85, 85, 0.2) !important; }
.cg-bg13 { background: rgba(6, 124, 215, 0.2) !important; }
.cg-bg14 { background: rgba(111, 68, 199, 0.2) !important; }
.cg-bg15 { background: rgba(75, 111, 149, 0.2) !important; }
.cg-bg16 { background: rgba(53, 70, 148, 0.2) !important; }
.cg-bg17 { background: rgba(239, 39, 60, 0.2) !important; }
.cg-bg18 { background: rgba(30, 112, 44, 0.2) !important; }
.cg-bg19 { background: rgba(35, 112, 55, 0.2) !important; }
.cg-bg20{background:#9B6200 !important;}
.cg-bg21{background:#B427EF !important;}
.cg-bg22{background:#484e6c !important;}
.cg-bg23{background:#6d7ed1 !important;}
.cg-bg24{background:#4e5b9b !important;}
.cg-bg25{background:#353950 !important;}

.thumbnail {overflow: hidden;}
.thumbnail img {transition:all 0.3s;}
@media screen and (max-width:1600px) {
}
@media screen and (max-width:1200px) {
}
@media screen and (max-width:900px) {
    .cg {top: 10px;}
}

/*---------- 메인 ----------*/
/* main : 공통 */
.titleWrap {
    display: flex;
    align-items: flex-end;
}
.categoryData h2.tit{width: -webkit-fill-available;}
.main h2.tit {font-size: 1.4rem;font-weight: 500;margin-right: .5em;color: var(--black); width: -webkit-fill-available;}
.moreBt1 {font-size: .9rem;display: inline-flex;align-items: center;font-weight: 500;    width: 100%;
    justify-content: end; gap: 10px}
.moreBt1 > .material-icons {font-size: 1.3rem;margin-right: .2em;}
.moreBt1:hover {margin-right: .5em;}
.moreBt2 {width: 40px;height: 40px;background-color: var(--white);border-radius: 50px;display: inline-flex;justify-content: center;align-items: center;border: 1px solid #E1E1E1;position: absolute;top: 0;right: 0;}
.moreBt1 > .material-icons {font-size: 1.7rem;}
.moreBt2:hover {background-color: transparent;border: 0;margin-right: .5em;}
.moreBt2:hover > .material-icons {color: var(--black);font-size: 2rem;}
.mainCont1 {
    background: #fff;
    box-shadow: 0 3px 6px rgba(190 190 190 / 50%);
    border-top-right-radius: 50px;
    border-top-left-radius: 50px;
    align-items: flex-start;justify-content: space-between;  padding: 20px 60px 30px;
}
.mainCont3 {display: flex;align-items: flex-start;justify-content: space-between;}
@media screen and (max-width:1600px) {
}
@media screen and (max-width:1200px) {
}
@media screen and (max-width:900px) {
    .mainCont1 {flex-direction: column; padding: 22px}
}

.iconBox {
    position: relative;
    height: 66px;
    width: 66px;
    margin: 0 auto;
    margin-bottom: 5px;
    cursor: pointer;
}
.iconBox img{
    /*position: absolute*/
}
/* On click, adjust the background position to show the bottom part of the image */
.iconBox img.click {
    display: none; /* Move the background to the bottom */
}

/* main : categoryData 분야별데이터*/
/*.iconBox {*/
/*    width: 68px;  !* Set your desired width *!*/
/*    height: 68px; !* Set your desired height *!*/
/*    overflow: hidden; !* Ensure anything overflowing is hidden *!*/
/*}*/
/*.iconBox.click img{*/
/*    object-position: bottom;*/
/*}*/
/*.iconBox img {*/
/*    width: 100%; !* Fill the width of the container *!*/
/*    object-fit: contain; !* Crop the image to cover the container *!*/
/*}*/
.mainCont1 .categoryData {width: 100% !important; height: 135px; position: relative;  border-bottom: #D8D8D8 1px solid}
.categoryData .dataList {display: flex;justify-content: flex-start;flex-wrap: wrap;}
.categoryData li {text-align: center}
.categoryData .dataList li a {padding: .5em 1em;width: 100%;height: 100%;background-color: var(--white);border-radius: 10px; box-shadow: 15px 15px 15px rgba(0 0 0 /8%); display: flex;
    justify-content: space-between;}
.categoryData .dataList li a:hover .cnt {transform:rotateY(360deg);transition:all .2s;}
.categoryData .dataList li a.loading {display: inline-flex;border: 2px dashed #B1B9C1;flex-direction: column;align-items: center;color: #bbb;}
.categoryData .dataList li .titWrap {display: inline-flex;flex-direction: column;justify-content: space-between;}
.categoryData li .titWrap .tit {color: var(--black);font-size: 15px; font-weight: 500}
.categoryData .dataList li .titWrap .material-icons {color: #B1B9C1;}
.categoryData .dataList li .cntBox {}
.categoryData li .cntBox .cnt {font-size: 18px;font-weight: 600;color: #0D1544;}
.categoryData .dataList li .cntBox .total {color: var(--black);font-size: 15px;}
@media screen and (max-width:1600px) {
}
@media screen and (max-width:1200px) {
    .mainCont1 .categoryData {width: 100%;margin-right: 0;}
    .categoryData .dataList li {width: calc(20% - 5px);}
}
@media screen and (max-width:900px) {
    .mainCont1 .categoryData {width: 100%;margin-right: 0;}
    .categoryData .dataList li {width: 33%;height: 70px;padding: 3px;}
    .categoryData .dataList li a {padding: .5em;}
    .categoryData .dataList li .cntBox .cnt {font-size: 1.3em;}
    .categoryData .dataList li a.loading .txt {font-size: .9rem;}
    .categoryData .dataList li .titWrap .material-icons {font-size: 1.4rem;}
}

/* main : vogueData 인기데이터 */
.vogueData{position: relative}
.vogueData .titleWrap .vogue-prev,
.vogueData .titleWrap .vogue-next {color: #fff;}
.vogueData .contWrap{ display: flex; justify-content: center; border: 1px solid #D8D8D8; padding: 20px 0}
.vogueData .contWrap li {position: relative; padding: 0 20px; width: 33.33% }
.vogueData .contWrap > li:not(:last-child) {
    border-right: 1px solid #ccc; /* Border between all but the last item */
}
.vogueData .contWrap .slick-slide > div > li {position: relative; }
.vogueData .contWrap .thumbnail {height: 180px; }
.vogueData .contWrap .thumbnail img {width: 100%;height: 100%;object-fit: cover;}
.vogueData .contWrap:hover .thumbnail img{
    /*transform:scale(1.2);transition:all 0.3s;*/
}
.vogueData .contWrap .thumbnail img {
    transition: transform 0.3s ease;
}

.vogueData .contWrap .thumbnail img:hover {
    transform: scale(1.2); /* 이미지를 1.2배 확대 */
}
.vogueData .contWrap .cont {padding: .7em 1em;background-color: #fff;  }
.vogueData .contWrap .cont span.date{font-family: 'PretendardGOV-Regular';}
.vogueData .contWrap .cont li{padding: 0;
    width: 100%;}
.vogueData .contWrap .cont > .tit a {color: var(--black);font-weight: 500;margin-bottom: 1rem;display: inline-block;font-size: 1.3rem;}
.vogueData .contWrap .cont > .tit a:hover {text-decoration: underline;}
.vogueData .contWrap .cont .dataInfo {display: inline-flex ; width: 100%}
.vogueData .contWrap .cont .dataInfo li {margin-right: .8em; }
.vogueData .contWrap .cont .dataInfo .tit {margin-right: .5em;}
.vogueData .contWrap .cont .dataInfo .date {color: var(--black);text-align: right;margin-top: 1em;display: block;font-size: .95rem;}
.vogueData .contWrap .cont .dataInfo .data {color: var(--black);text-align: right;margin-top: 1em;font-size: .95rem; color: var(--black);
    font-weight: 500;}
.vogueData .contWrap .cont .dataInfo .tit.ellipsis2 {
    height: 45px;

}
/*국가 공공 데이터 & 배너*/
@media screen and (max-width:1200px) {
    .openData{display: block !important;}
    .openData .item1{margin-bottom: 30px}
    .openData .item2 .bannerData{justify-content: center}
    .openData .item2 .titleWrap{text-align: center}
    .bannerData{flex-direction: row!important; }
    .banner{
        width: 411px;}

}

.openData h2.tit{margin: 0}
.item1 {
    flex: 7; /* First item takes 8 parts of the available space */
}

.item2 {
    flex: 3; /* Second item takes 2 parts of the available space */
}
/*탭*/

@media screen and (max-width:1600px) {
}
@media screen and (max-width:1200px) {
	.mainCont1 {flex-direction: column;}
    .mainCont1 .vogueData {width: 100%;width: 100%;margin-left: 0;margin-top: 2em;}
    .vogueData .slick-slide {margin: 0 .5em;}
    
    .mainCont1 .vogueData .titleWrap .tit {color: var(--black) !important;}
    .vogueData .titleWrap .vogue-prev,
    .vogueData .titleWrap .vogue-next {color: #000;}
    .vogueData .titleWrap .moreBt1 {color: #000 !important;}
}
@media screen and (max-width:900px) {
    .vogueData .contWrap li {
        width: 100%;
    }
    .vogueData .slick-slide {margin: 0;}
    .vogueData .contWrap{
        flex-direction: column;
        gap: 20px;
    }
    .vogueData .contWrap .cont{
        border-bottom: 1px solid #d8d8d8 !important;
    }
    .vogueData .contWrap .cont:last-child{
        border: 0;
    }
    .bannerData {
        flex-direction: column !important;
    }
    .bannerData .banner{
        width: 100%;}
}


/* main : newData */
.newData .dataTop_gallery {display: flex;gap: 1em;}
.newData .dataTop_gallery > li {width: 25%;position: relative;}
.newData .dataTop_gallery > li > a {padding: 4em 1em 1em;background-color: var(--white);width: 100%;height: 100%;display: inline-flex;border-radius: 10px;box-shadow: 0 3px 6px rgba(190 190 190 / 16%);}
.newData .dataTop_gallery > li > a .cont {width: 100%;}
.newData .dataTop_gallery .tit {color: var(--black);font-weight: 500;margin-bottom: .3em;font-size: 1.3rem;}
.newData .dataTop_gallery .txt {height: 50px;}
.newData .dataTop_gallery > li:hover .tit {text-decoration: underline;}
.newData .dataTop_gallery > li:hover > a {box-shadow: 0 3px 6px rgba(190 190 190 / 50%);} 
.newData .dataTop_gallery > li:hover {margin-top:-.5em;}
.newData .dataTop_gallery .date {color: var(--black);text-align: right;margin-top: 1em;display: block;font-size: .95rem;}
.dataBot_table {border-collapse: collapse ;border-spacing: 0 10px; }
.dataBot_table thead th {padding-bottom: 1em;font-weight: 400;color: #999EB4;font-size: .95rem;position: relative;}
.dataBot_table thead th::after {content: '';position: absolute;width: 1px;height: 14px;background-color: #CBCFDF;display: inline-block;top: 4px;right: 0;}
.dataBot_table tbody{
    border-top: 1px solid #555555; border-bottom: 1px solid #555;
}
.dataBot_table tbody tr {border-radius: 10px;border-collapse: separate;border-spacing: 0 10px; border-bottom: 1px solid #C6C6C6}
.dataBot_table tbody tr:last-child{border: 0}
.dataBot_table tbody td {padding: 1.5em .5em;text-align: center;background-color: #fff;}
.dataBot_table .tit {font-weight: 500;font-size: 1.1rem;color: var(--black);}
.dataBot_table tbody  tr:hover {box-shadow: 0 3px 6px rgba(190 190 190 / 50%);}
.dataBot_table tbody tr:hover .tit {text-decoration: underline;}
.dataBot_table .go_site{
    border: #0D1544 1px solid; border-radius: 6px;
    color: #0d1544;
    font-weight: 500;
    padding: 10px;
    width: 80px;
}
.dataBot_table span.category{
    border-radius: 18px;
    background: #CED0D9;
    color: #0D1544;
    padding: 10px 20px;
}
.scrollTxt {display: none;}

/*배너*/
.bannerData{
    height: 100%; }
.banner{
    height: calc(50% - 40px);
    padding: 40px 30px;
}
.banner .tit{font-size: 20px;  }
.banner1{
    background: url("../../../images/main/banner01.png") no-repeat 0 0;
    background-size: 100% 100%;

}
.banner2{
    background: url("../../../images/main/banner02.png") no-repeat 0 0;
    background-size: 100% 100%;
}
.banner button{color: #fff; padding: 10px 20px;  border-radius: 8px}
button.skyblue{
    background: #246BEB;

}
button.blue{
    background: #0D1544;
}

@media screen and (max-width:1600px) {
}
@media screen and (max-width:1200px) {
}
@media screen and (max-width:900px) {
    .newData .dataTop_gallery {flex-wrap: wrap;}
    .newData .dataTop_gallery > li {width: 100%;}
    .newData .dataTop_gallery > li > a {padding: 3em 1em 1em;}
    .scrollTable {overflow-x: auto;}
    .scrollTable .dataBot_table {min-width: 700px;}
    .dataBot_table tbody td,
    .dataBot_table tbody span {font-size: .95rem !important;}
    .scrollTxt {padding: .5em;font-size: .85rem;color: #808ab9;display: block;background-color: #e8eaf7;border-radius: 5px;text-align: center;}
    .scrollTxt > .material-icons {font-size: 1.3rem;}
}


/* main : dualWrap 소비동향, 주요상권 공통 */
.dualWrap .cont {display: flex;flex-direction: row;align-items: flex-start;justify-content: space-between;}
.dualWrap .indicators {width: calc(70% - 10px);}
.dualWrap .cont .indicatorsTop {display: flex;justify-content: space-between;}
.dualWrap .cont .indicatorsTop > li {padding: 1em;width: calc(50% - 5px);height: 180px;background-color: #E7EDF5;border-radius: 10px;display: inline-flex;flex-direction: column;align-items: center;justify-content: center;position: relative;}
.dualWrap .cont .indicatorsTop > li .font_bold:hover {transform:rotateY(360deg);transition:all .4s;}
.dualWrap .cont .indicatorsTop > li > span {color: var(--black);font-size: .8rem;}
.dualWrap .cont .indicatorsTop > li .tit {font-weight: 500;margin-bottom: .3em;font-size: 1.2rem;}
.dualWrap .cont .indicatorsBot {display: flex;flex-wrap: wrap;justify-content: space-between;}
.dualWrap .cont .indicatorsBot li {margin-top: 10px;width: calc(33.33333% - 5px);height: 85px;background-color: var(--white);border: 1px solid #DCE0E6;border-radius: 10px;display: inline-flex;flex-direction: column;align-items: center;justify-content: center;color: var(--black);}
.dualWrap .cont .indicatorsBot li .tit {font-size: .95rem;}
.dualWrap .cont .indicatorsBot li .data {font-size: .8rem;}
.dualWrap .cont .indicatorsBot li .txt {font-size: .9rem;color: #7287C1;}
.dualWrap .cont .ranking {width: calc(30% - 10px);}
.dualWrap .cont .ranking > div {height: 180px;margin-bottom: 10px;border-radius: 10px;padding: 1em;}
.dualWrap .cont .ranking > div:last-child {margin-bottom: 0;}
.dualWrap .cont .ranking > div .tit {margin-bottom: .5em;padding-bottom: .5em;color: var(--white);font-weight: 500;font-size: 1.1rem;border-bottom: 1px solid rgba(255 255 255 / 15%);display: block;text-align: center;}
.dualWrap .cont .ranking > div .dataList li {margin-bottom: .5em;color: var(--white);}
.dualWrap .cont .ranking > div .dataList li:last-child {margin-bottom: 0;}
.dualWrap .cont .ranking > div .dataList .num {width: 28px;height: 28px;margin-right: .5em;font-weight: 500;display: inline-flex;justify-content: center;align-items: center;}
.dualWrap .cont .ranking > div .dataList li:nth-child(1) .num {background-color: rgba(0 0 0 / 20%);}
.dualWrap .cont .ranking > div .dataList li:nth-child(2) .num {background-color: rgba(0 0 0 / 10%);}
.dualWrap .cont .ranking > div .dataList li:nth-child(3) .num {background-color: rgba(0 0 0 / 6%);}
@media screen and (max-width:1600px) {
}
@media screen and (max-width:1200px) {
    .mainCont3 {flex-direction: column;}
    .dualBox1,
    .dualBox2 {width: 100% !important;margin-right: 0;margin-left: 0 !important;}
    .dualBox2 {margin-top: 2em;}
}
@media screen and (max-width:900px) {
    .dualWrap .cont {flex-direction: column;}
    .dualWrap .indicators {width: 100%;}
    .dualWrap .cont .indicatorsTop {flex-direction: column;}
    .dualWrap .cont .indicatorsTop > li {width: 100%;height: 130px;}
    .dualWrap .cont .indicatorsTop > li:last-child {margin-top: .5em;}
    .dualWrap .cont .indicatorsBot li {width: calc(50% - 5px);}
    .dualWrap .cont .ranking {width: 100%;margin-top: 1em;display: flex;justify-content: space-between;}
    .dualWrap .cont .ranking > div {width: calc(50% - 5px);}
    .dualWrap .cont .ranking > div .dataList li .txt {font-size: .9rem;}
}
/* main : dualBox1 소비동향 */
.dualBox1 {width: 50%;margin-right: 1.5em;}
.dualBox1 .cont .indicatorsTop > li:nth-child(1)::after {content: '';position: absolute;bottom: -20px;right: -15px;width: 90px;height: 90px;background: url('../../../images/mobility/main/indicatorsTop1.png') no-repeat;background-size: 100%;}
.dualBox1 .cont .indicatorsTop > li:nth-child(2)::after {content: '';position: absolute;bottom: -20px;right: -15px;width: 90px;height: 90px;background: url('../../../images/mobility/main/indicatorsTop2.png') no-repeat;background-size: 100%;}
/* main : dualBox2 주요상권 */
.dualBox2 {width: 50%;margin-left: 1.5em;}
.dualBox2 .cont .indicatorsTop > li:nth-child(1)::after {content: '';position: absolute;bottom: -20px;right: -15px;width: 90px;height: 90px;background: url('../../../images/mobility/main/indicatorsTop3.png') no-repeat;background-size: 100%;}
.dualBox2 .cont .indicatorsTop > li:nth-child(2)::after {content: '';position: absolute;bottom: -20px;right: -15px;width: 90px;height: 90px;background: url('../../../images/mobility/main/indicatorsTop4.png') no-repeat;background-size: 100%;}
/* main : rankingBox1 유입지별 매출 순위 */
.rankingBox1 {background-color: #3892EC;}
/* main : rankingBox2 업종별 매출 순위 */
.rankingBox2 {background-color: #FC7E36;}
/* main : rankingBox3 지역별 매출 순위 */
.rankingBox3 {background-color: #8275DE;}
/* main : rankingBox4 업종별 매출 순위 */
.rankingBox4 {background-color: #3D4754;}
@media screen and (max-width:1600px) {
}
@media screen and (max-width:1200px) {
}
@media screen and (max-width:900px) {
    .dualBox1 .cont .indicatorsTop > li:nth-child(1)::after,
    .dualBox1 .cont .indicatorsTop > li:nth-child(2)::after,
    .dualBox2 .cont .indicatorsTop > li:nth-child(1)::after,
    .dualBox2 .cont .indicatorsTop > li:nth-child(2)::after {right: 0 !important}
}


/* main : mainCont4 데이터시각화, 셀프분석사례 공통 */
.mainCont4 {display: flex;align-items: flex-start;justify-content: space-between;}
.boardList > li {margin-bottom: 10px;}
.boardList > li:last-child {margin-bottom: 0;}
.boardList > li > a {padding: 1em;background-color: #F2F3F5;border-radius: 10px;position: relative;display: flex;}
.boardList > li > a:hover {background-color: #ebedf0;}
.boardList > li > a:hover .thumbnail img {transform:scale(1.2);}
.boardList > li .thumbnail {width: 200px;height: 100px;margin-right: .8em;}
.boardList > li .tit {margin-bottom: .3em;font-size: 1.1rem;font-weight: 500;color: var(--black);}
.boardList > li > a:hover .tit {text-decoration: underline;}
.boardList > li .data {color: var(--black);font-size: .95rem;position: absolute;bottom: .5em;right: 1em;}
@media screen and (max-width:1600px) {
}
@media screen and (max-width:1200px) {
}
@media screen and (max-width:900px) {
    .mainCont4 {flex-direction: column;}
    .dataWrap {width: 100% !important;margin-right: 0 !important;}
    .slefWrap {width: 100% !important;margin-left: 0 !important;margin-top: 2em;}
}

/* main : dataWrap 데이터시각화 */
.dataWrap {width: 50%;margin-right: 1.5em;}
.dataWrap .cont .txtWrap .txt,
.dataWrap .cont .txtWrap .txt > * {font-weight: 400;}
/* main : slefWrap 셀프분석사례 */
.slefWrap {width: 50%;margin-left: 1.5em;}
.slefWrap .cont .txtWrap .txt {font-weight: 400;}

/* main : bannerWrap */
.bannerWrap {display: flex;flex-direction: row;justify-content: space-between;align-items: center;}
.bannerWrap li {width: 10%;}
.bannerWrap li a:hover img {transform:rotateY(360deg);transition:all .4s;}
.bannerWrap img {width: 100%;height: auto;}
@media screen and (max-width:1600px) {
}
@media screen and (max-width:1200px) {
    .bannerWrap li {width: calc(33.33333% - 10px); }
}
@media screen and (max-width:900px) {
    .bannerWrap {flex-wrap: wrap;justify-content: center;}
    .bannerWrap li {width: auto;width: calc(50% - 10px);text-align: center;}
    .bannerWrap img {max-width: 140px;height: auto;}
}


/* main : bannerWrap */