@charset "utf-8";

/*-----main-banner*/
.main-banner-wrap {
    height: 815px;
    position: relative;
}
.main-banner-wrap .main-banner {
    height: 100%;
}
.main-banner nav {
    position: absolute;
    top: 50%;
    left: 5%;
    transform: translateY(-50%);
    background-color: #fff;
    border: 1px solid #e6e6e6;
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.1);
    border-radius: 5px;
    padding: 10px;
    z-index:1;
}
.main-banner nav>ul {
    margin-top: 10px;
}
.main-nav>ul>li {
    background-color: #e8e8e8;
    border-radius: 5px;
    margin-bottom: 5px;
    padding: 3px 15px;
    cursor: pointer;
    transition: all 0.5s;
}
.main-nav>ul>li a{display: block;transition: all 0.5s;}
.main-nav>ul>li.on {
    background-color: #1e96c4;
    color: white;
}
.main-nav>ul>li.on a{color: white;}
.main-nav>ul>li .text {display: none;}

.main-nav li a{display: inline-block;width:100%;background-repeat: no-repeat;background-position: 99% center;background-image: url('/images/portal/icon/arrow_right.png');transition: all 0.3s;box-sizing: border-box;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
.main-nav li:hover a {background-position: 98.5% center;text-decoration: underline;}
.main-nav li.on a {background-image: url('/images/portal/icon/arrow_right_w.png');}


/* quick */
.quick-menu-wrap {
    width: 125px;
    padding: 50px 10px 0px 10px!important;
    box-sizing: border-box;
    position: fixed;
    top: 33%;
    right: 5%;
    left: auto !important;
    background-color: #fff;
    border: 1px solid #e6e6e6;
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.1);
    border-radius: 5px;
    z-index: 999;
}
.quick-menu-close {
    position: absolute;
    right: 0;
    top: -30px;
    width: 18px;
    height: 18px;
    font-size: 0;
    background-color: transparent;
    background-image: url('/images/portal/button/quick_close.png');
}
.quick-menu-wrap .quick-menu2 {display: none;}

.quick-menu-wrap .quick-menu li {
    padding: 20px 0;
    text-align: center;
    border-bottom: 1px solid #c7c7c7;
}
.quick-menu-wrap .quick-menu li:last-child {border: none;}
.quick-menu-wrap .quick-menu li a {
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;
    font-size:0;
    z-index:1;
}
.quick-menu-wrap .quick-menu li .inner{position:relative;}
.quick-menu-wrap .quick-menu li .img-wrap{position:relative;}
.quick-menu-wrap .quick-menu li .hover {
    display: block;
    background-color: #d3eaf3;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    border-radius: 100%;
    z-index: -1;
}
.quick-menu-wrap .quick-menu li .inner:hover .hover {
    animation-name: nav;
    animation-duration: 0.5s;
    animation-fill-mode: forwards;
}
.quick-menu-wrap .quick-menu li .inner:hover .text{color:#1e96c4;}
.quick-menu-wrap .quick-menu li .text{margin-top:10px;}

.quick-menu-wrap .quick-menu-tab {
    width: 100%;
    text-align: center;
    position: absolute;
    left: 0;
    top: 0;
}
.quick-menu-wrap .quick-menu-tab li {
    background-color: #e6e6e6;
    cursor: pointer;
    float: left;
    width: 54%;
    height: 48px;
}
.quick-menu-wrap .quick-menu-tab li:nth-child(2) {
    width: 46%;
    float: right;
}
.quick-menu-wrap .quick-menu-tab li.on {
    background-color: #fff;
}
.quick-menu-wrap .quick-menu-tab li a {
    display: block;
    line-height: 48px;
}

.quick-menu-wrap2 {
    width: 200px;
    padding: 30px 10px;
    box-sizing: border-box;
    position: fixed;
    top: 20%;
    left: 3%;
    right: auto !important;
    background-color: #fff;
    border: 1px solid #e6e6e6;
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.1);
    border-radius: 5px;
    text-align: center;
    z-index: 999;
}
.quick-menu-wrap2>p {
    margin-bottom: 10px;
    letter-spacing: 5px;
}
.quick-menu-wrap2 .banner {
    display: block;
    width: 100%;
    height: 80px;
    overflow: hidden;
    margin-bottom: 10px;
    position: relative;
}
.quick-menu-wrap2 .banner:last-child {
    margin-bottom: 0;
}
.quick-menu-wrap2 .banner>img {
    width: 100%;
}
/* .quick-menu-wrap2 .banner1>img {left: -50%;} 
.quick-menu-wrap2 .banner2>img {left: -23%; width: 170%;} 
.quick-menu-wrap2 .banner3>img {left: -15%; top: 43%;} 
.quick-menu-wrap2 .banner4>img {left: -10%;}  */

@keyframes nav {
    from {
        width: 5px;
        height: 5px;
    }
    to {
        width: 60px;
        height: 60px;
    }
}
.main-banner-wrap .inner {
    position: relative;
    margin: 55px auto 0;
    width: 1240px;
    height: 100%;
}
.main-banner-wrap .tab {
    position: absolute;
    top: 30px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
}

.tab2 {
	display: inline-block;
    border: 1px solid #c6c6c6;
    text-align: center;
    overflow: hidden;
    border-radius: 5px;
}

.main-banner-wrap .data-time {
    position: absolute;
    top: 78px;
    left: 50%;
    transform: translateX(-50%);
    border-bottom: 1px solid #d5d5d5;
    /* border: 1px solid #e6e6e6;
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.1);
    border-radius: 5px; */
    z-index: 1;
    background-color: #fff;
    padding: 3px 8px;
}

/*main-banner1 */
.main-banner1 {
    display: none;
}
.main-banner1>.inner .mainchart {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}
.main-banner1>.inner .map-popup {
    position: absolute;
    left: auto;
    right: 0;
    padding: 0;
    width: 240px;
    transform: translateY(-50%);
    border: 1px solid #e6e6e6;
}
.main-banner1>.inner .info-text {
    position: absolute;    
    top:62px;
    right:0;
}
.main-banner1>.inner .info-text2 {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    font-size: 17px;
    letter-spacing: -0.5px;
}
.main-banner1 .map-popup>.top {
    position: relative;
    background-color: #ffd6c2;
    text-align: center;
    padding: 5px;
    font-size: 18px;
}
.main-banner1 .map-popup .btn-close {
    position: absolute;
    top: 50%;
    right: 15px;
    float: none;
    margin-top: -4.5px;
    width: 9px;
    height: 9px;
    background: url(/images/portal/button/btn_close_mini.png) no-repeat;
}
.main-banner1 .map-popup>.chart{
    overflow: hidden;
    margin: 20px 0px 10px 0;
}
.main-banner1 .map-popup>.chart img {
    float: left;
    margin-left: 20px;
}
.main-banner1 .map-popup>.chart .text {
    text-align: center;
}
.main-banner1 .map-popup>.chart .text>.percent {
    color: #ff7835;
}
.main-banner1 .map-popup>.chart .text>strong,.main-banner .map-popup>.chart .text>p {font-size: 18px;}
.main-banner1 .map-popup>.align-right {
    padding: 0 10px;
    margin-bottom: 10px;
}

/*main-banner2*/
.main .main-banner2 .mainchart {
    position: absolute;
    top: 90px;
}
.main .main-banner2 .chart-wrap {
    width: 55%;
    position: absolute;
    right: 0;
    top: 15%;
}
.main .main-banner2 .chart-wrap>.chart-box {
    padding:25px; 
    width: 100%;
    height: auto;
    background-color: #fff;
    border: 1px solid #e6e6e6;
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.1);
    border-radius: 5px;
}
.main .main-banner2 .chart-wrap>.chart-box1 ul {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
}
.main .main-banner2 .chart-wrap>.chart-box1 ul>li {
    width: 18%;
    background-color: #eeeeee;
    text-align: center;
    border-radius: 5px;
}
.main .main-banner2 .chart-wrap>.chart-box1 ul>li .text {
    margin: 20px 0 30px 0;
}
.main .main-banner2 .chart-wrap>.chart-box1 ul>li .text span{
    display: block;
    word-break:keep-all;
}
.main .main-banner2 .chart-wrap>.chart-box1 ul>li img {margin-bottom: 30px;}

.main .main-banner2 .chart-wrap>.chart-box2 {
    margin-top: 20px;
}
.main .main-banner2 .chart-wrap>.chart-box2 ul {
   /*  width: 75%; */
    margin: 0 auto 10px auto;
}
/* .main .main-banner2 .chart-wrap>.chart-box2 ul>li {
    padding: 35px 0;
    box-sizing: border-box;
    border-radius: 5px;
    text-align: center;
} */

/*slide*/
/* .main div.banner{position:relative; display:inline-block; width:611px;} */
.main div.banner .slide-btn{position:absolute; bottom:10px; right:10px; }
.main div.banner .slide-btn button{width:20px; height:20px; font-size:0; background-color:transparent; background-repeat:no-repeat;}
.main div.banner .slide-btn .play{background-image:url(/images/portal/button/btn_play.png);}
.main div.banner .slide-btn .stop{background-image:url(/images/portal/button/btn_stop.png);}

.main div.banner ~ .chart-wrap{float:right;}
.main div.banner ~ .chart-wrap .chart-box{/* padding:15px 25px; */ width:611px; height:287px;}
.main div.banner ~ .chart-wrap .chart-box .chart-top{margin-bottom:10px;}
.main div.banner ~ .chart-wrap:nth-of-type(2){display:none;}

.main div.banner ~ .chart-wrap .table-wrap {height: 250px;}

#mm2 #recomDiv_01{display:none;}

