@charset "utf-8";

/* 레이아웃 */
*{margin: 0; padding: 0;}
html {width: 100%; height: 100%;}
body {background-color:#f7f9fc;}
.wrap {margin:0 auto; }
.content {clear:both;}
.txt_sty {font-size:14px; color:#fff; font-weight: 500; letter-spacing: -1.6px; }

/* header */
#header{width:232px; height: 100%; z-index:1000; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient( #031d71 5%, #0a4fbb 50%, #2186c1 75%, #4dc6c3 100%); min-width: inherit;}

#header .grab {height: 100%;}
#header h1.logo { padding: 38px 10px; border-bottom: 1px solid #36559f;}
#header .grab .menu_container {width: 100%; height: 100%; position: absolute; left:0;  background: url(../image/mainvisual2.png) no-repeat 0 85%; z-index:100;}
#header .grab .menu_container.st {}
#header .grab .menu_container ul {margin: 18px;}
#header .grab .menu_container ul li {line-height: 50px; position: relative; text-align: left; height: 60px;}

#header .grab .menu_container ul li dl {opacity: 0.7;}
#header .grab .menu_container ul li dl:hover, #header .grab .menu_container ul li dl.active {opacity: 1;}
#header .grab .menu_container ul li dl dt {padding-left: 48px;}

#header .grab .menu_container ul li dl.nav_l1, .nav_l2, .nav_l3, .nav_l4, .nav_l5, .nav_l6, 	.nav_l7, .nav_l8, .nav_l9 {padding-bottom: 2px;}

	.nav_l1 {background: url(../image/nav_btn1.png) no-repeat 6% 50%;}
	.nav_l2 {background: url(../image/nav_btn2.png) no-repeat 6% 50%;}
	.nav_l3 {background: url(../image/nav_btn3.png) no-repeat 6% 50%;}
	.nav_l4 {background: url(../image/nav_btn4.png) no-repeat 6% 50%;}
	.nav_l5 {background: url(../image/nav_btn5.png) no-repeat 6% 50%;}
	.nav_l6 {background: url(../image/nav_btn6.png) no-repeat 6% 50%;}
	.nav_l7 {background: url(../image/nav_btn7.png) no-repeat 6% 50%;}
	.nav_l8 {background: url(../image/nav_btn8.png) no-repeat 6% 50%;}
	.nav_l9 {background: url(../image/nav_btn9.png) no-repeat 6% 50%;}

	.nav_l1:hover, .nav_l1.active {background: url(../image/nav_btn11.png) no-repeat 5.5% 50%;}
	.nav_l2:hover, .nav_l2.active {background: url(../image/nav_btn21.png) no-repeat 5.5% 50%;}
	.nav_l3:hover, .nav_l3.active {background: url(../image/nav_btn31.png) no-repeat 5.5% 50%;}
	.nav_l4:hover, .nav_l4.active {background: url(../image/nav_btn41.png) no-repeat 5.5% 50%;}
	.nav_l5:hover, .nav_l5.active {background: url(../image/nav_btn51.png) no-repeat 6% 50%;}
	.nav_l6:hover, .nav_l6.active {background: url(../image/nav_btn61.png) no-repeat 5.5% 50%;}
	.nav_l7:hover, .nav_l7.active {background: url(../image/nav_btn71.png) no-repeat 5.5% 50%;}
	.nav_l8:hover, .nav_l8.active {background: url(../image/nav_btn81.png) no-repeat 5.5% 50%;}
	.nav_l9:hover, .nav_l9.active {background: url(../image/nav_btn91.png) no-repeat 5.5% 50%;}


/*.menu_container li.depth1.active .depth2 {display: block; z-index: 10;}*/
/* 수정(오주영) top 0->266 left 232->270 */
.depth2 {width:260px; height: 100%; position: fixed; top: 66px; left: 270px; right: 0; bottom: 0; background:#fff; overflow: hidden;  z-index: 0;
border-right:1px solid #eee;}
.depth2 h4 {margin: 26px 13px; padding-bottom: 26px; border-bottom: 1px solid #f2f2f2; }
.depth2 .title {color: #212121; font-size: 16px; letter-spacing: -2px; padding-left:42px;}

	/* 수정(오주영) */
	.depth2_title.icon2 {background: url(/static/img/analyze/icon2.png) no-repeat 2% 23%;}
	.depth2_title.icon3 {background: url(/static/img/analyze/icon3.png) no-repeat 2% 23%;}
	.depth2_title.icon4 {background: url(/static/img/analyze/icon4.png) no-repeat 2% 23%;}
	.depth2_title.icon5 {background: url(/static/img/analyze/icon5.png) no-repeat 2% 23%;}
	.depth2_title.icon6 {background: url(/static/img/analyze/icon6.png) no-repeat 2% 23%;}
	.depth2_title.icon7 {background: url(/static/img/analyze/icon7.png) no-repeat 2% 23%;}
	.depth2_title.icon8 {background: url(/static/img/analyze/icon8.png) no-repeat 2% 23%;}
	.depth2_title.icon9 {background: url(/static/img/analyze/icon9.png) no-repeat 2% 23%;}

/* box */
.box_grab {margin: 28px 13px;  line-height: 30px;}
/* .box_grab span {margin-left: 15px; text-align: center;} */
/* 수정(오주영) font-size 15px->13px text-align 추가 */
.box_grab .list_depth label {width:100%; display:"block"; font-size: 13px; color: #004ec2; font-weight: 600; text-align: left;}
.box_grab .list_depth select {margin-left: 12px; width: 212px;  height: 30px; display:"block"; margin-top: 3px;}

.sel {border: 1px solid #bfbfbf;}
.sel:hover, .sel:focus {border-color: #55cec7; transition:all 1s; }


/* button */
.button_area {text-align: center; padding-top: 10px;}
.button_area_1 {position: relative;}
.button_area_1 h2 {overflow: hidden; line-height: 37px;}
.button_area_1 p {position: absolute; right: 0; top:5px; }
.button_area_1 p .btn {min-width: 120px;}
.button_area_1 p a {text-align:center; }

/* .btn {line-height: 32px; display: inline-block; min-width: 182px; font-weight: bold; font-size: 14px; letter-spacing: 0; cursor:pointer; vertical-align: middle; background: #ddf5f4; color: #2bbdb5; border: none; transform: all 0.9s, color 0.3; } */
.btn1 {line-height: 32px; display: inline-block; min-width: 120px; font-weight: bold; font-size: 14px; letter-spacing: 0; cursor:pointer; vertical-align: middle; background: #e6edf8; color: #004ec2; border: none; transform: all 0.9s, color 0.3; }

/* .btn:hover {color:#fff;} */
.btn1:hover {color:#fff;}
.btn_mint:hover {box-shadow: 200px 0 0 0 rgba(7,154,145,1) inset;}
.btn_blue:hover {box-shadow: 200px 0 0 0 rgba(12,69,150,1) inset;}


/* container */
/* 수정(오주영) container -> chart_container / padding 삭제 / padding-left 492px->240px*/
#chart_container {/*padding: 35px 0 0 30px;*/ padding-left:240px;}

.wrap {padding-left: 20px; padding-right: 20px;}
.wrap.dashboard {padding-right:0px;}
.main_title {color:#212121; font-size: 23px; font-weight: bold; letter-spacing: -1.8;}
.content_right_wapper {}
.content_right_wapper .button_area_1 {overflow: hidden;}

/* preview */
/* 수정(오주영) margin-top 삭제 */
.preview_area {box-sizing: border-box; border-top: 1px solid #ecedef; /*margin-top: 30px;*/}
/* border-bottom: 1px solid #ecedef; padding-bottom: 30px;*/

.preview {border: 1px solid #ecedef; background: #fff; margin-top: 30px; height: 730px; padding:30px;}


/* main : margin-left:212px; 삭제함 */
.main_background {height: 321px;  background:url(../../img/index/main_background.png),url(../../img/index/main_background1.png); background-size:467px 321px, 145px 189px; background-position: right, left 130px;; background-repeat: no-repeat;}


/* 수정 (오주영) */
.index_container.main h2 {padding: 60px 0 10px 100px; line-height: 38px; font-size: 28px; color:#535353; background-image: url(../../img/index/tit_icon_01.png), url(../../img/index/tit_icon_02.png); background-repeat: no-repeat; background-position: 18px 18px, 948px 70px; } /* background-attachment: fixed, fixed; */ /*}*/
/*.index_container.main h2, span {letter-spacing: -2px;}*/
.index_container.main h2 span {font-size: 35px; font-weight: bold;}


.layout_box {margin:5px 35px 0 35px; overflow: hidden; }
.bar-img {
	margin-top: 10px;
	margin-left: 90px;
/* 	width:80%; */
/* 	height:20%;  */
	padding: 15px;
	float: center;
	}

/* left_box */
.layout_box .left_box {float: left; width: calc(49% - 5px); box-sizing: border-box; background-color: rgba(255, 255, 255, 0.8); padding: 1.0%; border:1px solid #ecedef}
.layout_box .left_box > a {display: block; border: 1px solid #bfbfbf; height: 400px; margin-top: 10px;}

/* right_box */
.layout_box .right_box {float: right; width: calc(49% - 5px); box-sizing: border-box; background-color: rgba(255, 255, 255, 0.8); padding: 1.0%; border:1px solid #ecedef}
.layout_box .right_box > a {display: block; border: 1px solid #bfbfbf; height: 400px; margin-top: 10px;}

.layout_box:after {content: ""; display: block; clear:both;}


/* 자주이용하는 버튼 */
.main_quick
{width:calc(100% - 70px); height:65px; margin:35px 35px 10px 35px; overflow: hidden; vertical-align: top; }
.main_quick ul {display: block; overflow: hidden;}
.main_quick ul li {display: inline-block; position: relative; width: calc(25% - 30px); margin-right:26px;  vertical-align: middle; height: 60px;  background-image: linear-gradient( to right, #39d7a5, #00ac97, #2c98c2, #042985);  background-size: 300% 100%; border-radius: 5px;
	moz-transition: all .4s ease-in-out;
	-o-transition: all .4s ease-in-out;
	-webkit-transition: all .4s ease-in-out;
	transition: all .4s ease-in-out;}

.main_quick ul li:hover { background-position: 100% 0;
	moz-transition: all .4s ease-in-out;
	-o-transition: all .4s ease-in-out;
	-webkit-transition: all .4s ease-in-out;
	transition: all .4s ease-in-out;
}

.main_quick ul li:focus {outline: none;}

.main_quick ul li:last-child{
	width:25%;
	margin-right:-4px;
}
.main_quick ul li a { position: relative; padding: 15px 0 0 0px; display:block;text-align:center;}
.main_quick ul li a span {display: inline-block; color: #fff; font-size: 14px; padding-left: 15px;}


/* Plotly hover 테이블 스타일링 */
#hoverinfo_tooltip_container {
    width: 500px;
    background-color: white;
    border: 2px solid black;
    padding: 0.5rem 1.25rem 1.25rem;
    box-shadow: 0px 0px 16px rgba(0,0,0,0.25);
}
#hoverinfo_tooltip_container table {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
}
/* #hoverinfo_tooltip_container table th,
#hoverinfo_tooltip_container table td {
} */
#hoverinfo_tooltip_container table th {
    padding: 0.75rem;
    /* border-top: 2px solid lightgrey; */
    border-bottom: 1px solid lightgrey;
}
#hoverinfo_tooltip_container table td {
    padding: 0.5rem 0.75rem;
    vertical-align: top;
    word-break: break-all;
}
#hoverinfo_tooltip_container table tr > th:nth-of-type(1) {
    width: 35%;
}
#hoverinfo_tooltip_container table tr > th:nth-of-type(2) {
    width: 30%;
}
#hoverinfo_tooltip_container table tr > th:nth-of-type(3) {
    width: 35%;
}






/* footer */
#footer{ text-align: center; color: #aaa; margin: 30px 0 0 0}
#footer address{display:inline-block; font-style:normal;letter-spacing: 1px;font-size: 12px; border-top: 1px solid #ecedef; padding-top: 10px; width:100%;}
#footer address b {letter-spacing: 0; }





/* 버튼 감추기 */
.btn_mint, .btn_blue{
	display:none;
}





/* 추가(오주영) */
.depth2_title{padding:10px;margin-bottom:10px;font-size: 16px;color: #212121;font-size: 16px;letter-spacing: -2px;padding-left: 42px;}