@charset "UTF-8";


/* ios 부드러운 스크롤을 위해 */
body.ios { --webkit-overflow-scrolling: touch; /* padding-top: 1px; margin-top: -1px; */ }

/* loading */
img.loading { display:block; margin:0 auto; margin-top:200px }


/* color theme */
.bgLightSilver { background-color: #f5f5f5; }
.colorLightSilver { color: #999 !important; }

/*### main ####################*/
#main { margin:0 auto; width:100%; min-width:320px; max-width:640px; background:#fff; text-align:left; overflow:hidden; z-index:1 }


ul.fixed_menu1        { display: flex; height:55px; border-top:1px solid #F0F0F0; }
ul.fixed_menu1 li     { width:20%; height:55px; overflow:hidden }
ul.fixed_menu1 li a   { display:block; width:100%; height:60px; }
ul.fixed_menu1 li a.foot_lounge     { background:url('/common/img_old/fixed_menu/foot_lounge1.png') no-repeat center; background-size:50px 60px; margin-top:-5px }
ul.fixed_menu1 li a.foot_lounge.on  { background:url('/common/img_old/fixed_menu/foot_lounge2.png') no-repeat center; background-size:50px 60px; margin-top:-5px }
ul.fixed_menu1 li a.foot_market     { background:url('/common/img_old/fixed_menu/foot_market1.png') no-repeat center; background-size:50px 60px; margin-top:-5px }
ul.fixed_menu1 li a.foot_market.on  { background:url('/common/img_old/fixed_menu/foot_market2.png') no-repeat center; background-size:50px 60px; margin-top:-5px }
ul.fixed_menu1 li a.foot_stock      { background:url('/common/img_old/fixed_menu/foot_stock1.png') no-repeat center; background-size:50px 60px; margin-top:-5px }
ul.fixed_menu1 li a.foot_stock.on   { background:url('/common/img_old/fixed_menu/foot_stock2.png') no-repeat center; background-size:50px 60px; margin-top:-5px }
ul.fixed_menu1 li a.foot_trade      { background:url('/common/img_old/fixed_menu/foot_trade1.png') no-repeat center; background-size:50px 60px; margin-top:-5px }
ul.fixed_menu1 li a.foot_trade.on   { background:url('/common/img_old/fixed_menu/foot_trade2.png') no-repeat center; background-size:50px 60px; margin-top:-5px }

div.fixed_menu2              { position:fixed; margin:0 auto; left:50%; bottom:0px; width:75px; transform:translate(-50%, 0); z-index:99 }
div.fixed_menu2 a            { display:block; width:100%; height:60px; }
div.fixed_menu2 a.foot_my    { background:url('/common/img_old/fixed_menu/foot_my1.png')     no-repeat center; background-size:50px 60px; margin-top:-5px; }
div.fixed_menu2 a.foot_my.on { background:url('/common/img_old/fixed_menu/foot_my2.png')     no-repeat center; background-size:50px 60px; }


/*### sub ####################*/
.sub_wrap { position: absolute; display:none; margin:0 auto; width:100%; height:100%; background:#fff; min-width:320px; max-width:640px; z-index:2;  }

/*
section.content_wrap.top    article.content { height:calc(100% - 50px); }
section.content_wrap.top100 article.top     { height:100px; }
section.content_wrap.top100 article.content { height:calc(100% - 100px); }
section.content_wrap.top130 article.top     { height:130px; }
section.content_wrap.top130 article.content { height:calc(100% - 130px); }
section.content_wrap.top227 article.top     { height:227px; }
section.content_wrap.top227 article.content { height:calc(100% - 227px); }
#main.menu section.content_wrap article.content { height:calc(100% - 50px); }
#main.menu section.content_wrap.top100 article.content { height:calc(100% - 100px); }
#main.menu section.content_wrap.top130 article.content { height:calc(100% - 130px); }
#main.menu section.content_wrap.top227 article.content { height:calc(100% - 2270px); }
*/


section.bgOrange .top     { background-color:#ff9000 !important; color:#fff !important }
section.bgOrange .content { background-color:#ff9000 !important; color:#fff !important }
section.bgOrange div.page_title { background-color:#ff9000; color:#fff  }
section.bgOrange div.page_title div i.btn_cog    { background:url('../icon_old/icon_cog_white.svg') no-repeat center;   background-size: 20px; }
section.bgOrange div.page_title div i.btn_alarm  { background:url('../icon_old/icon_alarm_white.svg') no-repeat center; background-size: 20px; }
section.bgOrange div.page_title div i.btn_search { background:url('../icon_old/icon_search_white.svg') no-repeat center; background-size:19px; }


/* sub_title  */
.content .sub_title { margin:0 auto; padding:0 0px 10px 25px; height:35px; font-size:18px; font-weight:bold; color:#111 }
.content .sub_title .more { float:right; color:#ddd; width:40px; height:35px; text-align:center; cursor:pointer }

/*******************************/



.empty { width:100%; text-align:center; font-size:15px; color:#999; padding:80px 0px; }
.empty div { display:block; color:#111; font-size:18px; font-weight:bold; padding-bottom:15px; }
.empty b   { font-weight:800; }
.empty button { margin-top:50px; width:220px; font-size:14px; }



/*----------------------------*/
#btn_top_wrap { display:none; position:fixed; bottom:10px; right:10px }
#main #btn_top_wrap { bottom:60px; }
#btn_top_wrap .btn_top { width:46px; height:46px; border-radius:100%; background:#fff url('/common/icon_old/icon_top.svg') no-repeat center; box-shadow:1px 1px 8px 0px rgba(0,0,0,0.3); }
 

/*----------------------------*/


/* checkbox */
label.checkbox { position:relative; display:inline-block; padding-left:25px; line-height: 20px; color: #404040; cursor: pointer; }
label.checkbox input { position:absolute; left: -9999px; line-height: normal; margin-left: -20px; box-sizing: border-box; padding: 0; }
label.checkbox input + i { position: absolute; left: 0; display: block; width:20px; height:20px; outline: 0; background:url(/common/css/import/icons/checkbox_normal.svg); background-size:20px; transition: border-color .3s; -webkit-transition: border-color .3s; }
label.checkbox input + i:after { position: absolute; top: -5px; left: 1px; width: 13px; height: 13px; text-align: center;  -webkit-transition: opacity .1s; }
label.checkbox input:checked + i { background:url(/common/css/import/icons/checkbox_checked.svg); background-size:20px; background-position:center }
label.checkbox input.disabled + i { background:url(/common/css/import/icons/checkbox_checked_gray.svg); background-size:24px; background-position:center }

/* line */
hr.line { width:100%; height:5px; margin:0px; background-color:rgba(0,0,0,0.1); border:0px; }

/* account_sel */
.account_sel        { height:80px; padding:10px; padding-left:25px; }
.account_sel img    { display:block; width:70px; height:16px; margin:6px 0px; margin-right:10px  }
.account_sel div    { display:block; width:100%; }
.account_sel select { float:left;  width:calc(100% - 100px); font-size:16px; height:30px; background-color:#fff; border:0px; border-bottom:1px solid #ccc; color:#999; }
.account_sel select.active,
.account_sel select:focus { color:#000 }
.account_sel button  { float:right; width:90px; font-size:14px; height:30px; border:0px; background-color:#ff8f00; color:#fff; border-radius:5px; text-align:center; }
.account_sel button:disabled { background-color:#ccc; }

/* 등락 down/up */
.price.DOWN         { color:blue !important }
.price.UP           { color:#d10000 !important }
.stock_price        { font-weight:bold }
.stock_price.DOWN   { color:blue !important; }
.stock_price.UP     { color:#d10000 !important; }
.stock_rate::before { content:"" }
.stock_rate.DOWN { color:blue !important; }
.stock_rate.DOWN::before { padding-left:15px; background:url('/common/icon_old/icon_rate_down.svg') no-repeat center }
.stock_rate.UP   { color:#d10000 !important; }
.stock_rate.UP::before { padding-left:15px; background:url('/common/icon_old/icon_rate_up.svg') no-repeat center }
.stock_rate.NONE::before { content:"" !important }

/* 뉴스, 공시 목록 */
.news_noti_list    { display:flex; flex-direction: column; margin:0px 20px; width:calc(100% - 60px); height:80px; margin-top:15px; border-bottom:1px solid #DFDFDF; }
/*.news_noti_list { width:100%; border-bottom:1px solid #f7f7f7; padding:13px 0px }*/
.news_noti_list .news_main { display: flex; font-size:12px; color:#111; height:50px; padding-top:13px; flex-direction: row; justify-content: flex-start;}
.news_noti_list label { color:#999; font-size:13px }
.news_noti_list label b { font-weight:normal; color:#ff9000; padding-right:5px; border-right:1px solid #f7f7f7; margin-right:5px }
.news_noti_list a { display:block; width:100%; height:25px; font-size:15px; color:#111; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.news_noti_list div { font-size:13px; color:#999 }
.news_noti_list .news_sub { display:flex; justify-content: space-between; font-size:11px; color:#999; }


/* ci list */
ul.stock_ci_list { margin-top:5px }
ul.stock_ci_list li { padding:15px 0px; min-height: 9vh; border-bottom: none; display: flex; flex-direction: row; justify-content: space-between; }
ul.stock_ci_list li .stock_header { display: flex; flex-direction: column; width:calc(100% - 190px); }
ul.stock_ci_list li .stock_header .stock_name { font-size:16px; color: #111; font-weight:bold; padding-top:4px }
ul.stock_ci_list li .stock_header .stock_tag_container { font-size: 12px; color: #999; overflow:hidden; white-space:nowrap; margin-top:3px }
ul.stock_ci_list li .stock_header .stock_tag_container > .stock_tag { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
ul.stock_ci_list li .stock_header .stock_tag_container > .stock_tag span { margin-right:4px }
ul.stock_ci_list li .stock_body { width:110px; text-align:right; padding-right: 5px; display: flex; flex-direction: column; align-items: flex-end; font-size: 16px; }
ul.stock_ci_list li .stock_body .stock_price { font-size:16px; font-weight:bold; }
ul.stock_ci_list li .stock_body .stock_rate  { font-size:15px; color: #999; font-weight:800; }
ul.stock_ci_list li .stock_footer { display:flex; flex-direction:column; align-items:flex-end; padding-top:2px }

/* request_list */
ul.request_list { margin:0 auto; width:100%; font-size:13px; }
ul.request_list li { margin-bottom:10px; background-color:#fff; border-radius:5px; padding:15px; }
ul.request_list li.status1 {  } /* 요청 */
ul.request_list li.status2 { background-color:#eee; opacity:0.5 } /* 완료 */
ul.request_list li.status3 { background-color:#eee; opacity:0.5 } /* 마감 */
ul.request_list li.status8 { background-color:#eee; opacity:0.5 } /* 기간만료 */
ul.request_list li.status8 span.exp_timer { color:#ff9929 }
ul.request_list li.status9 { background-color:#eee; opacity:0.5 } /* 취소 */
ul.request_list li dl { width:100%; }
ul.request_list li dl dd.row1 { padding-bottom:10px }
ul.request_list li dl dd.row1 h5 { display:inline-block; font-size:18px; }
ul.request_list li dl dd.row1 .right { float:right; color:#999 }

ul.request_list li dl dd.row2 { height:30px; display:flex; line-height:30px;  }
ul.request_list li dl dd.row2 span:nth-child(1) { display:inline-block; width:55px; }
ul.request_list li dl dd.row2 span:nth-child(1) label { display:inline-block; height:22px; line-height:20px; margin-top:4px; border:1px solid #ff9000; border-radius:3px; padding:0 5px; color:#ff9000; font-size:13px }
ul.request_list li dl dd.row2 span:nth-child(2) { display:inline-block; width:calc(50% - 20px); font-size:17px; font-weight:bold; white-space: nowrap }
ul.request_list li dl dd.row2 span:nth-child(3) { display:inline-block; width:calc(50% - 35px); font-size:17px; font-weight:bold; white-space: nowrap; text-align:right }
ul.request_list li dl dd.row2 span small { font-size:13px; color:#999; font-weight:normal }

ul.request_list li dl dd.row3 { display:flex }
ul.request_list li dl dd.row3 > div  { width:calc(100% - 100px); padding-top:8px; font-size:13px; }
ul.request_list li dl dd.row3 > span { width:100px; color:#999; padding-top:20px; text-align:right; font-size:13px; }
ul.request_list li dl dd.row3 > span span.direct   { color:#ff9929; padding-left:17px; background:url(/common/icon_old/icon_direct.svg) no-repeat; background-size:12px 12px; background-position:left center; }


/* 종목 팝업 */
.stock_popup { padding:2px 16px; }
.stock_popup > li { display: flex; flex-direction: row;}
.stock_popup > li > img { display:inline-block; width:44px; height:44px; border:1px solid var(--color-G3); border-radius: 45%; vertical-align: top; }
.stock_popup > li button { min-width: unset; padding-left: 12px; padding-right: 10px; }
.stock_popup > li:first-child > span:nth-child(n+3) { justify-self: flex-end; margin-left: auto; }
.stock_popup > li:nth-child(n+2) { display: flex; flex-direction: column; }
.stock_popup > li.footer-fixed { position: fixed; bottom: 50px; left: 0px; width: 100%; padding: 0 20px; }
.stock_popup > li .stock_table { padding-top: 24px; display: flex; flex-direction: row; justify-content: space-between; }
.stock_popup > li .stock_table > span { display: flex; flex-direction: column; width: 100%;}

/* ### kbsecStock ### */
#ifrm_vKeypad { display:none; margin:0 auto; position:fixed; top:0; width:100%; min-width:320px; max-width:640px; height:100%; }
div.kbsec_agree { margin:0 auto; width:100%; font-size:12px; text-align:left ; padding:0px 10px; color:#666 }
section.kbsecStock .stock_info { display:none }



/* auth_result */
.auth_result { padding:0px 0px }
.auth_result .txt1 { font-size:22px; font-weight:800; text-align:center; color:#111; line-height:30px; } 
.auth_result .txt2 { font-size:15px; text-align:center; color:#111; padding:20px 0px 40px 0px } 
.auth_result .account_info { margin-bottom:40px; width:100%; height:50px; line-height:50px; background-color:#F5F6F7; border-radius:10px; padding-left:61px; font-size:13px; color:#666666 }
.auth_result .account_info.KB { background:#F5F6F7 url('/common/img_old/logo/logo_kbsec2.svg') no-repeat; background-position:20px center; background-size:22px }
.auth_result .account_info.NH { background:#F5F6F7 url('/common/img_old/logo/logo_nhsec2.svg') no-repeat; background-position:20px center; background-size:22px } 
.auth_result .account_info:after { content:''; display:block; width:30px; height:50px; float:right; background:url('/common/icon_old/icon_clipboard_copy.svg') no-repeat left center;  }
/*
.auth_result .btn1 {}
.auth_result .btn1 button { width:100%; height:50px; background-color:#FF9929; border:0px; border-radius:10px; text-align:center; font-size:15px; font-weight:800; color:#fff; }
.auth_result .btn2 {}
.auth_result .btn2 button:nth-child(1) { width:calc(50% - 5px); margin-right:5px; height:50px; background-color:#FFFFFF; border:1px solid #999999; border-radius:10px; text-align:center; font-size:15px; font-weight:800; color:#999; } 
.auth_result .btn2 button:nth-child(2) { width:calc(50% - 5px); margin-left:5px;  height:50px; background-color:#FF6929; border:1px solid #FF6929; border-radius:10px; text-align:center; font-size:15px; font-weight:800; color:#fff; } 
*/