.main .slick-list .slick-slide[aria-hidden=false]{z-index:1;}
.main .slick-slider:not(.urgent-list) .slick-list .slick-slide a{position:relative; display:block;/*  height:100%; */}
/* .main .slick-list .slick-slide a:focus:after,
.main .slick-list .slick-slide a:focus:before{
	content:'';
	position: absolute;
	outline:0;
	border: 2px dashed;
	box-sizing:border-box;
} */
/* .main .slick-list .slick-slide a:focus:after{top:0; left:0; width:100%; height:100%; border-color:#222;}
.main .slick-list .slick-slide a:focus:before{top:2px; left:2px; width:calc(100% - 4px); height:calc(100% - 4px); border-color:#fff; z-index:1;} */
.main .slick-list .slick-slide .text-wrap a{outline:0; display:inline-block;}

.main .slide-box,
.main .slide-box .slick-slide{height: 287px; overflow: hidden;}
.main .slide-box .inner{margin:55px auto 0;width:1240px;}
.main .slide-box .slick-slide img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}


/* 0316 데이터랩 새로워졌습니다 팝업 */
/* 22.11.08 신규 서비스 오픈 수정 */
.main .slide-box .slick-slide.new-site-slide{background:url('/images/portal/main/mainBanner_00.png') no-repeat;}
.main .slide-box .slick-slide.new-site-slide .text-wrap{
    position: absolute;
    top: 50%;
    /* right: 20%; */
    right: 270px;
    /* width: 52%; */
    transform: translateY(-50%);
    box-sizing: border-box;
}
.main .slide-box .slick-slide.new-site-slide .new-site-text p {font-size: 15px; font-weight: 300; letter-spacing: 0;color: #fff;word-break: keep-all;}
.main .slide-box .slick-slide.new-site-slide .new-site-text span{font-size: 15px;}
.main .slide-box .slick-slide.new-site-slide .new-site-text.top-text {margin-bottom: 10px; text-align: center;}
.main .slide-box .slick-slide.new-site-slide .new-site-text.top-text:after {content: ''; display: block; clear: both;}
.main .slide-box .slick-slide.new-site-slide .new-site-text.top-text img {
    position: inherit;
    top: auto;
    left: auto;
    display: inline-block;
    vertical-align: bottom;
    transform: none;
}
.main .slide-box .slick-slide.new-site-slide .new-site-text.top-text .view-more-btn {display: block; margin-top: 20px;}
/* .main .slide-box .slick-slide.new-site-slide .new-site-text.bottom-text p:first-child {margin-bottom: 20px;} */
.main .slide-box .slick-slide.new-site-slide .new-site-text.bottom-text a{color: #fff67b; font-weight: bold; font-size: 20px; border-bottom: 1px solid #fff67b;}
.main .slide-box .slick-slide.new-site-slide .new-site-text.bottom-text a:hover{color: #ffffff; border-bottom: 1px solid #fff;}



/*-----chart*/
/*tab*/
.main .chart-wrap > .chart-box {
    padding: 25px;
    position: relative;
    width: 48.5%;
/*    height: 460px; */
    height: 440px;
    clear: inherit;
}

/* .main .chart-wrap .chart-top {
    overflow: hidden;
} */
.main .chart-wrap .chart-top h3,
.main .chart-wrap .chart-top strong{float: left;}
.main .chart-wrap .chart-top .chart-a {float: right;}
.main .chart-wrap .chart-top .chart-b {float: left;}
/* 20230109 메인 수정 */
.main .chart-wrap .chart-top .chart-a {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}
.main .chart-box ul.update-data{display: flex; flex-wrap: wrap;}
.main .chart-box ul.update-data>li{
    width: 32%;
    background-color: #f7f7f7;
    border-radius: 10px;
    margin-right: 10px;
    margin-bottom: 10px;
    overflow: hidden;
}
.main .chart-box ul.update-data>li:hover{
    background-color: #e4f0f5;
}
.main .chart-box ul.update-data>li>a {
    position: relative;
    width: 100%;
    height: 100%;
    display: block;
    box-sizing: border-box;
    padding: 60px 0;
}
.main .chart-box ul.update-data>li:nth-child(3),
.main .chart-box ul.update-data>li:nth-child(6) {
    margin-right: 0;
}
.main .chart-box ul.update-data>li img{
    /* border: 1px solid red; */
    padding: 0px 0px 0px 15%;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}
.main .chart-box ul.update-data>li p{
    display: block;
    display: block;
    width: 60%;
    text-align: center;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}
.main .chart-box ul.update-data>li:hover p{font-weight:500;}

/*chart2*/
.main .chart2 .chart>#chartdiv2 {float: left;}
.main .chart2 .chart>.chart-list {float: right;}
#cardRank.chart-list>li {padding: 4px 5px; cursor: default;}

/*chart3*/
.main .chart-wrap>.chart-box.chart3 {float:left; height: 430px;}
.main .chart3>.chart-top>.tab {margin-left: 50px;}
.main .chart3>.chart-top .chart-b {float: left;}
.main .chart3 .chart-list {float: left; margin-right: 50px;}
.main .chart3 .chart{float: left; overflow: hidden;}
.main .chart3 .chart > div {float: left;  margin-right: 50px;}
.main .chart3 .chart > .con-inner > div {float: left;  margin-right: 50px;}
.main .chart3 .chart > .con-inner > div:last-of-type {margin-right: 0;}

/*chart4*/
.main .chart-box.chart4 {/*height: 430px;*/height: 520px;}
.main .chart4>.content  ul>li{ float: left; width: 48%; margin-bottom: 10px; padding: 15px; box-sizing: border-box; background-color: #eeeeee;}
.main .chart4>.content  ul>li:nth-child(even) {float: right;}
.main .chart4>.content  ul>li .news-division {display: inline-block; margin-bottom: 5px; padding: 3px 8px; border-radius: 3px; color: #fff; background-color: #1e96c4;}
.main .chart4>.content  ul>li .news-division2 {background-color: #59757f;}
.main .chart4>.content  ul>li .news-text { font-size: 20px; overflow: hidden; -webkit-line-clamp: 2; display: -webkit-box;-webkit-box-orient: vertical;}
.main .chart4>.content  ul>li .news-date {margin-top: 10px; opacity: 0.7; text-align: right;}
.main .chart4>.table-wrap {height: 240px;}


.main .chart-box.chart40 {height: 455px;/*height: 520px;*/}
.main .chart40>.content  ul>li{ float: left; width: 48%; margin-bottom: 10px; padding: 15px; box-sizing: border-box; background-color: #eeeeee;}
.main .chart40>.content  ul>li:nth-child(even) {float: right;}
.main .chart40>.content  ul>li .news-division {display: inline-block; margin-bottom: 5px; padding: 3px 8px; border-radius: 3px; color: #fff; background-color: #1e96c4;}
.main .chart40>.content  ul>li .news-division2 {background-color: #59757f;}
.main .chart40>.content  ul>li .news-text { font-size: 20px; overflow: hidden; -webkit-line-clamp: 2; display: -webkit-box;-webkit-box-orient: vertical;}
.main .chart40>.content  ul>li .news-date {margin-top: 10px; opacity: 0.7; text-align: right;}
.main .chart40>.table-wrap {height: 365px;}




/*chart4_1*/
.main .chart-box.chart4_1 {/*height: 430px;*/height: 280px;}
.main .chart4_1>.content  ul>li{ float: left; width: 48%; margin-bottom: 10px; padding: 15px; box-sizing: border-box; background-color: #eeeeee;}
.main .chart4_1>.content  ul>li:nth-child(even) {float: right;}
.main .chart4_1>.content  ul>li .news-division {display: inline-block; margin-bottom: 5px; padding: 3px 8px; border-radius: 3px; color: #fff; background-color: #1e96c4;}
.main .chart4_1>.content  ul>li .news-division2 {background-color: #59757f;}
.main .chart4_1>.content  ul>li .news-text { font-size: 20px; overflow: hidden; -webkit-line-clamp: 2; display: -webkit-box;-webkit-box-orient: vertical;}
.main .chart4_1>.content  ul>li .news-date {margin-top: 10px; opacity: 0.7; text-align: right;}
.main .chart4_1>.table-wrap {height: 240px;}


/*chart5*/
.main .chart-wrap > .chart-box.chart5 {/*height: 430px;*/ height: 430px;}
.main .chart5>.table-wrap {height: 365px;}
.main .chart-wrap > .chart-box.chart5 .tab li a {letter-spacing: -2px;}


.main .chart-wrap > .chart-box.chart50 {/*height: 430px;*/ height: 455px;}
.main .chart5>.table-wrap {height: 365px;}
.main .chart-wrap > .chart-box.chart50 .tab li a {letter-spacing: -2px;}

/*chart5_1*/
.main .chart-wrap > .chart-box.chart5_1 {/*height: 430px;*/ height: 280px;}
.main .chart5_1>.table-wrap {height: 365px;}
.main .chart-wrap > .chart-box.chart5_1 .tab li a {letter-spacing: -2px;}

.main .chart-wrap > .chart-box.chart6,
.main .chart-wrap > .chart-box.chart7 {/*height: 370px;*/ height: 440px;}

.main .chart-wrap .chart {display: none;}
.main .chart-wrap .chart-1 {display: block;}
.main .chart-wrap .table-wrap table {display: none; table-layout:fixed;}
.main .chart-wrap .table-wrap table.table-1 {display: table;}
.main .chart-wrap .table-wrap table.table-1-R {display: table;}
.main .chart-wrap .table-wrap table.table-2-R {display: table;}
.main .chart-wrap .table-wrap table td {height: 79px; box-sizing: border-box;}
.main .chart-wrap .table-wrap table.new23 td {height: 40px; box-sizing: border-box; } 
.main .chart-wrap .table-wrap table.table-1-R td {height: 40px; box-sizing: border-box; } 
.main .chart-wrap .table-wrap table.table-2-R td {height: 40px; box-sizing: border-box; } 

.main .table-type1 .subject{white-space: normal;}
.main .table-type1 .subject div{position: relative;padding-right: 1.1em;max-height: 3em;display:inline-block;line-height: 1.5em;vertical-align: middle;word-break:break-all;box-sizing: border-box;overflow: hidden;}
.main .table-type1 .subject div:before {content: '···'; position: absolute; right: 0; bottom: 0; letter-spacing: 0.1em;}
.main .table-type1 .subject div:after {content: ''; position: absolute; right: 0; margin-top: 0.2em; width: 1.1em; height: 1em; background: white;}
.main .table-type1 tbody td.subject a {word-break: break-all;}
.main .new23 tbody td div {
	width: 100%;
}
.main .new23 tbody td a {
	text-overflow: ellipsis;
    display: block;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
}

/*메인화면 기존차트 추가 2021.11.28*/
.main .chart-wrap>.chart-box.chart9 {float:left; height: auto;}
.main .chart9>.chart-top>.tab {margin-left: 50px;}
.main .chart9>.chart-top .chart-b {float: left;}
.main .chart9 .chart-list {float: left; margin-right: 50px;}
.main .chart9 .chart{float: left;/* overflow: hidden;*/}
.main .chart-wrap  .chart-box.chart9 .chart-1 {float: left; width: 100%;}
.main .chart-wrap  .chart-box.chart9 .text-list{display:block;float:right; width:330px;}
 
 /* 메인 게시판 버튼 추가 2201 */
.main .btn-more {
    margin-top:10px;
    width:100%;
    height:40px;
    line-height:40px;
    padding: 0 14px 0;
    border: 1px solid #767676;
    text-align:center;
}
.main .btn-more:hover{color:#1e96c4; border:1px solid #1e96c4;}

/* 방한 관광 현황 팝업 */
.ampopup-header {position: relative; font-size: 18px; background-color: #ffd6c2 !important;}
.ampopup-title {font-size: 100% !important; font-weight: 500 !important; text-align: center;}
.ampopup-title span {display: block;}
.ampopup-close {top: 23% !important; right: 5px !important; width: 20px !important; height: 20px !important; background-color: transparent !important;}
.ampopup-content {width: 240px !important; height: auto !important; border: 1px solid #e6e6e6; box-shadow: 0 0 15px rgba(0,0,0,0.1); background-color: #fff !important;}
.ampopup-inside {padding: 16px 30px;}
.ampopup-inside:after {content: '';display: block;clear: both;}
.ampopup-inside h3 {text-align:center; font-size: 20px; font-weight: 400;}
.ampopup-inside .pie-chart {position: relative; margin: 10px auto 5px; width: 85px; height: 85px; border-radius: 100%;}
.ampopup-inside .pie-chart .text {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 80%;
    height: 80%;
    font-size: 17px;
    font-weight: 500;
    text-align: center;
    line-height: 68px;
    border-radius: 100%;
    background-color: #fff;
    transform: translate(-50%, -50%);
}
.ampopup-inside .info {margin-bottom:5px; width: 100%; text-align:right;}
.ampopup-inside .info:before {content: '';display: block;clear: both;}
.ampopup-inside .chart-a {display: block; margin-top: 10px;}


.main .chart-wrap .chart-box.chart3 .chart-con,
.main .chart-wrap .chart-box.chart9 .chart-con{overflow-x:auto;}
.main .chart-wrap .chart-box.chart3 .chart-con::-webkit-scrollbar,
.main .chart-wrap .chart-box.chart9 .chart-con::-webkit-scrollbar{width:3px; height:3px; border-radius:1.5rem; background-color:#ebebeb;}
.main .chart-wrap .chart-box.chart3 .chart-con::-webkit-scrollbar-thumb,
.main .chart-wrap .chart-box.chart9 .chart-con::-webkit-scrollbar-thumb{border-radius:1.5rem; background-color:#999;}
.main .chart-wrap .chart-box.chart3 .chart-con::-webkit-scrollbar-thumb-track,
.main .chart-wrap .chart-box.chart9 .chart-con::-webkit-scrollbar-thumb-track{border-radius:1.5rem; background-color:#ebebeb;}
.main .chart-wrap .chart-box.chart3 .con-inner,
.main .chart-wrap .chart-box.chart9 .con-inner{min-width:1120px;}

.main .chart-wrap .loading{position:relative;}
/* .dashboard .col .loading:before{
	content:'';
	position:absolute;
	top:0;
	left:0;
	right:0;
	bottom:0; 
	background:url(../../images/portal/common/img_loading1.png) no-repeat center rgba(0,0,0,0.5); 
	z-index:5;
} */
.main .chart-wrap .loading:before{
	content:'';
	position:absolute;
	width: 47px;
	height: 47px;
	top: 50%;
	left:50%;
	background:url(../../images/portal/sub/whale_img_new.png) no-repeat center;
	background-size: contain;
	transform: translate(-50%, -50%);
	z-index:5;
}
.main .chart-wrap .loading:after{
	content:'';
	position:absolute;
	top: 50%;
	left:50%;
	width:70px;
	height:70px;
	margin:-37px 0 0 -41px;
	border-radius:100%;
	border:5px solid #c3c3c3;
	border-top-color:#1e96c4;
	border-right-color:#1e96c4;
	animation:spin 1s infinite;
	transform: translate(-50%, -50%);
	z-index:10;
}
@keyframes spin{
	0%{-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-ms-transform:rotate(0deg);-o-transform:rotate(0deg);transform:rotate(0deg);}
	100%{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-ms-transform:rotate(360deg);-o-transform:rotate(360deg);transform:rotate(360deg);}
}


.mobile-notice {
    display: none;
    position: fixed;
    left: 50%;
    bottom: 5%;
    width: 90%;
    transform: translateX(-50%);
    background-color: rgba(0,0,0,0.8);
    border-radius: 10px;
    z-index: 9999999;
    max-width: 790px;
}
.mobile-notice p {
    padding: 20px 30px;
    color: #fff;
    word-break: keep-all;
    text-align: center;
}
.mobile-notice .point {
color: #fcff1d;
}


/* pc only */
@media screen and (max-width:1400px) and (min-width:1024px) {
	.main .main-banner2 .chart-wrap {
	    width: 45%;
	}
	.main .chart2 .chart>#chartdiv2 {
	    width: calc(100% - 140px) !important;
	}
	#chart_18 {
	    width: 100% !important;
	}
	
	.main .chart4>.table-wrap .table-division, 
	.main .chart5>.table-wrap .table-division {
    	width: auto;
	}
}

@media screen and (max-height:767px) {
	.quick-menu-wrap,
	.quick-menu-wrap2{position: absolute;}
}

/* mobile test */
@media screen and (max-width:1300px) {
	/* .main div.banner{width:48.5%;} */
	/* .main div.banner ~ .chart-wrap{width:48.5%;} */
	
    .main-banner-wrap .inner{width:100%;}

    /* 22.11.08 신규 서비스 오픈 수정 */
    .main .slide-box .slick-slide.new-site-slide {background-position: 26% center;}
    .main .slide-box .slick-slide.new-site-slide .text-wrap {right: 50%; transform: translate(50%, -50%); margin-right: -155px;}
}
@media screen and (max-width:1200px) {
    /* 20230109 메인 수정 */
    .main-banner-wrap .inner {width: 100%;}
    .main .main-banner2 .chart-wrap {right: 0;}
    .main .chart-wrap .chart-top .chart-a {position: inherit; float: right; margin-top: 7px; transform: none;}
    .main .chart-box ul.update-data {justify-content: space-between;}
    .main .chart-box ul.update-data>li {margin-right: 0; width: 49.5%;}
    .main .chart-box ul.update-data>li:nth-child(3), 
    .main .chart-box ul.update-data>li:nth-child(6) {margin-right: 0;}
}
@media screen and (max-width:1200px) and (min-width:1024px) {
    /* 20230109 메인 수정 */
    .main .chart-wrap .chart-top .chart-a {position: inherit; float: right; margin-top: 7px; transform: none;}
}
@media screen and (max-width:1023px) {
    /* .main div.banner {width:100%; margin-bottom:30px;}
    .main div.banner ~ .chart-wrap{float:none; width:100%;}
    .main div.banner ~ .chart-wrap .chart-box{width:100%; height:auto;} */
    /* .main-banner-wrap .inner{width:95%;} */
	/* .main .chart-list2 li {
	    display: block;
	    width: 100%;
	    margin-left: 0;
	} */
	/* .main .slide-box .slick-slide img {left: 35%;} */

    /* 22.11.08 신규 서비스 오픈 수정 */
    /* .main .slide-box .slick-slide.new-site-slide { background-position: 65% center; } */
    .main .slide-box .slick-slide.new-site-slide .new-site-text.top-text > img {width: 280px;}
    .main .slide-box .slick-slide.new-site-slide .new-site-text.top-text .view-more-btn {margin-bottom: 10px;}
    .main .slide-box .slick-slide.new-site-slide .new-site-text.top-text .view-more-btn img {height: 40px; }

}

/* tablet */
@media screen and (max-width:1023px) {
    .quick-menu-wrap{display: none;}
    .quick-menu-wrap2{display: none;}

    /* .main.contents {padding-top: 65px;} */

    .main-banner-wrap {height: auto;}
    .main-banner-wrap .tab {top: 1.5rem;}
    .main-banner-wrap .data-time {top: 4.5rem; padding: 0.2rem 0.5rem; border-radius: 0.3rem; word-break:keep-all;}

    .main-banner nav {top: 8rem; left: 50%; padding: 1rem; width: 90%; border-radius: 0.3rem; box-sizing: border-box; transform: translate(-50%, 0);}
    .main-banner nav > ul {margin-top: 0.5rem;}
    .main-banner nav .notice {color: #999; font-size: 0.9rem;}

    .main-nav li.on a {background-image: url('/images/portal/icon/arrow_right.png');}
    .main-nav>ul>li {margin-bottom: 0.3rem; padding: 0.1rem 0.8rem; border-radius: 0.3rem;}
    .main-nav>ul>li.on {background-color: #e8e8e8;}
    /* .main-nav>ul>li a {padding-right: 1.5rem;} */
    .main-nav>ul>li a {padding-right: 1.8rem;}
    .main-nav>ul>li.on a {color: #464646;}
    .main-nav>ul>li .text {display: block; float: right; font-size: 0.9rem;}
    .main-nav>ul>li .text .percent {display: inline-block; margin-left: 0.5rem; font-size: 0.9rem; }
    .main-nav>ul>li .text .percent.up{color:#ff8549;}
    .main-nav>ul>li .text .percent.up:after{content:'';display:inline-block;margin-left: 0.3rem;vertical-align: text-top;border: 0.4rem solid transparent;border-bottom: 0.6rem solid #ff8549;}
    .main-nav>ul>li .text .percent.down{color:#42b8e4;}
    .main-nav>ul>li .text .percent.down:after{content:'';display:inline-block;margin-left:0.3rem;vertical-align:text-bottom;border: 0.4rem solid transparent;border-top: 0.6rem solid #42b8e4;}

    .main-banner-wrap .main-banner1 {height: 38rem;}
    .main .main-banner1>.inner .info-text {display: none;}
    .main .main-banner1>.inner .info-text2 {bottom: 0.7rem; width: 100%; font-size: 1.1rem; line-height: 1.3rem; letter-spacing: -0.1rem;}
    .main .main-banner1>.inner .mainchart {display: none;}

    .main-banner-wrap .main-banner2 {/*height: 53rem;*/height: 40rem;}
    .main .main-banner2 .mainchart {top: 8rem; left: 50%; transform: translateX(-50%); width:100%;}
    .main .main-banner2 .mainchart > div {margin: 0 auto; width:100% !important; height:530px !important;}
    .main .main-banner2 .chart-wrap {
        display: none;
        padding: 0.9rem 0.9rem 1.5rem 0.9rem;
        box-shadow: 0 0 6px rgba(0, 0, 0, 0.1);
        width: 90%;
        left: 50%;
        border: 1px solid #e6e6e6;
        border-radius: 0.6rem;
        box-sizing: border-box;
        background-color: #fff;
        transform: translateX(-50%);
        z-index: 9;
    }
    .main .main-banner2 .chart-wrap.on{display:block;}
    .main .main-banner2 .chart-wrap>.chart-box {clear: both; border: 0 none; box-shadow: none;}
    .main .main-banner2 .chart-wrap>.chart-box1 ul {flex-wrap: wrap; flex-direction: row; justify-content: space-evenly;}
    .main .main-banner2 .chart-wrap>.chart-box1 ul>li {margin-bottom: 0.4rem; width: 30%; border-radius: 0.3rem;}
    .main .main-banner2 .chart-wrap>.chart-box1 ul>li:nth-child(3) {clear: both;}
    .main .main-banner2 .chart-wrap>.chart-box1 ul>li img {margin-bottom: 1rem;}
    .main .main-banner2 .chart-wrap>.chart-box1 ul>li .text {margin: 0.8rem 0 1rem 0;}

    .main .main-banner2 .chart-wrap>.chart-box2 {margin-top: 0;}
    .main .main-banner2 .chart-wrap>.chart-box2 .chart-a {position: absolute; bottom: -0.9rem; left: 50%; transform: translateX(-50%);}
    .main .main-banner2 .chart-wrap>.chart-box2 .chart-top {position: initial;}

    .main .slide-box .inner {width: 100%;}
    
    .main .chart-wrap .btn-close {display: block; float: right; width: 20px; height: 20px; font-size: 0; background: url('/images/portal/button/btn_close.png') no-repeat center center;}
    .main .chart-wrap .chart-top strong {float: left; display: block; font-size: 1rem;}
    
    .main .chart-wrap > .chart-box {padding: 1rem; width: 100%; height: auto;}
    .main .chart-wrap > .chart-box.chart6,
    .main .chart-wrap > .chart-box.chart7{height: auto;}

    .main .chart-wrap>.chart-box.chart1 .tab-box {margin-bottom: 1rem;}

    /* .main .chart3 .chart-list {float: none; margin-right: 0; margin-bottom: 1.5rem; width: 100%;}
    .main .chart3 .chart-list > li a {padding: 0.3rem 0.7rem;} */
    .main .chart3 .chart div {margin-right: 0; margin-bottom: 1rem; /*width: 100%;*/}
    .main .chart3 .chart div:last-child {margin-bottom: 0;}
    .main .chart3 > .chart-top>.tab {clear: both; margin: 1rem auto 0;}

    .main .chart-wrap>.chart-box.chart3 {height: auto;}
    .main .chart-wrap>.chart-box.chart3 .chart-top {text-align: center;}
    .main .chart-wrap>.chart-box.chart3 .chart-top strong {float: none; text-align: left;}

    .main .chart4 > .table-wrap {height: auto;}

    .main .chart-wrap > .chart-box.chart5 {height: auto;}
    
    .main .chart-wrap .table-wrap{overflow-x:auto;}
    .main .chart-wrap .table-wrap table,
    .main .chart-wrap .mCSB_container table{width:1200px;}
    
    
    
    .main .chart-wrap .chart-box.chart3 .chart-top .chart-a {
	    position: absolute;
	    top: 0;
	    right: 0;
	}
	
	.main .chart-wrap .chart-box.chart3 .chart-top {
	    position: relative;
	}
	
	.main .chart-wrap .chart-box.chart3 .chart-top .tab li {
	    display: inline-block;
	    margin: 0 0.1rem 0.2rem;
	    box-sizing: border-box;
	    border: 1px solid #c6c6c6;
	    border-radius:0.3rem;
	    
	}
	
	.main .chart-wrap .chart-box.chart3 .chart-top .tab {
	    border: 0 none;
	    border-radius: 0;
	}
	    

}
@media screen and (max-width:780px) {
	
}
@media screen and (max-width:720px) {
	.main-banner-wrap .main-banner2 {height: 41.7rem;}
	.main .chart-wrap .table-wrap table{width:640px;}
	
	.main-banner-wrap .tab {display: table; width: 90%; border: 1px solid #c6c6c6;}
	.main-banner-wrap .tab>li {margin: 0; display: table-cell; border: 0; border-right: 1px solid #c6c6c6;}
	.main-banner-wrap .tab>li:last-of-type {border: 0 none;}
	
	#chart_18 {
	    width: 100% !important;
	}
	
	.main .chart2 .chart>.chart-list {
	    float: none;
	}
	
	.main .chart2 .chart>#chartdiv2 {
	    float: none;
	}
	
	.main .chart2 .chart>.chart-list li {
	    display: inline-block;
	    vertical-align: top;
	    width: 25%;
	}
	
	.main .chart-wrap > .chart-box.chart5 .tab li {
	    width: 40%;
	}
	
	.main .slide-box, 
	.main .slide-box .slick-slide {height: 270px;}
	/* .main .slide-box .slick-slide img {left: 19%; height: 100%;} */
	.main .slide-box .slick-slide img {left: 64%; height: 100%;}
    .main .slide-box .slick-slide:nth-child(2) img {left: 40%;}
	/* 22.11.08 신규 서비스 오픈 수정 */
    /* .main .slide-box .slick-slide.new-site-slide {background-position: 62% center;} */
	.main .slide-box .slick-slide.new-site-slide .text-wrap {width: 28rem;}
}
@media screen and (max-width:680px) {
	.main .chart2 .chart>.chart-list li {
	    word-break: keep-all;
	    width: auto;
	}	
	
	/* 22.11.08 신규 서비스 오픈 수정 */
    .main .slide-box .slick-slide.new-site-slide {background-size: cover;}
    .main .slide-box .slick-slide.new-site-slide .text-wrap {margin-right: -115px;}
    .main .slide-box .slick-slide.new-site-slide .new-site-text p {font-size: 13px;}
    .main .slide-box .slick-slide.new-site-slide .new-site-text.top-text {text-align: center;}
    .main .slide-box .slick-slide.new-site-slide .new-site-text.top-text > img {width: auto; height: 75px;}
    .main .slide-box .slick-slide.new-site-slide .new-site-text.top-text .view-more-btn {margin-top: 1rem;}
    .main .slide-box .slick-slide.new-site-slide .new-site-text.top-text .view-more-btn img {height: 34px;}
    .main .slide-box .slick-slide.new-site-slide .new-site-text.bottom-text {text-align: center;}
    .main .slide-box .slick-slide.new-site-slide .new-site-text.bottom-text a {font-size: 16px;}
    .main .slide-box .slick-slide.new-site-slide .new-site-text.bottom-text p:first-child {margin-bottom: 10px;}
    
    /* .main .slide-box, .main .slide-box .slick-slide {height: 250px;} */
    .main .slide-box .slick-slide img {left: 50%;}

    .main .slide-box .slick-slide.new-site-slide{background-position: 100% center; background-size: cover;}
    .main .slide-box .slick-slide.new-site-slide .text-wrap {
        width: 100%;
        padding: 0 2%;
    }
    .main .slide-box .slick-slide.new-site-slide .new-site-text p {
        font-size: 13px;
    }
    .main .slide-box .slick-slide.new-site-slide .new-site-text.top-text {
        text-align: center;
    }
    .main .slide-box .slick-slide.new-site-slide .new-site-text.top-text > img {
        width: auto;
        height: 65px;
    }
    .main .slide-box .slick-slide.new-site-slide .new-site-text.top-text .view-more-btn img {
        height: 34px;
    }
    .main .slide-box .slick-slide.new-site-slide .new-site-text.top-text .view-more-btn {
        margin-bottom: 7px;
    }
    .main .slide-box .slick-slide.new-site-slide .new-site-text.bottom-text {
        text-align: center;
    }
    .main .slide-box .slick-slide.new-site-slide .new-site-text.bottom-text a {
        font-size: 16px;
    }
    .main .slide-box .slick-slide.new-site-slide .new-site-text.bottom-text p:first-child {
        margin-bottom: 10px;
    }
    
}
@media screen and (max-width:480px) {
    .main .slide-box .slick-slide.new-site-slide .new-site-text span {
        font-size: 12px;
    }
    .main .slide-box .slick-slide.new-site-slide .new-site-text p {
        font-size: 12px;
        letter-spacing: -0.5px;
        line-height: 1.3;
    }
    .main .slide-box .slick-slide.new-site-slide .new-site-text.top-text .view-more-btn {
        display: block;
        margin-left: 0;
        margin-bottom: 5px;
    }
    .main .slide-box .slick-slide.new-site-slide .new-site-text.top-text .view-more-btn img {
        height: 25px;
    }
    .main .slide-box .slick-slide.new-site-slide .new-site-text.bottom-text a {
        display: block;
        border-bottom: 0 none;
        text-decoration: underline;
        font-size: 13px;
    }
    /* 22.11.08 신규 서비스 오픈 수정 */
    .main .slide-box .slick-slide.new-site-slide {background-position: 40% center;}
    .main .slide-box .slick-slide.new-site-slide .text-wrap {margin-right: -50px;}
    .main .slide-box .slick-slide.new-site-slide .new-site-text span {font-size: 12px;}
    .main .slide-box .slick-slide.new-site-slide .new-site-text p {font-size: 12px; letter-spacing: -0.5px; line-height: 1.3;}
    .main .slide-box .slick-slide.new-site-slide .new-site-text.top-text .view-more-btn {display: block; margin-left: 0; margin-bottom: 5px;}
    /* .main .slide-box .slick-slide.new-site-slide .new-site-text.top-text .view-more-btn img {height: 25px;} */
    .main .slide-box .slick-slide.new-site-slide .new-site-text.bottom-text a {
        display: block;
        border-bottom: 0 none;
        text-decoration: underline;
        font-size: 13px;
    }
    
}
@media screen and (max-width:370px) {
    /* 20230109 메인 수정 */
    .main .chart-box ul.update-data>li {width: 100%;}
    .main .chart-box ul.update-data>li>a {padding: 40px 0;}
}
@media screen and (max-width:320px) {
	.main .chart-wrap .chart-top {overflow: visible;}
	.main .chart-wrap .chart-box.chart3 .chart-top .chart-a {top: 1.5rem;}
	.main .chart-wrap .chart-box.chart3 .chart-top .tab {margin-top: 2rem;}
	.main .chart-wrap > .chart-box.chart5 .tab li a {word-break: break-all;}
}




/* 20230130 메인 수정 */
/* .chart-box.bordernone{border:0 none !important;} */
.main .chart-a {line-height: 1;}
.main .chart-a:after {display: inline-block; height: 18px; vertical-align: middle;}

.main .chart-wrap .chart-top{margin-bottom:10px;}
.main .chart-wrap .chart-box{padding: 0; border:0 none !important;}
.main .chart-wrap .chart-box .tab-box {text-align: left;}
.main .chart-wrap .chart-box .tab{border:0 none;}
.main .chart-wrap .chart-box .tab > li {position: relative; border:0 none;}
.main .chart-wrap .chart-box .tab > li:after {content: '|'; position: absolute; right: 0; top: 50%; color: #999; transform: translateY(-50%);}
.main .chart-wrap .chart-box .tab > li:last-child:after {display: none;}
.main .chart-wrap .chart-box .tab > li.on {color: #007bab; background-color: #fff;}
.main .chart-wrap .chart-box .tab > li.on a {color: #222; font-weight: 500;}
.main .chart-wrap .chart-box .tab > li a {padding:2px 15px; color: #999;}
.main .chart-wrap .chart-box .tab2 > li a {display: block;  padding: 5px 15px;}
.main .chart-wrap .chart-box .tab2 > li.on {color: white; background-color: #007bab;}



@media screen and (max-width:1320px) and (min-width:1024px) {
    .main div.banner ~ .chart-wrap .chart-box{width:100%;}
    .main #mm1 .table-2{height:250px; overflow: auto;}
}
@media screen and (min-width:1201px) {
    .main .chart-box ul.update-data>li:nth-of-type(n+4) {margin-bottom: 0;}
}
@media screen and (min-width:1024px) {
	.main .main-banner-wrap .tab li{width:150px;}
	.main .chart-wrap .chart4_1 .chart-top,
	.main .chart-wrap .chart5_1 .chart-top {height: 30px;}

    /* 20230203 폰트 사이즈 수정 */
    .main .chart-wrap .chart-top h3, 
    .main .chart-wrap .chart-top strong{/*font-size: 16px;*/font-size: 18px;}

    /* .main .tab > li a {font-size: 18px;} */

    .main .main-banner-wrap .tab li {width: 180px;}
    
}
@media screen and (max-width:1023px) {
	
	.main .table-wrap table {height: auto;}
	.main .chart5_1>.table-wrap {height: auto;}
	.main .chart-wrap .table-wrap table td {height: auto !important;}
	.main .chart-wrap .chart-box {margin-top: 3rem;}
    .main .chart4_1>.table-wrap{height: auto;}
	.main .chart-wrap > .chart-box.chart5_1 {height: auto;}

    .main div.banner ~ .chart-wrap .table-wrap{height: auto;}

    
	
}





.main-title-wrap{display: flex; justify-content: space-between; margin-bottom: 32px; font-size: var(--ft-heading3);}
.main-title-wrap .title{font-size:1em;}
.main-title-wrap .title span{font-size: 1em;/*  color: var(--color-gray60); font-weight: 400; */}

.main .section.bg-gray{background-color: var(--color-gray5);}
.main .section.bg-gray .box{flex: 1 1;/*  padding: var(--space11); */ border-radius: var(--border-radius7);}
.main .section:not(.bg-gray) .box{padding: var(--space11); border: 1px solid var(--color-gray10); border-radius: var(--border-radius7);}
.main .section > .inner{ max-width: 1240px; width: 100%; /*  padding: var(--space16) 0; */ margin: 0 auto;}

.main .chart-group {display: flex; gap: var(--space9);}
.main .chart-col-group{display: flex; gap: var(--space9); flex-direction: column;}
.main .chart-box .con-inner {width: 100%; height: 100%;}
.main .chart-box .title-wrap{font-size:  var(--ft-title4)}
.main .chart-box .title-wrap .title{font-size: 1em;}
.main .chart-box .count {display: flex; justify-content: center;  align-items: center; gap: var(--space4); margin-bottom: var(--space2); font-weight: 700; font-size: var(--ft-title1); }
.main .chart-box .count.up{color: var(--color-red);}
.main .chart-box .count.up:before {content: ''; width: 22px; height: 27px; display: block; background: url('/images/portal/icon/icon_count_up.svg') no-repeat center; background-size: contain;}
.main .chart-box .count.down{color: var(--color-primary80);}
.main .chart-box .count.down:before{content: ''; width: 22px; height: 27px; display: block; background: url('/images/portal/icon/icon_count_down.svg') no-repeat center; background-size: contain;}


.main .text-xl {font-size: var(--ft-title2); word-break: keep-all;}
.main .text-l {font-size: var(--ft-title4); word-break: keep-all;}
.main .text {color: var(--color-gray60); font-size: var(--ft-body1); font-weight: 400; word-break: keep-all;}
.main .text-s {color: var(--color-gray60); font-size: var(--ft-body2); font-weight: 400; letter-spacing: 0; word-break: keep-all;}
.main .text-xs {color: var(--color-gray60); font-size: var(--ft-detail1); font-weight: 400; letter-spacing: 0; word-break: keep-all;}

.main .visual-wrap{background-color:var(--color-primary5);}
.main .visual-wrap .main-chart-wrap {display: flex; gap: var(--space7);}
.main .visual-wrap .main-chart-wrap .chart-box {gap: var(--space5); padding: var(--space7); font-size: var(--ft-body1);  border-radius: 12px;  box-sizing: border-box; border: none; background-color: #fff;}
.main .visual-wrap .main-chart-wrap .chart-big {width: 380px;}
.main .visual-wrap .main-chart-wrap .chart-group {/* gap: 16px; */ gap: var(--space6);}
.main .visual-wrap .main-chart-wrap .chart-group .chart-box {padding: 0;}
.main .visual-wrap .main-chart-wrap .chart-group .chart-box > a {flex: 1; text-align: center; padding: var(--space7) var(--space3); display: flex; flex-direction: column; justify-content: space-between; border-radius: var(--space5);}
.main .visual-wrap .main-chart-wrap .chart-group .chart-box > a:hover {box-shadow: 0 var(--space2) var(--space2) rgba(0,0,0,0.25);}
.main .visual-wrap .main-chart-wrap .chart-group .chart-box .title-wrap {gap: var(--space5); margin-bottom: var(--space3); flex-direction: column;}
.main .visual-wrap .main-chart-wrap .chart-group .chart-box .con-inner {display: flex; flex-direction: column; justify-content: space-between;}

/*2025-02-12 추가*/
.main .visual-wrap .main-chart-wrap .chart-group .chart-box .con-inner p:last-of-type {align-items:flex-end; flex: 1;}
.main .visual-wrap .main-chart-wrap .chart-group .chart-box .con-inner {gap: 0.375em;}

.main .responsive-wrap{display: flex; gap: var(--space10); justify-content: space-between;}

.main .login-boxs {padding: 0 !important; width: 25.5rem; height: 18.75rem;}
.main .login-boxs button{width: 100%;}
.main .login-boxs .inner{display: flex; flex-direction: column;justify-content: center; height: 100%;  box-sizing: border-box;}
.main .login-boxs .text-box{/* margin-bottom: 24px; */ font-weight: 700;}
.main .login-boxs .login-etc{display: flex; align-items: center; /* gap: 14.5px; */ gap: var(--space7);}
.main .login-boxs .login-etc li{display: flex; align-items: center; justify-content: center; position: relative;}
.main .login-boxs .login-etc li:not(:first-of-type):before{content:''; position: absolute; top: 50%; left: var(--space3-minus); transform: translateY(-50%); width: 1px; height: 16px; background-color: var(--color-gray20);}
.main .login-boxs .login-etc a {padding: var(--space2) var(--space3); border-radius: var(--border-radius2);}
.main .login-boxs .login-etc a:hover {background-color: var(--color-gray5);}
.main .login-boxs .state-login{ padding: var(--space13) var(--space11); justify-content: space-between;}
.main .login-boxs .state-login button {justify-content: space-between;}
.main .login-boxs .state-login .top {flex-direction: column; gap: var(--space5);}
.main .login-boxs .state-logout{ padding: var(--space11); /* align-items: center; justify-content: space-around; */}
.main .login-boxs .state-logout button{margin-top: var(--space9);}
.main .login-boxs .state-logout .text-box{text-align:center;}
.main .login-boxs .state-logout .login-etc{margin-top: var(--space12); justify-content: center;}





.main-history{}
.main-history .inner{display: flex; gap: 32px; align-items: center; max-width: 1240px; padding: 22px 32px; margin: 0 auto; border-radius: 20px; background-color: var(--color-gray5); box-sizing: border-box;}
.main-history .history-list{display: flex; gap: 16px; align-items: center}
.main-history .title-wrap{flex-shrink: 0; font-size: var(--ft-title4);}
.main-history .title-wrap .title{font-size: 1em;}

.menu-list-wrap{position: relative;}
/* .menu-list{display: flex; gap: var(--space13);} */
.menu-list .item{padding-right: var(--space13); padding: var(--space2) var(--space13) var(--space2) 0; /* height: 105px; */}
.menu-list .item a{display: flex; flex-direction: column; position: relative; padding: var(--space7) var(--space9) var(--space7) calc(4.5rem + var(--space9) + var(--space5)); width: 280px;  height: 105px; border-radius: var(--border-radius4); box-sizing: border-box; }
.menu-list .item a:hover{box-shadow: 0 var(--space2) var(--space2) rgba(0,0,0,0.25);}
.menu-list .item a:before{content: ''; position: absolute; left: var(--space9); width: 4.5rem; height: 4.5rem; background-repeat: no-repeat; background-color: var(--color-orange); border-radius: var(--border-radius5); background-position: center center; border:1px solid var(--color-tertiary90)}
.menu-list .item.map a:before{background-image: url('/images/portal/icon/icon_location_orange.svg'); }
.menu-list .item.plane a:before{background-image: url('/images/portal/icon/icon_flight_orange.svg');}
.menu-list .item.export a:before{background-image: url('/images/portal/icon/icon_explore_orange.svg'); background-size: 40px;}
.menu-list .item.area a:before{background-image: url('/images/portal/icon/icon_map_orange.svg'); background-size: 40px;}
.menu-list .item.popular a:before{background-image: url('/images/portal/icon/icon_map_popular.svg');}
.menu-list .title{margin-bottom: 4px; font-size: var(--ft-title4); font-weight: 700;}

.menu-list-wrap .custom-arrows .slick-arrow {position: absolute; top: 50%; transform: translateY(-50%);}
.menu-list-wrap .custom-arrows .slick-prev {left: calc( -40px - 21px );}
.menu-list-wrap .custom-arrows .slick-next {right: calc( -40px - 21px );}


.thumb-card-list{display: flex; gap: var(--space11)}
.thumb-card-list .card{gap: 241px; padding: var(--space11); border-radius: var(--space8); border: 1px solid var(--color-gray10); background-color: #fff;}
.thumb-card-list .card .title-wrap {font-size: 24px;}
.thumb-card-list .card .title-wrap .title {font-size: 1em;}
.thumb-list {display: flex; gap: var(--space5); flex-direction: column;}
.thumb-list li {display: flex; flex-direction: row; gap: 21px; padding: 24px; height: 185px; background-color: #fff; border-radius: 20px; box-sizing: border-box;}



.thumb-list .img {width: 190px; height: 130px; border-radius: 12px; background-color: var(--color-gray5); background-image: url(/images/portal/common/logo-landscape.svg); background-repeat: no-repeat; background-position: center; background-size: 185px; overflow: hidden;}
.thumb-list .img img {/* width: 100%; height: auto; */ width: 190px; height: 130px; object-fit: cover;}
.thumb-list .con {
    flex-grow: 1;
    display: flex;
    gap: 20px;
    min-width: 0;
    flex: 1 1;
    /* flex: 0; */
    flex-direction: column;
}

.thumb-list .con .title {
    font-size: 16px;
    font-weight: 700;
    text-overflow: ellipsis;
    overflow: hidden;
    /* white-space: nowrap; */
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}

.thumb-list .con > .text-box {
    flex-grow: 1;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.thumb-list .bottom {
    font-size: 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* flex-grow: 1; */
}

.thumb-list .bottom p, .thumb-list .bottom a {
    font-size: 1em;
}

.board .box {
    /* flex-shrink: 0; */
}

.main .section.bg-gray .box .con-inner {
    /* width: 100%; */
}



.main .responsive-wrap.board .box {
    /* width: calc(50% - 33px); */
    /* display: flex; */
    /* flex-direction: column; */
    /* justify-content: center; */
    /* align-content: flex-start; */
    width: 100%;
    box-sizing: border-box;
}

/* .main .responsive-wrap.board {
    display: grid;
    grid-template-columns: 1fr 1fr;
}
 */
.main .box.news .con-inner {}
.main .main-chart-wrap .chart-group {flex-grow: 1;}
.news-list {padding: var(--space7) var(--space11); border-radius: var(--border-radius7); background-color: #fff;}

.main .box .top {
    display: flex;
}

.main .box .top.between {
    justify-content:  space-between;
    margin-bottom: 20px;
}


.news-list li {display: flex; justify-content: space-between; align-items: center; min-width: 0; padding: 20px 0; font-size: 1rem;}
.news-list li:not(:last-of-type){border-bottom: 1px solid var(--color-gray10);}
.main .responsive-wrap.board .news-list img {width: auto; height: 18px;}
.main-chart-wrap .chart-box {
    border: 1px solid var(--color-gray10);
    padding: var(--space11);
    border-radius: var(--border-radius7);
    gap: var(--space7);
}


.news-list li p {
    font-size: 1em;
}

.news-list li p:last-of-type {
    flex-shrink: 0;
}

.news-list li .subject {
    font-size: 1em;
    overflow: hidden;
    text-overflow: ellipsis;
    /* white-space: nowrap; */
    /* display: block; */
    /* min-width: 0; */
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}

.thumb-card-list .card .title-wrap {
    /* font-size: 24px; */
}

.thumb-card-list .card .title-wrap .title {
    font-size: 24px;
    text-overflow: ellipsis;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    margin-bottom: 12px;
}

.main .title-wrap a {
    font-size: 14px;
    font-weight: 400;
}
.main .in-chart > .title-wrap {display: flex; justify-content: space-between; align-items: center;}

.thumb-card-list .card .thumb { margin-top: 24px; width: 328px; height: 180px; border-radius: 12px; background-color: var(--color-gray5); background-image: url(/images/portal/common/logo-landscape.svg); background-repeat: no-repeat; background-position: center; background-size: 185px; overflow: hidden;}
.thumb-card-list .card .thumb img {/* width: 100%; height: auto; */ width: 328px; height: 180px; object-fit: cover;}

.main-title-wrap {
    
}
.news-list li .subject {font-size: 16px;/* line-height: 17px; */}

.news-list li .date {
    /* line-height: 17px; */
}

.news-list li {
    line-height: 17px;
}
.main .main-chart-wrap .chart-group .chart-box {flex: 1;}
.main .main-chart-wrap .chart-big > .title-wrap {display: flex; justify-content: space-between; align-items: center;}


.main-chart-wrap .chart-big {flex: 2;}

.main-chart-wrap > div {
    /* flex: 2  auto; */
}

.main .visual-wrap .main-chart-wrap .chart-big {
    /* flex: 1.3; */
    /* box-sizing: border-box; */
    width: 374px;
    /* flex-shrink: 0; */
    box-sizing: border-box;
    /* flex: none; */
}

.main .visual-wrap .main-chart-wrap .chart-group {
    /* flex: auto; */
}

.main .chart-box .title-wrap {
    font-size: 20px;
}

.main .visual-wrap .main-chart-wrap .title-wrap {
    font-size: var(--ft-title4);
}

.main .main-chart-wrap .chart-box .title-wrap + .tab {
    margin-top: 15px;
    align-self: flex-start;
}

.main-chart-wrap .chart-box {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.main .chart-box .text {
    font-weight: 400;
}

.mini-chart-group .title-wrap {
    display: flex;
    /* font-size: 16px; */
    align-items: flex-start;
    justify-content: center;
    word-break: keep-all;
    text-align: center;
    /* margin-bottom: 20px; */
    /* padding: 0 10px; */
}
.mini-chart-group .title-wrap .title{
        text-overflow: ellipsis;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    /* margin-bottom: 20px; */
    /* padding: 0 10px; */
        word-break: break-all;
}

.mini-chart-group {
    display: flex;
    gap: 16px;
}


.mini-chart-group .chart-box .title-wrap {min-height: 3.75rem; font-size: var(--ft-title2) !important;}

.main-chart-wrap .chart-box .in-chart .title-wrap {
    font-size: 1rem;
    /* margin-bottom: 24px; */
}

.mini-chart-group .con-inner {text-align: center;}
.mini-chart-group .chart-box {gap: 20px;width: 119px; /* width: 150px; */ padding: 20px 8px; border: 0 none; box-sizing: border-box; background-color: var(--color-blue); border-radius: 12px;}

.main-chart-wrap .chart-box .in-chart {display: flex; flex-direction: column; gap: 24px;}
.main .chart-box .title-wrap .text {margin-top: 8px; letter-spacing: 0;}



/* 24.11 - 신규 배너 */
.main .banner-wrap{position: relative; box-sizing: border-box; width: calc(100% - (408px + 33px) );}

/*  24.11 - 신규 배너 버전 1 : 탭 배너 (타이틀, 텍스트 + 이미지)  */
/* 
.main .banner-wrap .slide-tab{position: absolute; top: 32px; left: 32px; z-index: 1;}
.main .banner-wrap .slide-tab ul{display: flex; gap: 8px;}
.main .banner-wrap .slide-tab ul li{}
.main .banner-wrap .slide-tab ul li a,
.main .banner-wrap .slide-tab ul li button{display: block; padding: 4px 12px; background-color: #fff; border: 1px solid var(--color-gray10); border-radius: 100px;}
.main .banner-wrap .slide-tab ul li.on a,
.main .banner-wrap .slide-tab ul li.on button{ color: #fff; background-color: var(--color-primary80);}
.main .banner-wrap .slide-boxs .left{ margin-top: 53px;}
.main .banner-wrap .slide-boxs .text-box .title {font-size: var(--ft-title3); font-weight: 700; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; word-break: keep-all; overflow: hidden;}
.main .banner-wrap .slide-boxs .left {display: flex; flex-direction: column; gap: 8px;}
.main .banner-wrap .slide-boxs .text-box a:hover {text-decoration: underline; text-underline-position: under;}
.main .banner-wrap .controls {position: absolute; right: 32px; bottom: 32px; display: flex;  align-items: center; justify-content: space-between; width: 286px;}
.main .banner-wrap .slide-boxs .img{ width: 286px; height: 180px; border-radius: 20px; background-color: var(--color-gray5); background-image: url(/images/portal/common/logo-landscape.svg); background-repeat: no-repeat; background-position: center; background-size: 185px; overflow: hidden;}
.main .banner-wrap .slide-boxs .img img{width: 286px; height: 180px; object-fit: cover;}
.main .banner-wrap .slide-boxs .inner{display: flex; gap: var(--space13); height:236px; justify-content: space-between;}
.main .banner-wrap .slide-boxs .img {flex-shrink: 0;}
.main .banner-wrap .slide-boxs .left {justify-content: space-between;}
.main .banner-wrap .slide-boxs .text-box .text {display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; word-break: keep-all; overflow: hidden; margin-top: 8px;}
.main .banner-wrap .btn-wrap {gap: var(--space3);}
.main .banner-wrap .btn-wrap .custom-arrows button:not(:first-of-type){margin-left: 8px;}
.main .banner-wrap .controls .count {font-size: var(--ft-body2);}
.main .banner-wrap .controls .count span{font-size: 1em;}
.main .banner-wrap .controls .count .current {font-size: var(--ft-body2); font-weight: 700; color: var(--color-primary90);}
.banner.slide-wrap .slide-boxs{display: none;}
.banner.slide-wrap .slide-boxs.active{display: block;}
*/

/*  24.11 - 신규 배너 버전 2 : 배너 2개 (배너 왼쪽 + 배너 오른쪽)  */
/* .main .banner-wrap .banner {display: flex; justify-content: space-between; gap: var(--space11);}
.main .banner-wrap .banner .slide-wrap {position: relative; width: calc(50% - var(--space7));}
.main .banner-wrap .banner .slide-wrap .slick-prev {left: 12px;}
.main .banner-wrap .banner .slide-wrap .slick-next {right: 12px;}
.main .banner-wrap .banner .slide-boxs .slick-arrow {position: absolute; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; background-size: 28px; opacity: 0.5; transition: opacity 0.3s;}
.main .banner-wrap .banner .slide-boxs .slick-arrow:hover {opacity: 1;}
.main .banner-wrap .slide-boxs .inner{display: flex; gap: var(--space11); height:236px; justify-content: space-between;}
.main .banner-wrap .slide-boxs .img{width: 360px;height: 236px; border-radius: var(--space8);background-color: var(--color-gray5);background-image: url(/images/portal/common/logo-landscape.svg);background-repeat: no-repeat;background-position: center;background-size: 185px;overflow: hidden;}
.main .banner-wrap .slide-boxs .img img{width: 360px;height: 236px;object-fit: cover;}
.main .banner-wrap .btn-wrap {position: absolute; bottom: var(--space5); right: var(--space5); gap: var(--space2);}
.main .banner-wrap .btn-wrap .slick-arrow {width: 23px; height: 23px; background-size: 23px; opacity: 0.5; transition: opacity 0.3s;}
.main .banner-wrap .btn-wrap .slick-arrow:hover{opacity: 1;}
 */
/*  24.11 - 신규 배너 버전 3 : 배너 2개씩 뷰  */
.main .banner-wrap{padding: var(--space7) var(--space9) var(--space5) var(--space9) !important;}
.main .banner-wrap .banner {display: flex; justify-content: space-between; gap: var(--space11);}
.main .banner-wrap .banner .slide-wrap {position: relative; width: 100%;}
.main .banner-wrap .banner .slide-wrap .slick-prev {left: 12px;}
.main .banner-wrap .banner .slide-wrap .slick-next {right: 12px;}
.main .banner-wrap .banner .slide-boxs .slick-arrow {position: absolute; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; background-size: 28px; opacity: 0.5; transition: opacity 0.3s;}
.main .banner-wrap .banner .slide-boxs .slick-arrow:hover {opacity: 1;}
.main .banner-wrap .slide-boxs .inner{display: flex; /* gap: var(--space11); */ width: 100%; height:236px; justify-content: center; align-items: center; padding: 0 var(--space2); box-sizing: border-box;}
.main .banner-wrap .slide-boxs .img{width: 351px;height: 236px; border-radius: var(--space8);background-color: var(--color-gray5);background-image: url(/images/portal/common/logo-landscape.svg);background-repeat: no-repeat;background-position: center;background-size: 185px;overflow: hidden; text-align: center;}
.main .banner-wrap .slide-boxs .img img{width: 351px;height: 236px;object-fit: cover;}
.main .banner-wrap .btn-wrap { gap: var(--space2); justify-content: center; margin-top: var(--space3);}
.main .banner-wrap .btn-wrap .slick-arrow {width: 28px; height: 28px; background-size: 28px;transition: opacity 0.3s;}
/* .main .banner-wrap .btn-wrap .slick-arrow:hover{opacity: 1;} */


/* .menu-list .slick-arrow{display: none !important;} */
.menu-list .slide-prev{left: -21px;}
.menu-list .slide-next{right: -21px;}

/* slide_left.svg
slide_right.svg
slide_plus.svg
slide_stop.svg */



/* 임시 - 스크립트 작업 전. */
/* .main .banner-wrap .banner {height: 236px; overflow: hidden;} */
/* .menu-list-wrap {height: 105px; overflow: hidden;} */
/* .menu-list li {flex-shrink: 0; width: 280px;} */

.responsive-wrap.main-chart-wrap {gap: var(--space9);}
.main .responsive-wrap.main-chart-wrap .responsive-wrap {gap: var(--space9);}
.main .responsive-wrap.main-chart-wrap .responsive-wrap .in-chart {flex: 1;}
/* .mini-chart-group .title-wrap .title {font-size: var(--ft-title3) !important;} */
.mini-chart-group .chart-box .count {font-size: var(--ft-title2);} 
.main .mini-chart-group .chart-box .count {align-items: baseline; gap: 0;}

/* 테스트용 - 인기관광지 레이아웃 테스트용 css */
/* 
.responsive-wrap.main-chart-wrap.test-3 > div {flex: 1;}
.responsive-wrap.main-chart-wrap.test-3 .responsive-wrap {flex-direction: column;}
.responsive-wrap.main-chart-wrap.test-3 > .chart-box > .title-wrap{display: flex; justify-content: space-between; align-items: center;}
.responsive-wrap.main-chart-wrap.test-3 .mini-chart-group {gap: 24px;}
.responsive-wrap.main-chart-wrap.test-3 .mini-chart-group .chart-box {width: auto; flex: 1 1;}

.responsive-wrap.main-chart-wrap.test-4 {flex-direction: column;}
.responsive-wrap.main-chart-wrap.test-4 > .chart-box > .title-wrap{display: flex; justify-content: space-between; align-items: center;}
.responsive-wrap.main-chart-wrap.test-4 .mini-chart-group .chart-box {width: auto; flex: 1;}


.responsive-wrap.main-chart-wrap.test-5 .mini-chart-group .chart-box .title-wrap {min-height: auto;}
.responsive-wrap.main-chart-wrap.test-5 .mini-chart-group .chart-box .title-wrap .title {-webkit-line-clamp: 1;}
.responsive-wrap.main-chart-wrap.test-5 .mini-chart-group {flex-direction: column;}
.responsive-wrap.main-chart-wrap.test-5 .mini-chart-group .chart-box {padding: 20px; width: auto; gap: 12px;}
.responsive-wrap.main-chart-wrap.test-5 #popuLocHotDiv1Num, 
.responsive-wrap.main-chart-wrap.test-5 #popuLocHotDiv1AreaNm {font-size: 14px;}
.responsive-wrap.main-chart-wrap.test-5  .mini-chart-group .chart-box .count {margin-bottom: 0;}

.responsive-wrap + .responsive-wrap{margin-top: 24px;}
.test-4-2>.cahrt-group>.responsive-wrap {}
.test-4-2>.chart-group>.responsive-wrap>.chart-box>.chart {display: flex;}
.test-4-2 .tab {align-self: baseline;}
.test-4-2 .responsive-wrap .chart-box {padding: 0; border: 0 none;}
 */
 
 /* 인기 관광지 레이아웃 변경 */
.responsive-wrap.main-chart-wrap {flex-direction: column;}
.responsive-wrap.main-chart-wrap > .chart-box > .title-wrap{display: flex; justify-content: space-between; align-items: center;}
.responsive-wrap.main-chart-wrap .mini-chart-group .chart-box {width: auto; flex: 1;}


/* .urgent-wrap .urgent-list {padding-bottom: 8px;} */


/* 긴급 공지영역 */
.urgent-wrap{ background-color:var(--color-gray5);}
.urgent-wrap .urgent-list{max-width: 1240px; margin: 0 auto; font-size: var(--ft-body2);}
.urgent-wrap .urgent-list .item a{font-size: var(--ft-detail1);}
.urgent-wrap .urgent-list .item a:hover{backgruond-color:#fff;}
.urgent-wrap .urgent-list .item > div{display:flex; align-items: center; gap: 1rem; font-weight: 500; border-radius: 0.75rem;}
.urgent-wrap .urgent-list p{flex-grow: 1; font-weight:700; font-size: var(--ft-body1);}
.urgent-wrap .urgent-list .sort{ flex-shrink: 0; display: inline-flex; align-items: center; padding: 4px 8px 4px 12px; border-radius: 100px; color: #fff; font-size: 0.937rem;}
.urgent-wrap .urgent-list .sort:after{content: ''; display:inline-block; width: 16px; height: 16px; margin-left: 6px; margin-right: 5px; line-height: 15px; text-align: center; border-radius: 100%; background-repeat: no-repeat; background-position: center center; background-size: contain; background-size: 16px;}
.urgent-wrap .urgent-list .sort.info{background-color: var(--color-primary90);}
.urgent-wrap .urgent-list .sort.info:after{background-image: url('/images/portal/icon/icon_i.svg');}
.urgent-wrap .urgent-list .sort.emergency{background-color: var(--color-red);}
.urgent-wrap .urgent-list .sort.emergency:after{background-image: url('/images/portal/icon/icon_urgent.svg');}
.urgent-wrap .urgent-list .sort.safety{background-color: var(--color-green50);}
.urgent-wrap .urgent-list .sort.safety:after{background-image: url('/images/portal/icon/icon_safety.svg');}
.urgent-wrap .urgent-list {padding: 0;}
.urgent-wrap .urgent-list li > div {padding: 8px 16px; gap: 8px;}
.urgent-wrap .urgent-list .sort { font-size: var(--ft-body1);}


.urgent-wrap .urgent-list p {text-overflow: ellipsis; overflow: hidden;}
.urgent-wrap .urgent-list .item {padding: 8px 0;}
.urgent-wrap .urgent-list .item a {flex-shrink: 0;}

.urgent-wrap .urgent-list .slick-dots {margin-top: 16px; text-align: center;}
.urgent-wrap .urgent-list .slick-dots li {display: inline-block; height: 8px; margin: 0 2.5px; vertical-align: top;}







.main .section > .inner {margin-top: var(--space16);}
.main .main-history {padding-top: var(--space16);}
.menu-list .item a {border: 1px solid var(--color-gray10); box-sizing: border-box;}
.custom-dots {margin-bottom: var(--space16);}
.main .section.bg-gray > .inner {/* margin-top:0; */ padding-bottom: var(--space12); padding-top: var(--space12);}
.main .visual-wrap {padding-bottom: var(--space16);}
.main .visual-wrap > .inner {padding-top: var(--space11); margin-top: 0;}


.main .txt-box .check-list li {padding-left: calc(1em + 4px); color: var(--ft-gray); font-size: var(--ft-body2);}
.main .txt-box .check-list li:before {top: 1px; width: 1.2em; height: 1.2em;}

.main .txt-box {
    padding: 16px 12px;
    border: 0;
    background-color: var(--color-gray5);
}

.contents.main{margin-bottom: 0;}


.menu-list .item a{background-color:#fff;}
.main .main-chart-wrap .chart-group .chart-box .title-wrap {display: flex; justify-content: space-between; align-items: center;}
.main .section:not(.visual-wrap) .main-chart-wrap .chart-group {border: 1px solid var(--color-gray10); border-radius: var(--border-radius7);}
.main .main-chart-wrap .chart-group .chart-box {border: 0;}




.main .loading{position:relative;}
.main .loading:before{
	content:'';
	position:absolute;
	width: 47px;
	height: 47px;
	top: 50%;
	left:50%;
	background:url(../../images/portal/sub/whale_img_new.png) no-repeat center;
	background-size: contain;
	transform: translate(-50%, -50%);
	z-index:5;
}
.main .loading:after{
	content:'';
	position:absolute;
	top: 50%;
	left:50%;
	width:70px;
	height:70px;
	margin:-37px 0 0 -41px;
	border-radius:100%;
	border:5px solid #c3c3c3;
	border-top-color:var(--color-primary80);
	border-right-color:var(--color-primary80);
	animation:spin 1s infinite;
	transform: translate(-50%, -50%);
	z-index:10;
}


/* 신규 반응형 - 24.11 */
/* pc only */
@media screen and (max-width:1300px) and (min-width:1025px) {
    .main .section > .inner {padding-left: var(--space7); padding-right: var(--space7); box-sizing: border-box;}
    .main .section:not(.visual-wrap) .main-chart-wrap .chart-group {flex-direction: column;}

    .menu-list .item {padding-right: var(--space8);}
    .menu-list .item a{width: 100%; min-height: 105px; height: auto; }
    .menu-list .item a:before {top: 50%; transform: translateY(-50%);}

    .urgent-wrap .urgent-list{margin: 0 var(--space7);}

    .thumb-card-list .card .thumb {width: 100%; height: auto;}
}
@media screen and (max-width:1300px) and (min-width:1025px) {
    .main .responsive-wrap.main-chart-wrap .con-inner .chart{width: 100% !important}
}
/* tablet */
@media screen and (max-width:1240px) {
    .main .visual-wrap .main-chart-wrap {flex-direction: column;}
    .main .visual-wrap .main-chart-wrap .chart-big {width: 100%;}
    .main .visual-wrap .main-chart-wrap .chart-group {width: 100%;}
    .main .visual-wrap .main-chart-wrap .chart {width: 100% !important;}
}
@media screen and (max-width:1024px) {
    .contents.main{margin-top: 4.0625rem;}
    #wrap.admin-login .contents.main{margin-top: 3.9375rem;}
    .main .section > .inner {padding-left: var(--space7); padding-right: var(--space7); box-sizing: border-box;}
    /* .main .section.bg-gray > .inner{margin: 0;} */
    
    .main .visual-wrap .main-chart-wrap {flex-direction: column;}

    .main .chart-group {flex-direction: column;}
    .main .visual-wrap .chart-box .con-inner .chart{height: 9.6875rem !important;}
    .main .visual-wrap .main-chart-wrap .chart-big{width: 100%;}

    .main .responsive-wrap {flex-direction: column;}


    .main .banner-wrap {width: 100%;}

    .main .login-boxs {width: 100%; /* height: auto; */ box-sizing: border-box;}
    .main .login-boxs .state-logout {padding: var(--space9);}

    .main-history .inner {flex-direction: column; gap: var(--space9);}
    .main-history .history-list {flex-wrap: wrap; gap: var(--space3);}
    .thumb-list li {width: 100%; box-sizing: border-box;}

    .thumb-card-list {flex-direction: column; gap: var(--space9);}
    .thumb-card-list .card {box-sizing: border-box;}
    .thumb-card-list .card .thumb {width: 100%; height: auto;}
    .thumb-card-list .card .thumb img {width: 100%; height: auto;}

    .menu-list .item a {width: 100%; height: auto; min-height: 6.5625rem;}
    .menu-list-wrap .custom-arrows .slick-next{right: 0;}
    .menu-list-wrap .custom-arrows .slick-prev{left: 0;}

    .urgent-wrap .urgent-list{margin: 0 var(--space7);}


    .main .banner-wrap .slide-boxs .img {width: 100%; /*height: auto;*/}
    .main .banner-wrap .slide-boxs .img img {width: 100%; height: auto;}
    .mini-chart-group .chart-box {padding : var(--space8) var(--space7) var(--space7);}


}
@media screen and (max-width:1023px) and (min-width:961px) {
    .menu-list .item {padding: var(--space2) var(--space8) var(--space2) 0;}
    .menu-list .item a {padding: var(--space6) var(--space8) var(--space6) calc(50px + var(--space8) + var(--space4));}
    .menu-list .item a:before {left: var(--space6); width: 3.125rem; height: 3.125rem; background-size: 2.8125rem;}
}
/* @media screen and (max-width:1023px) and (min-width:960px) { */
@media screen and (max-width:960px){
    .menu-list .item {padding-left: var(--space11); padding-right: var(--space9);}
}
@media screen and (max-width:780px) {
    .main .section > .inner{padding-left: var(--space8); padding-right: var(--space8);}

    .main-title-wrap {flex-direction: column;}

    .main .banner-wrap .banner {flex-direction: column;}
    .main .banner-wrap .banner .slide-wrap {width: 100%;}
    .main .banner-wrap .slide-boxs .inner {height: auto;}
    .main .banner-wrap .slide-boxs .inner .img{height: auto;}

    .main .main-chart-wrap .chart-box .chart {width: 100% !important;}
    
    .main .login-boxs .login-etc {gap: var(--space5);}
    .main .login-boxs .login-etc li:not(:first-of-type):before {left: var(--space3-minus);}

    .menu-list .item a{width: 100%;}



    .thumb-list li {flex-direction: column; height: auto;}
    .thumb-list li .img {width: 100%; height: auto;}
    .thumb-list li .img img {width: 100%; height: auto;}
    
    .main-title-wrap {align-items: flex-end;}
    .main-title-wrap .title {flex-grow: 1; width: 100%; text-align: left;}
    
    .main .chart-box .title-wrap .title {word-break: keep-all;}
    
    .main .in-chart > .title-wrap,
    .main .main-chart-wrap .chart-group .chart-box .title-wrap{flex-direction: column; align-items: flex-end;}
    .main .visual-wrap .main-chart-wrap .chart-group .chart-box .title-wrap{align-items: center;}
    .main .visual-wrap .main-chart-wrap .chart-group .chart-box .title-wrap .title{text-align: center;}
    
    .main .in-chart > .title-wrap .title,
    .main .main-chart-wrap .chart-group .chart-box .title-wrap .title{/* flex-grow: 1; */ width: 100%; text-align: left;}

    .urgent-wrap .urgent-list{margin: 0 var(--space8);}
    
    .mini-chart-group { flex-direction : column;}

}
@media screen and (max-width:719px) {
    .menu-list .item {padding-left: var(--space14); padding-right: var(--space14);}
}
@media screen and (max-width:480px) {

}