@charset "utf-8";

@font-face {
  font-family:'Pretendard';
  font-weight:400;
  src:url(../fonts/Pretendard-Regular.woff) format('woff');
  font-display: swap;
}
@font-face {
  font-family:'Pretendard';
  font-weight:500;
  src:url(../fonts/Pretendard-Medium.woff) format('woff');
  font-display: swap;
}
@font-face {
  font-family:'Pretendard';
  font-weight:600;
  src:url(../fonts/Pretendard-SemiBold.woff) format('woff');
  font-display: swap;
}
@font-face {
  font-family:'Pretendard';
  font-weight:700;
  src:url(../fonts/Pretendard-Bold.woff) format('woff');
  font-display: swap;
}
@font-face {
  font-family:'Pretendard';
  font-weight:800;
  src:url(../fonts/Pretendard-ExtraBold.woff) format('woff');
  font-display: swap;
}
@font-face {
  font-family:'Pretendard';
  font-weight:900;
  src:url(../fonts/Pretendard-Black.woff) format('woff');
  font-display: swap;
}


a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video,input,textarea,select,button{margin:0;padding:0;border:0;font:inherit;vertical-align:baseline;box-sizing:border-box}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}
body{line-height:1}
ol,ul{list-style:none}
blockquote,q{quotes:none}
blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}
a{color:inherit;text-decoration:none;cursor:pointer}
button{border:none;background:none;cursor:pointer}
table{width:100%;border-collapse:collapse;border-spacing:0;word-break:break-all}

body,html{min-width:320px;height:100%}
body{line-height:24px;font-size:16px;font-family:'Pretendard','Malgun Gothic',Dotum,Helvetica,'Apple SD Gothic Neo',Sans-serif;font-weight:400;color:#535353;word-break:normal;-webkit-text-size-adjust:none;vertical-align:baseline;text-size-adjust:100%;-webkit-text-size-adjust:100%;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
img{vertical-align:top}
input[type=text]::-ms-clear{display:none}
caption, legend, .offscr{position:absolute!important;height:1px!important;width:1px!important;overflow:hidden!important;clip:rect(1px 1px 1px 1px)!important;clip:rect(1px,1px,1px,1px)!important}
input[type=text]::-ms-clear{display:none}
select,
input[type=text],
input[type=password],
input[type=tel],
input[type=number],
input[type=file]{-webkit-appearance:none;border-radius:0;}
.offscr{position:absolute!important;height:1px!important;width:1px!important;overflow:hidden!important;clip:rect(1px 1px 1px 1px)!important;clip:rect(1px,1px,1px,1px)!important}
.wrap {display:flex; min-height:100%;}

/* .uiModal { position: fixed; left: -300%; top:0; z-index: 300; width: 100%; height:100%; opacity:0; box-sizing: border-box;}
.uiModal.active {left:0; opacity:1;background-color: rgba(31,32,40,0.5);} 
.alertWrap {position:relative; width:315px; background:#fff;  margin:0 auto; top:50%; padding:16px 24px; border-radius:4px;transform:translateY(-50%)}
.alertWrap .msg {display:table; width:100%; font-size:16px; line-height: 24px; min-height:128px; text-align:center;}
.alertWrap .msg p {display:table-cell; vertical-align: middle;}
.btnCont {display:block; width:100%; height:44px; font-size:16px; color:#fff; margin-top:16px; background:#2A334C; border-radius: 22px; text-align:center;}
.modalWrap {position:relative; width:460px; background:#fff;  margin:0 auto; top:50%; padding:40px 30px; border-radius:4px;transform:translateY(-50%)}
.modalWrap .inner {text-align:center;  font-size:16px; line-height: 24px; }
.modalWrap .inner h1 {font-size:20px; margin-bottom:10px; font-weight: 500; color:#222;}
.modalWrap .btns {margin-top:25px; text-align:center;}
.modalWrap .btns .btnBase {display:inline-block; margin:0 5px; height:40px; font-size:15px; background:#2A334C; color:#fff; line-height: 40px; padding:0 25px;} */

.footer { text-align:center; font-size:12px; line-height: 22px; padding:32px 0; color:#A5A6A9; }
.footer .footerInfo {margin-bottom:16px; display:flex; justify-content: center; color:#79797E}
.footer .footerInfo span:not(:first-child) {position:relative; padding-left:6px; margin-left:6px; }
.footer .footerInfo span:not(:first-child):before {position:absolute; content:''; top:6px; left:0; bottom:6px; border-left:1px solid #79797E}

.loginWrap {margin: 0 auto; min-width:1440px; height:100%; display:flex; align-items: center; justify-content: center; background:url(../images/login_bg.svg) no-repeat; background-size:cover; color:#fff;}
.ewsInfo {width:576px; margin-right:198px;}
.ewsInfo h1 {font-weight: 800;}
.ewsInfo h1 strong {font-size:36px; line-height: 48px;}
.ewsInfo h1 span {font-size:24px; line-height: 36px; margin-left:8px;}
.ewsInfo p {font-size:16px; line-height: 24px; font-weight: 400; margin-top:4px;}
.ewsInfo ul {margin-top:48px; display:flex; justify-content: space-between;}
.ewsInfo ul li {width:162px; border-top:1px solid #fff; font-size:12px; line-height: 22px; text-align:center; padding-top:16px;}

.logConts {width:267px;}
.logConts h2 {height:27px; margin-bottom:32px; color:transparent; background:url(../images/quantit_logo.svg) no-repeat; background-size:auto 100%;}
.logBox label {display:block; height:22px; font-size:14px; line-height: 22px;  margin:16px 0 4px 0;}
.logBox span {display:block; height:32px; border-radius: 16px; background:#fff; overflow:hidden;}
.logBox span input {width:100%; height:32px; border:0; padding:0 15px; color: #2A334C}
.logBox span input:focus {outline:0;}
.logConts .btnLog {display:block; width:100%; height:44px; font-size:16px; color:#fff; margin-top:32px; background:#2A334C; border-radius: 22px; text-align:center;}

.container { width:100%; min-height:100%; }

.navigation {position:relative; width:312px; background:#151926; color:#fff; padding:92px 0 144px 0}
.navigation.fold {max-width:64px;}
.navigation.fold .btnFold {display:none;}
.navigation.fold .naviBottom a {display:none;}
.navigation.fold a span, .navigation.fold button span {display:none;}
.navigation.fold .navi .dep:after {display:none;}
.navigation.fold .naviTop {padding-left:20px;}
.navigation.fold .naviTop .logo {width:20px;}

.naviTop {position:absolute; top:32px; left:0; right:0; padding:16px 32px;}
.naviTop .logo {color:transparent; width:105px; height:28px; background:url(../images/quantit_logo.svg) no-repeat; background-size:auto 100%;}
.naviTop .btnFold {position:absolute; top:10px; right:19px; width:40px; height:40px; font-size:1px; color:transparent}
.naviTop .btnFold:after {position:absolute; content:''; width:16px; height:16px; top:50%; left:50%; transform: translate(-50%, -50%); background:url(../images/ico_btn_fold.svg) no-repeat; background-size: 100%;}
.navigation .navi {height:100%; display:flex; margin-top: 30%;}
.navi ul {width:100%;}
.navi ul li:not(:first-child) {margin-top:14px;}
.navi .menu {font-size:16px; font-weight:600;}
.navi .menu.on, .navi .menu:hover, .navi .subMenu.on, .navi .subMenu:hover {color:#EAEEFE;}
.navi .home,
.navi .dep {position:relative; display:block; width:100%; text-align:left; height:32px; line-height: 32px; color:#fff; font-size:16px; padding-left:48px}
.navi .home:hover, .navi .dep:hover {color:#EAEEFE;}
.navi .subMenuWrap {padding-top:14px; font-weight:500;}
.navi .subMenuWrap a {display:block; height:32px; line-height: 32px; font-size:14px; padding-left:48px; color: #fff}
.navi .home:before,
.navi .dep:before {position:absolute; content:''; width:16px; height:16px; left:24px; top:50%; background-size:100%; transform: translateY(-50%);}
.navi .home:before {background-image:url(../images/ico_home.svg);}
.navi .dep.ic1:before {background-image:url(../images/ico_kor_news.svg);}
.navi .dep.ic2:before {background-image:url(../images/ico_us_news.svg);}
.navi .dep.ic3:before {background-image:url(../images/ico_developer.svg);}
.navi .dep:after {position:absolute; content:''; right:16px; top:50%; width:16px; height:16px; background:url(../images/ico_btn_expand.svg) no-repeat; background-size:100%; transform: translateY(-50%);}
.navi .subMenuWrap {display:none;}
.navi .active .subMenuWrap {display:block;}
.navi .active .dep:after {background-image:url(../images/ico_btn_shrink.svg)}
.naviBottom {position:absolute; top:700px; left:0; right:0; padding:14px 0;}
.naviBottom a,
.naviBottom .bntLogOut {display:block; width:100%; height:32px; color: #fff}
.naviBottom a {padding-left:24px; font-size:14px; line-height: 32px;}
.naviBottom .bntLogOut {position:relative; font-size:16px; padding-left:48px;color:#fff; text-align:left; margin-top:14px;}
.naviBottom .bntLogOut:before {position:absolute; content:''; width:16px; height:16px; left:24px; top:50%;  background:url(../images/ico_logout.svg) no-repeat; background-size:100%; transform: translateY(-50%);}

.content {position:relative; width:1200px; margin:0 auto; height:100%;}
.content .header {position:absolute; top:0; left:0; right:0; height:224px; padding:64px 32px 0 32px; background: #fff; z-index:5;}
.content .section { height:100%; padding:224px 32px 0 32px; overflow-y:auto;}
.content .section .sectionTitle {display: flex; font-weight: 600; font-size:16px; line-height: 24px; height: 24px; justify-content: space-between;}

.knnSection {padding:224px 32px 0 32px;}
.knnSection .sector {position:relative; padding:0px 32px 0 32px;}
.knnSection .sector .sectionTitle {display: flex; font-weight: 600; font-size:16px; line-height: 24px; height: 24px; justify-content: space-between;}
.knnSection .sector .radarChartWrap { position:relative; padding: 32px; }
.knnSection .sector .radarChart { margin-top: 20px; display: flex; align-items: center; }
.knnSection .sector .labelWrap { position:absolute; width: 100%; height: 800px; top: 0;}
.knnSection .sector .labelWrap span { position:absolute; }
.knnSection .sector .labelWrap .economy { top:5%; left:50%; transform: translate(-86%, 0); }
.knnSection .sector .labelWrap .financialMarket { top:9%; left:60%; }
.knnSection .sector .labelWrap .economyPolicy { top:21%; left:72%; }
.knnSection .sector .labelWrap .business { top:39%; left:79%; }
.knnSection .sector .labelWrap .management { top:59%; left:79%; }
.knnSection .sector .labelWrap .profitLoss { top:77%; left:72%; }
.knnSection .sector .labelWrap .financialPosition { top:89%; left:61%; }
.knnSection .sector .labelWrap .companyNA { top:93.5%; left:50%; transform: translate(-86%, 0); }
.knnSection .sector .labelWrap .overseasEconomy { top:88.5%; left:27.5%; }
.knnSection .sector .labelWrap .overseasMarket { top:77%; left:14%; }
.knnSection .sector .labelWrap .overseasPolicy { top:59%; left:10%; }
.knnSection .sector .labelWrap .overseasNA { top:39%; left:10%; }
.knnSection .sector .labelWrap .etc { top:22%; left:17%;}
.knnSection .sector .labelWrap .etcNA { top:10%; left:28%;}
.knnSection .sector .legendWrap { width: 100%; height: 40px; margin-top:36px; display:flex; justify-content: center;}
.knnSection .sector .legendWrap span { position: relative; font-size:14px; font-weight:500; color:#1F2028; }
.knnSection .sector .legendWrap span:not(:first-child) { margin-left:48px; }
.knnSection .sector .legendWrap span:before { position: absolute; content:''; left:-20px; top:7px; width: 12px; height: 9px; margin-right: 4px; border-radius:2px;}
.knnSection .sector .legendWrap span.color_0:before {background-color:#008ffb; border:1px solid #008ffb;}
.knnSection .sector .legendWrap span.color_1:before {background-color:#00e396; border:1px solid #00e396;}
.knnSection .sector .legendWrap span.color_2:before {background-color:#feaf1a; border:1px solid #feaf1a;}
.knnSection .sector .legendWrap span.color_3:before {background-color:#fe4560; border:1px solid #fe4560;}
.knnSection .sector .legendWrap span.color_4:before {background-color:#775dd0; border:1px solid #775dd0;}

/* .header {display:flex; justify-content: space-between;} */
.header h2 {font-size:32px;; line-height: 48px; font-weight: 800; color:#1F2028;}

input[type="checkbox"],
input[type="radio"] {position: absolute; width: 1px;height: 1px;margin: -1px;border: 0;overflow: hidden;padding: 0;clip: rect(0,0,0,0);-webkit-appearance: none;opacity: 0;}
.rdGroup {display:inline-block; border:1px solid #79797E; height:24px; border-radius: 12px; background:#FAFAFA;}
.rdGroup label {display:inline-block; font-size:12px; line-height: 22px; padding:0 7px; vertical-align:top; cursor: pointer;}
.rdGroup :checked + label { position: relative; top: -1px; background:#4C4D53; border:1px solid #79797E; border-radius: 12px; color:#fff;}
.rdGroup label.first { left: -1px; }
.rdGroup label.last { right: -1px; }

.header .formOption {position:absolute; top:64px; right:32px;}
.formOption .tit {display:block; font-size:9px; line-height: 12px; color:#A5A6A9; padding:8px 0 8px 0;}
.formOption .option {display:flex;}
.formOption .option > div ~ div {margin-left:18px;}

.titText {display:block; font-size:9px; line-height: 12px; color:#A5A6A9; padding:16px 0 4px 0;}
.btnCalendar .periodForm {display:inline-flex; position:relative; width:210px;}
.btnCalendar .periodForm .inpDate {position:relative; overflow: hidden; width:110px; border:1px solid #79797E; height:32px; border-radius: 20px; overflow: visible;}
.btnCalendar .periodForm input {width:100%; height:22px; padding:2px 12px 0 28px; font-weight: 500; font-size:16px; vertical-align: middle; background:#FAFAFA;}
.btnCalendar .periodForm input:focus {outline:0;}
.btnCalendar .inpDate .btnDate {position:absolute; top:8px; left:10px; width:12px; height:12px; background:url(../images/ico_btn_calendar.svg) no-repeat;}

.formPeriod {display:inline-flex; position:relative; width:210px; justify-content: space-between;}
.formPeriod:after {position:absolute; content:'~'; width:26px; text-align:center; left:92px; top:0; line-height: 22px;}
.formPeriod .inpDate {position:relative; overflow: hidden; width:92px; border:1px solid #79797E; height:24px; border-radius: 12px;}
.formPeriod input {width:100%; height:22px; padding:0 12px 0 24px; font-size:12px; vertical-align: top; background:#FAFAFA;}
.formPeriod input:focus {outline:0;}
.formPeriod .inpDate .btnDate {position:absolute; top:5px; left:8px; width:12px; height:12px; background:url(../images/ico_btn_calendar.svg) no-repeat;}

.btnGroup button {display:inline-block; height:32px; font-size:16px; padding:0 8px; border:1px solid #35363E; border-radius: 16px;}
.btnGroup button ~ button {margin-left:6px;}
.btnGroup .btnChecked {display:inline-block; position:relative; height:32px; font-size:16px; line-height: 30px; padding:0 8px 0 8px; background:#c7c7c9; color:#000000; border:1px solid #000000; border-radius: 16px;}
.btnGroup .btnChecked-0 {display:inline-block; position:relative; height:32px; font-size:16px; line-height: 30px; padding:0 8px 0 8px; background:#b9d4f2; color:#008ffb; border:1px solid #008ffb; border-radius: 16px;}
.btnGroup .btnChecked-1 {display:inline-block; position:relative; height:32px; font-size:16px; line-height: 30px; padding:0 8px 0 8px; background:#c2ead7; color:#00e396; border:1px solid #00e396; border-radius: 16px;}
.btnGroup .btnChecked-2 {display:inline-block; position:relative; height:32px; font-size:16px; line-height: 30px; padding:0 8px 0 8px; background:#f0ddbd; color:#feaf1a; border:1px solid #feaf1a; border-radius: 16px;}
.btnGroup .btnChecked-3 {display:inline-block; position:relative; height:32px; font-size:16px; line-height: 30px; padding:0 8px 0 8px; background:#f3c4c7; color:#fe4560; border:1px solid #fe4560; border-radius: 16px;}
.btnGroup .btnChecked-4 {display:inline-block; position:relative; height:32px; font-size:16px; line-height: 30px; padding:0 8px 0 8px; background:#cec8e5; color:#775dd0; border:1px solid #775dd0; border-radius: 16px;}
.btnGroup .btnChecked button {position:absolute; width:20px; height:20px; top:4px; right:4px; font-size:1px; color:transparent; background: url(../images/ico_btn_download.svg) no-repeat center center;}
.inDate {margin-top:4px;}
.inDate .date {display:inline-block; position:relative; height:32px; font-size:16px; line-height: 30px; padding:0 26px 0 8px; border-radius: 16px;}
.inDate .date-0 {display:inline-block; position:relative; height:32px; font-size:16px; line-height: 30px; padding:0 26px 0 8px; background:#b9d4f2; color:#008ffb; border:1px solid #008ffb; border-radius: 16px;}
.inDate .date-1 {display:inline-block; position:relative; height:32px; font-size:16px; line-height: 30px; padding:0 26px 0 8px; background:#c2ead7; color:#00e396; border:1px solid #00e396; border-radius: 16px;}
.inDate .date-2 {display:inline-block; position:relative; height:32px; font-size:16px; line-height: 30px; padding:0 26px 0 8px; background:#f0ddbd; color:#feaf1a; border:1px solid #feaf1a; border-radius: 16px;}
.inDate .date-3 {display:inline-block; position:relative; height:32px; font-size:16px; line-height: 30px; padding:0 26px 0 8px; background:#f3c4c7; color:#fe4560; border:1px solid #fe4560; border-radius: 16px;}
.inDate .date-4 {display:inline-block; position:relative; height:32px; font-size:16px; line-height: 30px; padding:0 26px 0 8px; background:#cec8e5; color:#775dd0; border:1px solid #775dd0; border-radius: 16px;}
.inDate .cancelCal-0 {position:absolute; width:20px; height:20px; top:5px; right:4px; font-size:1px; color:transparent; background: url(../images/ico_btn_cancel_blue.svg) no-repeat center center;}
.inDate .cancelCal-1 {position:absolute; width:20px; height:20px; top:5px; right:4px; font-size:1px; color:transparent; background: url(../images/ico_btn_cancel_green.svg) no-repeat center center;}
.inDate .cancelCal-2 {position:absolute; width:20px; height:20px; top:5px; right:4px; font-size:1px; color:transparent; background: url(../images/ico_btn_cancel_yellow.svg) no-repeat center center;}
.inDate .cancelCal-3 {position:absolute; width:20px; height:20px; top:5px; right:4px; font-size:1px; color:transparent; background: url(../images/ico_btn_cancel_red.svg) no-repeat center center;}
.inDate .cancelCal-4 {position:absolute; width:20px; height:20px; top:5px; right:4px; font-size:1px; color:transparent; background: url(../images/ico_btn_cancel_purple.svg) no-repeat center center;}
.inDate span ~ span {margin-left:6px;}
.inDate .btnDate {width:32px; height:32px; border:1px solid #35363E; margin-left:6px; border-radius: 50%; background:url(../images/ico_add_calendar.svg) no-repeat center center; cursor: pointer;}
.inDate .pickerWrap {display: inline-block; cursor: pointer;}
.inDate .pickerWrap button {background: none;}

.subBox {width:437px;}
.subBox h3 {font-size:16px; line-height: 24px; font-weight: 600; color:#1F2028;}

.headBox h3 {display:inline-block; font-weight: 600; color:#1F2028;}
.legend {display:inline-flex;}
.legend span {position:relative; margin-left:8px; font-size:9px; line-height: 12px; color:#79797E; padding-left:16px;} 
.legend .leg1:before {position:absolute; content:''; left:0; top:50%; width:8px; height:6px; margin-top:-3px;}
.legend .leg2:before {position:absolute; content:''; left:0; top:50%; width:8px; height:2px; background:#1F2028; margin-top:-1px;}
.legend .leg1.vkospi:before {background:#FEEAEC;}
.legend .leg1.usTerms:before {background:#EAEEFE;}
.legend .leg1.usCredit:before {background:#E8F4EF;}
.legend .leg1.vix:before {background:#FDF6DF;}
.legend .leg2.snp500:before {background:#B37FEB;}

.contsBox {height:612px; margin-top:30px; border:1px solid #D2D2D4; overflow-y:auto;}
.list li {font-size:14px; line-height: 22px; color:#79797E; word-wrap: break-word;}
.list li:not(:first-child) {margin-top:30px;}
.list p {font-size:16px; line-height: 24px; margin-bottom:5px; color:#1F2028; font-weight: 600;}
.list p strong {font-weight: 900;}

.contsSection {display:flex;}
.contsSection .chartArea {width:681px; margin-right:60px;}
.contsSection .chartArea .chartTop {font-weight: 600; display: flex; justify-content: space-between;}

.tipBox {position:relative; display:inline-block; background:#fff; border-radius: 2px; box-shadow: 0px 9px 28px 8px rgba(0, 0, 0, 0.05), 0px 3px 6px -4px rgba(0, 0, 0, 0.12);}
.tipBox:after {position:absolute; content:''; width:12px; height:6px; top:100%; left:50%; margin-left:-6px; background:url(../images/arr_tip.png) no-repeat; background-size:100%}
.tipBox .date {display:block; font-size:12px; line-height: 22px; padding:4px 16px;}
.tipBox dl {border-top:1px solid #D2D2D4; padding:4px 16px;  font-size:14px; line-height: 22px; }
.tipBox dl div {display:flex; justify-content: space-between; width:190px;}
.tipBox dl div:nth-child(2) {margin-top:8px;}

.valueBox {display:inline-block;border:1px solid #D2D2D4; border-radius: 4px; background:#fff; padding:6px;font-size:9px; line-height: 12px; }
.valueBox .data {display:block; color:#000; padding-bottom:2px;}
.valueBox .legend {padding:0 6px 8px 6px; display:block;border-top:1px solid #D2D2D4;}
.valueBox .legend span {display:block; font-size:9px; line-height: 12px; margin:8px 0 0 0;} 
.valueBox .legend span strong {font-weight: 700; color:#000;}
 
.tag {display:inline-block; font-size:14px; line-height: 20px;}
.tag em {display:inline-block; font-size:12px; line-height: 18px; border:1px solid #B37FEB; border-radius: 2px; padding:0 4px; margin-right:8px;}
.tag.pu em {color:#B37FEB; border-color:#B37FEB;}
.tag.gr em {color:#5CDBD3; border-color:#5CDBD3;}
.tag.or em {color:#FF9C6E; border-color:#FF9C6E;}
.tag.gy em {color:#79797E; border-color:#79797E;}

.tagGroup {padding:0 200px; width:1120px; height: 72px; background-color: #FAFAFA;}
.tagGroup ul {display:flex; justify-content: center; flex-wrap: wrap;}
.tagGroup ul li {white-space: nowrap; padding:3px 16px;}
.tagGroup ul li span button .btnSelected {text-decoration: underline; font-weight: 700;}
.tagGroup button ~ button {margin-left:14px;}
.btnSelected {text-decoration: underline; font-weight: 700;}

.tooltipWrap {position:relative;display:inline-block; } 
.tooltipWrap .btnTooltip {display:inline-block; width:16px; height:16px; background:url(../images/ico_detail_info.svg) no-repeat; background-size:100%; margin-left: 4px;}
.tooltip {display:none; position:absolute; left:84px; margin-top:10px; width:460px; background:#fff; padding:9px 16px; z-index:10; box-shadow: 0px 9px 28px 8px rgba(0, 0, 0, 0.05), 0px 6px 16px rgba(0, 0, 0, 0.08), 0px 3px 6px -4px rgba(0, 0, 0, 0.12);}
.tooltip:before {position:absolute; content:''; top:13px; left:16px; width:16px; height:16px; background:url(../images/bg_tooltip.png) no-repeat; background-size:100%; }
.tooltip .exp {font-size:14px; font-weight: 500; line-height: 22px; color:#35363E;}
.tooltipWrap.active .tooltip {display:block;}
.tooltipAlign {display:flex; align-items: center;}
.tooltip.detail {left:48px; width:612px;}
.tooltip.sunburst {left:96px; width: 420px; top:16px;}
.tooltip.articles {left:100px; width: 288px; top:16px;}

.btnMoveTobar {width:13px; height:11px; background:url(../images/ico_btn_down.svg) no-repeat; background-size: 100%; margin-left:5.5px;}
.btnMoveToRadar {width:13px; height:11px; background:url(../images/ico_btn_moveup.svg) no-repeat; background-size: 100%; margin-left:5.5px;}
.btnDownload {width:32px; height:22px; background:url(../images/ico_btn_download.svg) no-repeat; background-size: 100%; margin-left:5.5px;}

/* home */
.homeChart {padding-top: 225px; overflow-y: auto;}
.homeChart .chartItem {margin-left: 48px; display: flex; flex-direction: row;}
.homeChart .delimiter {border-top:1px solid #D2D2D4; height:20px;}
.homeChart .chartItem .lineChartWrap {margin-left: 48px; width: 100%;}
.homeChart .gaugeChartWrap .title { font-size: 16px; font-weight: 900; }

/* gauge */
.gauge { position: relative; }
.gauge .dateWrap { margin-top:16px; display:flex; justify-content:center; align-content:center; color: #000;}
.gauge .dateWrap span { font-size:14px; font-weight:600; line-height:16px}
.gauge .dateWrap button { margin-top:4px; width:16px; height:16px; background-size: 100%;}
.gauge .dateWrap .react-datepicker-wrapper { margin-left: 0!important; width:auto; }
.gauge .dateWrap .react-datepicker__month-container { width:120px; }
.gauge .dateWrap .react-datepicker__navigation { top: -2px!important; }
.gauge .dateWrap .react-datepicker button { width:32px; height:32px; }
.gauge .dateWrap .prev { margin-right:4px; background:url(../images/ico_btn_prev.svg) no-repeat; }
.gauge .dateWrap .prev.on {background:url(../images/ico_btn_prev_on.svg) no-repeat; }
.gauge .dateWrap .next { margin-left:4px; background:url(../images/ico_btn_next.svg) no-repeat; }
.gauge .dateWrap .next.on { background:url(../images/ico_btn_next_on.svg) no-repeat; }
.gauge .needle { width:48px; height:11px; background:url(../images/needle.svg) no-repeat; position: absolute; bottom:42px; left:56px;}
.gauge .needle.rotate { animation: rotation 3s ease ;}
.gauge .needle.normal { transform: rotate(30deg); transform-origin: right bottom; bottom:40px; left:54px;}
.gauge .needle.caution { transform: rotate(90deg); transform-origin: right bottom; bottom:44px; left:47px;}
.gauge .needle.danger { transform: rotate(150deg); transform-origin: right bottom; bottom:50px; left:47px;}

/* korNewsIndex */
.newsIndexChart { padding-top: 225px; }
.newsIndexChart .chartHeader { margin-bottom:20px; display:flex; flex-direction:row; justify-content: space-between;}
.newsIndexChart .chartHeader .btnDownload { margin-right:84px; width:32px; height:22px; background:url(../images/ico_btn_download.svg) no-repeat;}
.newsIndexChart .legend { margin-left:60px; }
.newsIndexChart .legend .leg1:before { background-color: #1F2028; margin-top: -11px; }
.newsIndexChart .legend .leg2:before { background-color: #F42C3F; margin-top: -9px; }
.newsIndexChart .summaryWrap { margin-top:20px; margin-left: 48px; display: flex; flex-direction: row;}
.newsIndexChart .summaryWrap .border { border: 1px solid #D2D2D4; border-radius: 4px; }
.newsIndexChart .summaryWrap .gaugeChartWrap .title { font-size: 16px; font-weight: 900; }
.newsIndexChart .summaryWrap .gaugeChartWrap .gaugeChart { width: 450px; height:180px; margin-top: 16px; display:flex; justify-content: center; }
.newsIndexChart .summaryWrap .summary { margin-top:40px; margin-left:40px; padding:16px; width:662px; height: 180px; overflow-y: auto;}
.newsIndexChart .summaryWrap .summary .summaryItem { margin-bottom:16px; }
.newsIndexChart .summaryWrap .summary .title { color: #1F2028; font-size: 16px; font-weight: 600; line-height: 24px; }
.newsIndexChart .summaryWrap .summary .contents { color: #79797E; font-size: 14px; font-weight: 500; line-height: 22px; }

/* indexLineChart */
.tooltipBox { width:160px; height:72px; box-sizing:border-box; border: 0.5px solid #D2D2D4; border-radius: 4px; padding:6px; padding-top:0; }
.tooltipBox .divider { width: 100%; height: 0.5px; background: #D2D2D4; }
.tooltipBox .item { display:flex; flex-direction:row; justify-content: space-between; padding-top: 8px;}
.tooltipBox span { font-size:9px; line-height:12px; }
.tooltipBox .date { font-weight:400; color:#000; }
.tooltipBox .title { font-weight:400; color:#79797E; }
.tooltipBox .value { margin-left:4px; font-weight:700; color:#000; }
.tooltipBox .homeItem { display:flex; flex-direction:row; align-items: center; padding-top: 8px;}
.tooltipBox .homeItem .theme { width:8px; height:6px; margin-right:8px; }
.tooltipBox .homeItem .reference { width:8px; height:2px; margin-right:8px; }

.news { height:calc(100%-120px); overflow-y: scroll;}
.newsLoading { margin-top: 10px!important; height: calc(100%-120px); overflow-y: scroll; display: flex; justify-content: center; align-items: center;}
.newsInfo { display: flex; flex-direction: column; }
.newsInfo .newsTitle { color: #232323; width: 390px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; font-size: 14px;}
.newsInfo .newsTitle strong { color: #FF6633; font-weight: 600;}
.newsInfo .newsContent { color: #808080; width: 100%; text-overflow: ellipsis; overflow: hidden; word-break: break-all; line-height: 22px; margin-bottom: 32px;}
.newsInfo .newsContent strong { color: #f89b6c; font-weight: 500;}
.newsInfo .newsSite { color: #232323; align-items: flex-start; font-weight: 600; margin-bottom: 5px; font-size: 13px;}

/* date picker */
.react-datepicker-wrapper:not(:first-child) { margin-left: 26px; }
.react-datepicker-wrapper .buttonWrap { width: 92px; height:23px; border:1px solid #79797E; border-radius:20px; display:flex; flex-direction:row; justify-content: center; align-items: center; background: #FAFAFA;}
.react-datepicker-wrapper .buttonWrap .icon { margin-right: 4px; width:12px; height:12px; background:url(../images/ico_btn_calendar.svg) no-repeat; }
.react-datepicker-wrapper .buttonWrap .date { font-size:12px; font-weight: 400; line-height: 22px; color:#35363E; }
.month .react-datepicker__month-container { width: 120px; }
.week .react-datepicker__month-container { width: 240px; }
.react-datepicker__navigation { top: 5px!important; }

/* us news network */
.react-datepicker-wrapper .buttonWrap.usNetwork { width:110px; height: 32px; }
.react-datepicker-wrapper .buttonWrap.usNetwork .date { font-size:16px; line-height: 24px; }
.titleLabel { font-size: 16px; font-weight: 600; color: #fff; margin-bottom: 16px; background-color: #4C4D53; padding: 4px 8px; border-radius: 4px;}

/* popup */
.uiModal { position: fixed; left: -300%; top:0; z-index: 300; width: 100%; height:100%; opacity:0; box-sizing: border-box;}
.uiModal.active {left:0; opacity:1;background-color: rgba(31,32,40,0.5);} 
.alertWrap {position:relative; width:315px; background:#fff;  margin:0 auto; top:50%; padding:16px 24px; border-radius:4px;transform:translateY(-50%)}
.alertWrap .msg {display:table; width:100%; font-size:16px; line-height: 24px; min-height:128px; text-align:center;}
.alertWrap .msg p {display:table-cell; vertical-align: middle;}
.btnCont {display:block; width:100%; height:44px; font-size:16px; color:#fff; margin-top:16px; background:#2A334C; border-radius: 22px; text-align:center;}
.modalWrap {position:relative; width:320px; height: 240px; background:#fff;  margin:0 auto; top:50%; padding:40px 30px; border-radius:4px;transform:translateY(-50%)}
.modalWrap .inner {text-align:center;  font-size:14px; line-height: 24px; }
.modalWrap .inner h1 {font-size:16px; margin-bottom:20px; font-weight: 500; color:#222;}
.modalWrap .inner p {font-size:14px; margin-bottom:10px; font-weight: 400; }
.modalWrap .btns {margin-top:20px; text-align:center;}
.modalWrap .btns .btnBase {display:inline-block; width:266px; height:44px; font-size:15px; background:#2A334C; color:#fff; line-height: 40px; padding:0 25px; border-radius: 30px;}

.barChartPrefix {position: relative; display: flex; flex-direction: row; font-size: 12px; font-weight: 600; top: 10px;}
.barChartPrefix .barChartLegend-1 {position: absolute; width: 10%;}
.barChartPrefix .barChartLegend-2 {position: absolute; width: 40%; left: 10%; text-align: left;}
.barChartPrefix .barChartLegend-3 {position: absolute; width: 50%; left: 49%; text-align: right;}