@charset "utf-8";

*{font-size: 14px;}

/*header*/
header.main_header{width: 100%; display:flex; flex-direction: column; background: var(--background); border-bottom:1px solid #ddd; position: fixed; top: 0; z-index:99; }

.app_download_banner{width: 100%; background: #3269ff; color:var(--fontColor); display: flex; flex-direction: row; position: relative; justify-content: space-between; align-items: center; padding:20px 0;}
.app_download_banner > div{display: flex; flex-direction: row; width: 100%; justify-content: space-between; max-width: 1400px; align-items: center;}


.app_download_banner span{color:#fff; line-height: 1.1em;}
.app_download_banner input[type="button"].adb_btn{
    border-radius: 20px; background: #ffffff;
    color:#222; font-weight: bold; margin:0px;
}
.app_download_banner .adb_close{position:absolute; right:5.5%; top: 50%; transform: translateY(-50%); color:#000; font-size: 2em; font-weight: bold; cursor: pointer;}

.header_cont{ padding:10px 0; display: flex;  width: 100%; max-width: 1400px;  flex-direction: column; align-items: flex-end; margin:0 auto; }
.header_cont.pc_only{display: flex;}

.header_cont .header_cont_top{display: flex; flex-direction: row; align-items: center; position: relative; width: 100%; max-width: 150px; }
.hct_link{ position: absolute; right:-10px; top: 50%;  color: var(--fontColor);}
.hct_link span{cursor: pointer; margin: 0 10px; color: var(--fontColor);}
.hct_link span:hover{color: #cc0000;}

.header_cont .header_cont_bottom{width: 100%; display: flex; flex-direction: row; align-items: center; justify-content: space-between; margin-top: 20px;}
.header_cont .header_cont_bottom h4{font-size: 2em; color: var(--fontColor);}
.header_cont .header_cont_bottom h4 > img{width: 30px; margin-right: 10px;}

.header_cont_bottom .hcb_icons{display: flex; flex-direction: row; align-items: center; }

.header_cont_bottom .hcb_icons span{margin-left: 10px;}
.header_cont_bottom .hcb_icons span.hcb_icons_txt{border:1px solid #fff; border-radius: 3px; font-size: .7em;  font-size: .9em; line-height:1.1em; box-sizing: border-box; padding:2px; }

.header_cont_bottom span{line-height: 1em;}
.header_cont_bottom span > i{font-size: 1.5em; color: var(--fontColor); cursor: pointer;}

.header_cont_nav ul{ display: flex; flex-direction: row; margin-bottom: 0px;}
.header_cont_nav ul li{margin-right: 30px; }
.header_cont_nav ul li:last-child{margin-right: 0px;}
.header_cont_nav ul li.active a{border-bottom:2px solid #cc0000; padding:0 0 15px;}
.header_cont_nav ul li a{font-size: 1.5em; color: var(--fontColor);}
.header_cont_nav ul li a:hover{color:#cc0000; border-bottom:2px solid #cc0000; padding:0 0 15px;}



#hct_cont{position: absolute; left:150px; top: 0px;}
#hct_cont .themed {
    display: block; 
    border:none; position: absolute; left:10px; top: 0px; 
}
#hct_cont .themed img{width: 20px; height: 20px;}
#hct_cont input[type="checkbox"]{
    display:block; margin-top: 0px;
  width: 20px; height: 20px; opacity: 0; z-index:10000; position: absolute; left:10px; cursor: pointer; }
#hct_cont label{display: none;}


/*menu slide*/
.menuSlide {
    height: 0;
    width: 100%;
    position: fixed;
    z-index: 1000;
    top: 0;
    left: 0;
    background: var(--background);
    overflow-x: hidden;
    transition: 0.5s;
  }
  
  .menuSlide a {
    text-decoration: none;
    display: block;
    transition: 0.3s;
  }
  
  .menuSlide a:hover {
    color: #cc0000;
  }
  
  .menuSlide .closebtn {
    position: absolute;
    top: 20px;
    right:20px;
    font-size: 36px;
    padding:0px;
    color:var(--fontColor);
  }

  .menuSlide_cont{display: flex; width: 100%; flex-direction: column; padding: 50px;}
  .menuSlide_cont h4{margin-bottom: 20px; color:var(--fontColor);}

  .mesuSlide_cont_lits{display: flex; flex-direction: row; width: 100%; justify-content: space-between;}
  .mesuSlide_cont_lits.pc_only{display: flex ;}

  .mesuSlide_cont_lits > li{width: 15%; margin-right: 2%; margin-bottom: 10px; }
  .mesuSlide_cont_lits > li:last-child{margin-right: 0px;}
  .mesuSlide_cont_lits > li > h5{font-size: 1.3em; padding-bottom: 10px; border-bottom:2px solid #cc0000; color: var(--fontColor);}
  
  .mesuSlide_cont_lits > li > ul{display: flex; flex-direction: column; width: 100%;}
  .mesuSlide_cont_lits > li > ul li a{font-size: 1em; padding:10px 0px; color: var(--fontColor);}


/*main*/
/*main_cont*/
.main_cont{width: 100%; position: relative; background: var(--background); padding-top: 200px; max-width: 1400px; margin:0 auto;   }
.main_cont_slide{max-width: 1400px;   padding: 20px 50px; margin:0 auto; position: relative;}

.mcs_swiper {
  width: 100%;
  height: 100%; overflow-x: hidden;
}

.mcs_swiper .swiper-slide.mcs_down {
  padding:20px 20px;
  background: var(--background);
  display: flex; flex-direction: row; 
  justify-content: space-between;
  align-items: center;
  border-radius: 10px;
  background:var(--swiperBackgorund_down);
}
.mcs_swiper .swiper-slide.mcs_up {
  padding:20px 20px;
  background: var(--background);
  display: flex; flex-direction: row;
  justify-content: space-between;
  align-items: center;
  border-radius: 10px;
  background:var(--swiperBackgorund_up);
}

.mcs_swiper .swiper-slide .ss_l{display: flex; flex-direction: column; align-items: flex-start;}
.mcs_swiper .swiper-slide .ss_l > input[type="text"]{border:none; color:#fff; padding:0px; height: 100%;  margin:5px 0;}


.mcs_swiper .swiper-slide .ss_l .ss_l_percent{display: flex; flex-direction: row; align-items: center; width: 100%;}
.mcs_swiper .swiper-slide .ss_l .ss_l_percent i{margin-right: 10px; line-height:1em;}
.mcs_swiper .swiper-slide .ss_l .ss_l_percent input[type="text"]{border:none; color: #fff; max-width:70px; padding:0px; height: 100%;}


.mcs_swiper .swiper-slide .swiper-button-next, .mcs_swiper .swiper-slide .swiper-button-prev{top:calc(50% - 20px); }


/*main_cont_section*/
.main_cont_section{width: 100%; max-width: 1400px; margin:0 auto; color: var(--fontColor); margin-top: 50px; display: flex; flex-direction: row; justify-content: space-between;}
.main_cont_section2{width: 100%; max-width: 1400px; margin:0 auto; color: var(--fontColor); margin-top: 50px; display: flex; flex-direction: column; justify-content: space-between; padding:0 15px;}

.mcs_l{width: 49%; margin-right: 2%;}
.mcs_c{width: 100%; display: flex; flex-direction: column;}
.mcs_l > input[type="button"], .mcs_r > input[type="button"]{width: 100%; background: orange; color:#fff; margin-top: 30px; height: 48px;}

.tab_tab {  overflow: hidden;  border-bottom: 1px solid #ddd;  display: flex; width: 100%; justify-content: space-between;}
.tab_tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  width: 33.3%;
  font-size: 1.15em;
  color:#ababab;
}
.tab_tab button.active {  border-bottom:2px solid #cc0000;  color:#cc0000;}
.tabcontent {  display: none;  padding: 0;  border-top: none;}

.mcs_tit{font-size: 1.5em;}

.mcs_tabcont ul {display: flex; width: 100%; flex-direction: column; margin-bottom: 0px;}
.mcs_tabcont ul li{border-bottom:1px solid #eee; padding:10px 5px; display: flex; flex-direction: row; width: 100%; justify-content: space-between; cursor: pointer;}
.mcs_tabcont ul li > input[type="date"]{background: none; color:var(--fontColor); text-align: right;  font-size: .9em; }
.mcs_tabcont ul li > span{width: calc(100% - 50px); overflow: hidden;  text-overflow: ellipsis;  display: -webkit-box;  -webkit-line-clamp: 1;  -webkit-box-orient: vertical; }

.mcs_r{width: 49%;}

.mcs_tit_sub{display: flex; justify-content: space-between; width: 100%; margin-top: 15px; font-size: 1.2em; align-items: flex-end; }
.mcs_tit_sub h5{font-size: .96em;}
.mcs_tit_sub span {font-size: .9em; border:1px solid orange; padding: 0px 5px; border-radius: 4px; cursor: pointer; box-sizing: border-box; height: 30px; line-height: 30px;}
.mcs_tit_sub span i{margin-right: 10px;}

/*증권통 관심종목 순위 table*/
.mcs_table{width: 100%; color: var(--fontColor); border-top:1px solid #ddd; margin-top: 10px;}

.mcs_table tbody tr, .mcs_table tbody tr td{height: 20px; padding:0px; border-bottom:1px solid #ddd;}
.mcs_table tbody tr td > input[type="text"]{text-align: left;}
.mcs_table tbody tr td div.mcs_table_rate > input[type="text"]{
  text-align: right; padding: 0 0;
}

.mcs_table tbody tr td:first-child{text-align: center;}

.mcs_table tbody tr td > input[type="text"],
.mcs_table tbody tr td > input[type="num"]{border:none; background: none; color: var(--fontColor); padding:0px;}

.mcs_table tbody tr td > input[type="num"]{ max-width: 30px; text-align: center; }

.mcs_table tbody tr td div.mcs_table_rate{display: flex; flex-direction: column; align-items: flex-end;}
.mcs_table tbody tr td div.mcs_table_rate > div{display: flex; flex-direction: row; align-items: center; }


.mcs_table tbody tr td div.mcs_table_rate > div.font-red input[type="text"], .mcs_table tbody tr td div.mcs_table_rate > input[type="text"].font-red{color:#cc0000; }
.mcs_table tbody tr td div.mcs_table_rate > div.font-blue input[type="text"], .mcs_table tbody tr td div.mcs_table_rate > input[type="text"].font-blue{color:#2196F3; }


.mcs_table tbody tr td div.mcs_table_rate > div input[type="text"]{max-width: 60px; }

.mcs_table tbody tr td div.mcs_table_rate > input[type="text"], .mcs_table tbody tr td div.mcs_table_rate div > input[type="text"]{border:none; background: none; text-align: right; padding:0px; padding-right: 5px; height: 29px;}


.mcs_table tbody tr td div.mcs_table_rate div span{display: flex; flex-direction: row; align-items: center; margin-left: 10px; }


.mcs_table tbody tr td div.mcs_table_rate.input_percent{display: flex; flex-direction: row; align-items: center;}



/*실시간 종목 순위 table*/
.mcs_tabcont2{width: 100%; display: flex; flex-direction: row;}
.mcs_table2{width: 49%; margin-right: 2%; color: var(--fontColor); margin-top: 30px;  }
.mcs_table2 thead tr th.mt2_tit{font-size: 1.2em; }
.mcs_table2 thead tr th{padding-bottom: 5px; padding-left: 15px;}

.mcs_table2 tbody tr, .mcs_table2 tbody{border-top:1px solid #ddd; border-bottom:1px solid #ddd;}
.mcs_table2 tbody tr, .mcs_table2 tbody tr td{height: 20px; padding:0px; border-bottom:1px solid #ddd;}
.mcs_table2 tbody tr, .mcs_table2 tbody tr td.pc_only{height: 20px; padding:0px; border-bottom:none;}
.mcs_table2 tbody tr td > input[type="text"]{text-align: left;}
.mcs_table2 tbody tr td div.mcs_table_rate > input[type="text"]{
  text-align: right; padding: 0 0;
}

.mcs_table2 tbody tr td:first-child{text-align: center;}

.mcs_table2 tbody tr td > input[type="text"],
.mcs_table2 tbody tr td > input[type="num"]{border:none; background: none; color: var(--fontColor); padding:0px; text-align: center;  }
.mcs_table2 tbody tr td > input[type="text"].tl,
.mcs_table2 tbody tr td > input[type="num"].tl{
  text-align: left;
}

.mcs_table2 tbody tr td > input[type="num"]{ max-width: 30px; text-align: center; }

.mcs_table2 tbody tr td div.mcs_table_rate{display: flex; flex-direction: column; align-items: flex-end;}
.mcs_table2 tbody tr td div.mcs_table_rate > div{display: flex; flex-direction: row; align-items: center; }


.mcs_table2 tbody tr td div.mcs_table_rate > div.font-red input[type="text"], .mcs_table2 tbody tr td div.mcs_table_rate > input[type="text"].font-red{color:#cc0000; }
.mcs_table2 tbody tr td div.mcs_table_rate > div.font-blue input[type="text"], .mcs_table2 tbody tr td div.mcs_table_rate > input[type="text"].font-blue{color:#2196F3; }


.mcs_table2 tbody tr td div.mcs_table_rate > div input[type="text"]{max-width: 60px; }

.mcs_table2 tbody tr td div.mcs_table_rate > input[type="text"], .mcs_table2 tbody tr td div.mcs_table_rate div > input[type="text"]{border:none; background: none; text-align: right; padding:0px; padding-right: 5px; height: 29px;}

.mcs_table2 tbody tr td div.mcs_table_rate.input_percent{display: flex; flex-direction: row; align-items: center; justify-content: flex-start;}

.mcs_table2 tbody tr td div.mcs_table_rate.input_percent > input[type="text"]{
  text-align: left; padding: 5px; width: 100%; max-width: 100%;
}
.mcs_table2 tfoot tr td input[type="button"]{width: 100%;  background: orange;  color: rgb(255, 255, 255);  margin-top: 30px;  height: 48px;}

/*스케치 종목 예측*/
.mcs_tit_sub > h5 > input[type="date"]{color:var(--fontColor); background: none; position: relative; width: 125px;}

.mcs_tit_sub > h5 > input[type="date"]::-webkit-inner-spin-button,
.mcs_tit_sub > h5 > input[type="date"]::-webkit-calendar-picker-indicator {
  display: block; 
}

.mcs_table thead{width: 100%;}
.mcs_table thead tr{width: 100%; }
.mcs_table thead tr th{text-align: center; }

.mcs_table3{width: 100%; margin-right: 2%; color: var(--fontColor); margin-top: 10px; border-top: 1px solid #ddd; padding-top: 10px;}
.mcs_table3 > .pc_only{display: table-header-group;}

.mcs_table3 thead tr th.mt2_tit{font-size: 1.2em; }
.mcs_table3 thead tr th{padding-bottom: 5px; padding-top: 10px; text-align: center;}

.mcs_table3 tbody tr, .mcs_table3 tbody{border-top:1px solid #ddd; border-bottom:1px solid #ddd;}
.mcs_table3 tbody tr, .mcs_table3 tbody tr td{height: 20px; padding:0px; border-bottom:1px solid #ddd;}
.mcs_table3 tbody tr, .mcs_table3 tbody tr td.pc_only{height: 20px; padding:0px; border-bottom:none;}
.mcs_table3 tbody tr td > input[type="text"]{text-align: left;}
.mcs_table3 tbody tr td div.mcs_table_rate > input[type="text"]{
  text-align: right; padding: 0 0;
}

.mcs_table3 tbody tr td:nth-child(2) > input[type="text"]{text-align: left;}
.mcs_table3 tbody tr td > input[type="text"].font-red,
.mcs_table3 tbody tr td > input[type="num"].font-red{  color:#cc0000;}

.mcs_table3 tbody tr td > input[type="text"].font-blue,
.mcs_table3 tbody tr td > input[type="num"].font-blue{  color:#2196F3;}

.mcs_table3 tbody tr td > input[type="text"]{
  border:none; background: none; color: var(--fontColor); padding:0px; 
  text-align: center;
}
.mcs_table3 tbody tr td > input[type="num"]{border:none; background: none; color: var(--fontColor); padding:0px; text-align: left;  }

.mcs_table3 tbody tr td:first-child > input[type="num"]{ max-width: 30px; text-align: center; }
.mcs_table3 tbody tr td > input[type="num"]{max-width: 100%; text-align: center;}

.mcs_table3 tbody tr td div.mcs_table_rate{display: flex; flex-direction: column; align-items: flex-end;}
.mcs_table3 tbody tr td div.mcs_table_rate > div{display: flex; flex-direction: row; align-items: center; }


.mcs_table3 tbody tr td div.mcs_table_rate > div.font-red input[type="text"], .mcs_table3 tbody tr td div.mcs_table_rate > input[type="text"].font-red{color:#cc0000; }
.mcs_table3 tbody tr td div.mcs_table_rate > div.font-blue input[type="text"], .mcs_table3 tbody tr td div.mcs_table_rate > input[type="text"].font-blue{color:#2196F3; }


.mcs_table3 tbody tr td div.mcs_table_rate > div input[type="text"]{max-width: 60px; }

.mcs_table3 tbody tr td div.mcs_table_rate > input[type="text"], .mcs_table3 tbody tr td div.mcs_table_rate div > input[type="text"]{border:none; background: none; text-align: right; padding:0px; padding-right: 5px; height: 29px;}

.mcs_table3 tbody tr td div.mcs_table_rate.input_percent{display: flex; flex-direction: row; align-items: center; justify-content: center;}

.mcs_table3 tbody tr td div.mcs_table_rate.input_percent > input[type="text"]{
  text-align: left; padding: 5px; width: 100%; max-width: 100%;
}
.mcs_table3 tfoot tr td input[type="button"]{width: 100%;  background: orange;  color: rgb(255, 255, 255);  margin-top: 30px;  height: 48px;}

.main_cont_section2 .mcs_c .mcs_tit_sub{border-bottom: 1px solid #ddd; padding-bottom: 10px;}




/*main_cont_ad*/
.main_cont_ad{width: 100%; display: flex; flex-direction: column; margin-top: 50px; }

.main_cont_ad h4.mcs_tit{font-size: 2.2em; margin-bottom: 30px; color: var(--fontColor);}
.main_cont_ad h4.mcs_tit b{border-bottom: 2px solid #cc0000; font-size: 1em; padding-bottom: 5px;}

.main_cont_ad > div{display: flex; flex-direction: row; margin-bottom: 50px;}
.main_cont_ad .mcs_l{width: 49%; margin-right: 2%; }
.main_cont_ad .mcs_l img{width: 100%; object-fit: cover;}

.main_cont_ad .mcs_r{display: flex; flex-direction: column; width: 49%; justify-content: space-between;}
.main_cont_ad .mcs_r .mca_info_txt{display: flex; flex-direction: column; width: 100%;}
.main_cont_ad .mcs_r .mca_info_txt li{border-radius: 4px; color: #000; width: 100%; padding:20px; margin-bottom: 20px;}
.main_cont_ad .mcs_r .mca_info_txt li b{display: block;}

.main_cont_ad .mcs_r .mca_info_txt li.mit01{background: pink;}
.main_cont_ad .mcs_r .mca_info_txt li.mit02{background: skyblue;}
.main_cont_ad .mcs_r .mca_info_txt li.mit03{background: plum;}

.mca_btnlink{display: flex; flex-direction: row; width: 100%;}
.mca_btnlink span{width: 49%; height: 70px; margin-right: 2%; display: block;}
.mca_btnlink span img{width: 100%; object-fit: cover;  border-radius: 10px; }
.mca_btnlink span:last-child{margin-right: 0px;}

/*modal*/
/*금일 매수 팝업*/
#today_buy_modal .modal-dialog{top: 30%; max-width: 500px;  background: var(--background); padding:0px;  }
#today_buy_modal .modal-content{background: var(--background); color:var(--fontColor);}

.today_buy_modal_cont{display: flex; flex-direction: column; align-items: center; width: 100%; text-align: center;}
.today_buy_modal_cont h4{line-height: 1.5em; font-size: 1.2em;}
.today_buy_modal_cont img{max-width: 100px; margin:20px auto;}
.tbm_app_downlink{color:tomato; cursor: pointer; font-size: 1.2em;}

#today_buy_modal .modal-header{border-bottom: none;}
#today_buy_modal .modal-footer{border-top: none;}
#today_buy_modal .modal-footer button{width: 100%; background: tomato; color:#fff; border:none; height: 40px;}


#category_search .modal-dialog{top: 30%; max-width: 500px; min-height: 500px;  }
#category_search .modal-content{background: var(--background); color:var(--fontColor); min-height: 500px;}

.category_search_cont{display: flex; flex-direction: column; align-items: center; width: 100%; text-align: center;}
.category_search_cont h4{line-height: 1.5em; font-size: 1.2em;}
.category_search_cont img{max-width: 100px; margin:20px auto;}
.tbm_app_downlink{color:tomato; cursor: pointer; font-size: 1.2em;}

#category_search .modal-dialog .modal-content .modal-header{border-bottom: none;}

/*modal p25*/
#order_now_modal .modal-dialog{top: 30%; max-width: 500px;  background: var(--background); padding:0px;  }
#order_now_modal .modal-content{background: var(--background); color:var(--fontColor);}

#order_now_modal .modal-header:before,#order_now_modal .modal-header:after{display: none;}

#order_now_modal .modal-header{border-bottom: none; display: flex; flex-direction: row; align-items: center; justify-content: space-between; width: 100%;}
#order_now_modal .modal-header .onm_mh_l{display: flex; flex-direction: row;}
#order_now_modal i{font-size: 1.2em;}
#order_now_modal .modal-header .onm_mh_l h4{margin-left: 10px; font-size: 1.2em;}

#order_now_modal .modal-body > h5{font-size: 1.2em;  margin:10px auto;}
#order_now_modal .modal-body > p{font-size: 1em; }

#order_now_modal .modal-footer{border-top: none;}
#order_now_modal .modal-footer button{width: 100%; background: tomato; color:#fff; border:none; height: 40px;}



/*modal p26*/
#order_now_modal2 .modal-dialog{top: 30%; max-width: 500px; background: var(--background);  }
#order_now_modal2 .modal-content{background: var(--background); color:var(--fontColor);}
#order_now_modal2 .modal-header:before,#order_now_modal2 .modal-header:after{display: none;}
#order_now_modal2 .modal-header{border-bottom: none; display: flex; flex-direction: row; align-items: center; justify-content: space-between; width: 100%; background: var(--background);}
#order_now_modal2 .modal-header .onm_mh_l{display: flex; flex-direction: row; align-items: center;}
#order_now_modal2 i{font-size: 1.2em; margin-right: 10px;}
#order_now_modal2 .modal-header .onm_mh_l h4{margin-left: 10px; font-size: 1.2em;}
#order_now_modal2 .modal-header .onm_mh_l .onm2_select_wrap{position: relative; width: 100%; min-width: 150px; height: 30px;}
#order_now_modal2 .modal-header .onm_mh_l .onm2_select_wrap i{position: absolute; right:0px; top: 5px;}
#order_now_modal2 .modal-header .onm_mh_l .onm2_select{color: var(--fontColor); border:none; border-bottom: 1px solid var(--fontColor); position: relative; width: 100%; height: 30px; padding:0 5px; }
#order_now_modal2 .modal-header .onm_mh_l .onm2_select option{background: var(--background);}

#order_now_modal2 .modal-content .onm2_mb_tit{display: flex; flex-direction: row; align-items: center; width: 100%; margin-bottom: 20px;}
#order_now_modal2 .modal-content .onm2_mb_tit > span{font-size: 2em;}
#order_now_modal2 .modal-content .onm2_mb_tit > input.font-red{border:none;  font-weight: bold !important; max-width: 100px; height: 100%; font-size: 1.2em !important;}
#order_now_modal2 .modal-content .onm2_mb_tit > div{font-size: 1em;}

#order_now_modal2 .modal-content .onm2_mb_account{display: flex; flex-direction: row; align-items: center; width: 100%; justify-content: space-between; margin-bottom: 20px;}
#order_now_modal2 .modal-content .onm2_mb_account > .mba_select_wrap{width: 100%; position: relative; max-width: 250px;}
#order_now_modal2 .modal-content .onm2_mb_account > .mba_select_wrap select{width: 100%; color: var(--fontColor); }
#order_now_modal2 .modal-content .onm2_mb_account > .mba_select_wrap > i{position: absolute; right:15px; top: 15px;}
#order_now_modal2 .modal-content .onm2_mb_account > div{font-weight: bold;}

#order_now_modal2 .modal-content .onm2_mb_num_cont{width: 100%;}
#order_now_modal2 .modal-content .onm2_mb_num_cont ul{width: 100%; display: flex; flex-direction: column;}
#order_now_modal2 .modal-content .onm2_mb_num_cont ul li{ display: flex; flex-direction: row; align-items: flex-end; width: 100%; justify-content: center; font-size: 1.5em; margin-bottom: 10px;}
#order_now_modal2 .modal-content .onm2_mb_num_cont ul li input{border:none; border-bottom:1px solid var(--fontColor); max-width: 250px; text-align: center; color:var(--fontColor); font-size: 1.2em !important; margin-right: 10px;}

.onm2_mc_btns > span{border:none !important;}

.keypad_cont{width: 100%; border:1px solid var(--fontColor); padding:50px; text-align: center;}

#order_now_modal2 .modal-footer{border-top: none;}

/*주식 매수 p27*/
#order_now_modal_buy .modal-dialog{top: 30%; max-width: 500px;  background: var(--background); padding:10px 0px 0;  }
#order_now_modal_buy .modal-content{background: var(--background); color:var(--fontColor);}

#order_now_modal_buy .modal-header:before,#order_now_modal_buy .modal-header:after{display: none;}

#order_now_modal_buy .modal-header{border-bottom: none; display: flex; flex-direction: row; align-items: center; justify-content: space-between; width: 100%;}
#order_now_modal_buy .modal-header h4{text-align: center; position: absolute; left:50%; transform: translateX(-50%); font-size: 1.3em; color:#cc0000; font-weight: bold;}
#order_now_modal_buy .modal-header i{position: absolute; right:20px; font-size: 1.2em;}

#order_now_modal_buy .modal-content .modal-body{width: 100%;}
#order_now_modal_buy .modal-content .modal-body table{width: 100%;}

#order_now_modal_buy .modal-content .modal-body table thead tr th{ border:1px solid var(--fontColor); padding:5px; text-align: center; }

#order_now_modal_buy .modal-content .modal-body table tbody tr td{ border:1px solid var(--fontColor); padding:5px; }
#order_now_modal_buy .modal-content .modal-body table tbody tr td.df{
  display: flex; flex-direction: row; align-items: center;
}
#order_now_modal_buy .modal-content .modal-body table tbody tr td input{border:none; color: var(--fontColor); width: 98%; height: 100%; padding:0px; text-align: right; padding-right: 5px;}

#order_now_modal_buy .modal-content .modal-body .onmb_txt{text-align: center; margin:20px auto;}

#order_now_modal_buy .modal-content .modal-body .onmb_inputs{display: flex; width: 100%; flex-direction: row; justify-content: space-between;}
#order_now_modal_buy .modal-content .modal-body .onmb_inputs input{background: #cc0000; color: var(--fontColor); border:none; border-radius: 4px; width: 85%; margin-right: 2%; }
#order_now_modal_buy .modal-content .modal-body .onmb_inputs input::placeholder{color:var(--fontColor);}
#order_now_modal_buy .modal-content .modal-body .onmb_inputs span.onmb_btn{background: var(--fontColor); width: 13%; text-align: center; line-height: 50px; cursor: pointer; border-radius: 4px; }
#order_now_modal_buy .modal-content .modal-body .onmb_inputs span i{color:#cc0000; font-size: 1.3em;}

#order_now_modal_buy .modal-footer{border-top: none;}

/*주식매도 p28*/
#order_now_modal_sell .modal-dialog{top: 30%; max-width: 500px; background: var(--background); padding:10px 0px 0;  }
#order_now_modal_sell .modal-content{background: var(--background); color:var(--fontColor);}

#order_now_modal_sell .modal-header:before,#order_now_modal_sell .modal-header:after{display: none;}

#order_now_modal_sell .modal-header{border-bottom: none; display: flex; flex-direction: row; align-items: center; justify-content: space-between; width: 100%;}
#order_now_modal_sell .modal-header h4{text-align: center; position: absolute; left:50%; transform: translateX(-50%); font-size: 1.3em; color:#2477c8 ; font-weight: bold;}
#order_now_modal_sell .modal-header i{position: absolute; right:20px; font-size: 1.2em;}

#order_now_modal_sell .modal-content .modal-body{width: 100%;}
#order_now_modal_sell .modal-content .modal-body table{width: 100%;}

#order_now_modal_sell .modal-content .modal-body table thead tr th{ border:1px solid var(--fontColor); padding:5px; text-align: center; }

#order_now_modal_sell .modal-content .modal-body table tbody tr td{ border:1px solid var(--fontColor); padding:5px; }
#order_now_modal_sell .modal-content .modal-body table tbody tr td.df{
  display: flex; flex-direction: row; align-items: center;
}
#order_now_modal_sell .modal-content .modal-body table tbody tr td input{border:none; color: var(--fontColor); width: 98%; height: 100%; padding:0px; text-align: right; padding-right: 5px;}

#order_now_modal_sell .modal-content .modal-body .onmb_txt{text-align: center; margin:20px auto;}

#order_now_modal_sell .modal-content .modal-body .onmb_inputs{display: flex; width: 100%; flex-direction: row; justify-content: space-between;}
#order_now_modal_sell .modal-content .modal-body .onmb_inputs input{background: #2477c8 ; color: var(--fontColor); border:none; border-radius: 4px; width: 85%; margin-right: 2%; }
#order_now_modal_sell .modal-content .modal-body .onmb_inputs input::placeholder{color:var(--fontColor);}
#order_now_modal_sell .modal-content .modal-body .onmb_inputs span.onmb_btn{background: var(--fontColor); width: 13%; text-align: center; line-height: 50px; cursor: pointer; border-radius: 4px; }
#order_now_modal_sell .modal-content .modal-body .onmb_inputs span i{color:#2477c8 ; font-size: 1.3em;}

#order_now_modal_sell .modal-footer{border-top: none;}




/*modal p29*/
#stock_select_modal .modal-dialog{top: 30%; max-width: 500px;  background: var(--background); }
#stock_select_modal .modal-content{background: var(--background); color:var(--fontColor);}

#stock_select_modal .modal-header:before,#stock_select_modal .modal-header:after{display: none;}

#stock_select_modal .modal-header{border-bottom: none; display: flex; flex-direction: row; align-items: center; justify-content: space-between; width: 100%;}
#stock_select_modal .modal-header .onm_mh_l{display: flex; flex-direction: row;}
#stock_select_modal i{font-size: 1.2em;}
#stock_select_modal .modal-header .onm_mh_l h4{margin-left: 10px; font-size: 1.2em;}

#stock_select_modal .modal-content .modal-body ul{display: flex; width: 100%; flex-direction: column;}
#stock_select_modal .modal-content .modal-body ul li{width: 100%; margin-bottom: 10px; display: flex; flex-direction: row; align-items: center;  }

#stock_select_modal .modal-content .modal-body ul li input[type="radio"] + label{width: 100%; background: #aaa; color: var(--fontColor);  border-radius: 4px; padding:0px; height: 38px; text-align: center; line-height: 40px; font-size: 1.2em; }

#stock_select_modal .modal-content .modal-body ul li input[type="radio"] + label:before{display: none;}

#stock_select_modal .modal-content .modal-body ul li input[type="radio"]:checked + label{width: 100%; background: rgb(245, 141, 22);}

#stock_select_modal .modal-footer{border-top: none;}
#stock_select_modal .modal-footer .ssm_btn{width: 100%;  background: rgb(245, 141, 22); color:#fff; border:none; border-radius: 4px; height: 40px; font-size: 1.2em; font-weight: bold;}



/*뉴스 팝업 p41*/
#news_modal .modal-dialog{top: 30%; max-width: 500px; min-height: 500px;  }
#news_modal .modal-content{background: var(--background); color:var(--fontColor); min-height: 500px;}

#news_modal .modal-header{ background: var(--background);  width: 100%; text-align: center; border:none;}
#news_modal .modal-header h4{font-weight: bold; font-size: 1.2em;}
#news_modal .modal-header i{position: absolute; right:15px; top: 15px; font-size: 1.2em;}

#news_modal .modal-body h5{ width: 100%; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;}

#news_modal .modal-body .nm_info{margin-top: 10px; font-size: .9em;}
#news_modal .modal-body .nm_info span{font-size: .9em;}
#news_modal .modal-body .nm_info input{background: none; color: var(--fontColor);}
#news_modal .modal-body .nm_info input[type="datetime-local"]::-webkit-calendar-picker-indicator{display: none;}

#news_modal .modal-footer > img{border-radius: 6px; object-fit: cover; width: 100%; height: 300px;}





.dropdown {
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
}
.dropdown .form {
  width: 100%; position: relative;   margin:20px auto 0;
  height: 48px; display: flex; align-items: center;
}
.dropdown .form input {
  width: 100%;
  text-align: center;
  font-size: 1em;
  padding: 20px 5px;
  background-color: none;
  border:1px solid var(--fontColor);
  border-radius: 4px;
  color: var(--fontColor);
  cursor: pointer;
}
.dropdown .form .button {
  position: absolute; right:15px; top: 10px;
  border: none;
  background: none;
  color: var(--fontColor);
  cursor: pointer;
  margin: 0px;
  width: 15px;
  padding: 0px;
}
.dropdown .form .button .fa-chevron-down {
  transform: rotate(0deg);
  transition: all 0.6s;
}
.dropdown .form .button .fa-chevron-down.active {
  transform: rotate(180deg);
}
.dropdown .form input:focus,
.dropdown .form button:focus {
  outline: none;
}
.dropdown .dropdownList {
  display: none;
  margin-bottom: 0;
}
.dropdown .dropdownList li {
  padding:  15px 0; border-bottom:1px solid var(--fontColor); text-align: center;
}
.dropdown .dropdownList li a{color: var(--fontColor);}


.onm_mc_btns{display: flex; flex-direction: row; width: 100%; margin-top: 20px;}
.onm_mc_btns span{width: 49%; margin-right: 2%; text-align: center; border:1px solid var(--fontColor); color: var(--fontColor); border-radius: 4px; height: 50px; line-height: 50px; cursor: pointer;}
.onm_mc_btns span:last-child{margin-right: 0px;}

.onm_mc_btns span i{margin-right: 5px; color: var(--fontColor);}











/*modal*/

.cs_mh{ display: flex; flex-direction: row; width: 100%; justify-content: space-between; align-items: center;}
.cs_mh i{font-size: 1.5em;}
.cs_mh .cs_mh_l{display: flex; flex-direction: row; align-items: center; }

.cs_mh .cs_mh_l .cs_mh_l_selectbox {position: relative; height: 48px;}
.cs_mh .cs_mh_l .cs_mh_l_selectbox i{position:absolute; right:15px; top:50%; transform: translateY(-50%);}
.cs_mh .cs_mh_l .cs_mh_l_selectbox > select{
  color:var(--fontColor); width: 100%;  position: relative; height: 48px; min-width: 200px;
  background-size: 25px;
  padding: 5px 0px 5px 10px; }
.cs_mh .cs_mh_l .cs_mh_l_selectbox > select option {
  background: var(--background);
  color: var(--fontColor);
}

.cs_mb{width: 100%; position: relative; height: 48px;}
.cs_mb > input{width: 100%; position: absolute; padding-left: 40px !important; color:var(--fontColor) !important;}
.cs_mb > i{position: absolute; left:15px; top: 50%; transform: translateY(-50%);}

.cs_ul{width: 100%; margin-top: 20px; margin-bottom: 0px;}
.cs_ul > li{padding: 10px 0; border-bottom:1px solid var(--fontColor);}
.cs_ul > li > input[type="checkbox"] + label:before{
  float:right; margin-top: 5px;
}
.cs_ul > li > input[type="checkbox"] + label{color:var(--fontColor);  width: 100%; margin-bottom: 0px;}

/*main_banner_cont*/
.main_banner_cont{width: 100%; height: 160px;}
.main_banner_cont img{width: 100%; height: 100%; object-fit: cover;}


/*footer_cont*/
.footer_cont{width: 100%;  margin:30px auto 0; display: flex; flex-direction: column; justify-content: flex-start; border-top:1px solid #ddd; padding:20px 0;}

.fc_top{width:100%; display: flex; flex-direction: row; align-items: center; max-width: 1400px; margin:0 auto; justify-content: flex-start;}
.fc_bottom{width: 100%; max-width: 1400px; margin:0 auto; margin-top: 20px; }

.fc_top div > input[type="button"]{background: none; border:1px solid #ddd; color:var(--fontColor); margin-right: 10px;}

.fc_top .copyright{
	text-align:left;
	font-size:13px;
	font-weight:300;
	color:#bebebe;
	line-height:23px;
	letter-spacing:1px;
  height: 35px;
	position:relative;
}
.fc_top .copyright a{font-weight:500;color:#bebebe;}


.fc_top .copyright .ft_group{margin:0 0;font-size:11px;line-height:16px;}
.fc_top .copyright .ft_group .tgl_btn{width:445px; height:35px; line-height: 35px; padding:0 0px 0 20px ; background:none;border:1px solid #ccc;font-size:14px;font-weight:600;color:var(--fontColor);display:block;}
.fc_top .copyright .ft_group .tgl_btn span.tgl_btn_arrow{height:35px;line-height:35px;font-size:14px; position:absolute; right:20px;}

.fc_top .copyright .ft_group .g_menu_wrap{width:445px;background:#fff;border:1px solid #ccc;z-index:100;}
.fc_top .copyright .ft_group .g_menu_wrap .g_link_wrap{width:110px;float:left;padding:10px 5px;color:#000 !important;font-size:12px;line-height:18px;text-align:left;}
.fc_top .copyright .ft_group .g_menu_wrap .g_link_wrap dt{margin-bottom:5px;padding-bottom:5px;border-bottom:2px solid #aaa; font-size:13px;font-weight:bold;}
.fc_top .copyright .ft_group .g_menu_wrap .g_link_wrap dd{width:105px;margin:0;padding:0;}
.fc_top .copyright .ft_group .g_menu_wrap .g_link_wrap dd a{color:#000;}

.fc_top .copyright .ft_group .g_menu_wrap .g_link_wrap dd a:hover{color:#cc0000;}
.fc_top .copyright .ft_group .g_menu_wrap .g_link_line{width:1px;height:105px;float:left;margin:10px 0;background:#000;}



.fc_bottom .fc_bottom_info{display: flex; flex-direction: row; width: 100%; justify-content: flex-start;}
.fc_bottom .fc_bottom_info span{margin-right: 5%; color: var(--fontColor);}
.fc_bottom .fc_bottom_info span:last-child{margin-right: 0px;}
.fc_bottom .fc_bottom_info span b{margin-right: 10px;}
.fc_bottom .fc_bottom_info span em{color: var(--fontColor); text-decoration: underline;}

.fc_bottom_txt{margin:20px 0; color:var(--fontColor);}

/*etc*/
.m_only{display: none;}
.pc_only{display: flex; }

.font-red{color:#cc0000 !important;}
.font-blue{color:#2196F3 !important;}

.cursor{cursor: pointer;}

input[type="date"]::-webkit-inner-spin-button,
input[type="date"]::-webkit-calendar-picker-indicator {
    display: none;
    -webkit-appearance: none;
}

.txt-line{text-decoration: underline;}

.mcs_table2 tbody tr td.pc_only{display: table-cell; border-bottom:1px solid #ddd;}


/*media*/
@media screen and (max-width:1920px){
  .app_download_banner > div{max-width: 1200px; margin:0 auto;}
  .app_download_banner .adb_close{right:2%;}
}


@media screen and (max-width: 480px){
  .m_only{display: block;}
  .pc_only{display: none;}


  .main_cont{padding-top: 130px;}

  .app_download_banner{padding:10px ; }
  .adb_close{display: none;}
  .header_cont_nav{display: none;}

  .header_cont{padding:10px;}
  .header_cont .header_cont_top{display: none;}
  .header_cont .header_cont_bottom{margin-top: 0px;}

  .header_cont .header_cont_bottom h4{font-size: 1.3em;}
  .header_cont .header_cont_bottom h4 > img{width: 20px;}

  .menuSlide .closebtn{font-size: 25px; top: 15px; right:15px;}
  .menuSlide_cont{padding:15px;}

  .app_download_banner span{margin-right: 10px;}

  .menuSlide_cont h4.m_only{display: flex; flex-direction:row; align-items: center; border-bottom: 1px solid #eee; padding-bottom: 20px;}
  .menuSlide_cont h4.m_only i{font-size: 1.5em; margin-right: 10px;}

  .mesuSlide_cont_lits{flex-direction: column;}
  .mesuSlide_cont_lits.pc_only{display: none;}
  .mesuSlide_cont_lits > li{width: 100%; margin-right: 0px;}

  .mesuSlide_cont_lits > li > h5{border-bottom:none;}


  .accordion {
    background:var(--background);
    color: var(--fontColor);
    cursor: pointer;
    padding: 0;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 15px;
    transition: 0.4s;
  }

  .accordion:after {
    content: '▼';
    color: var(--fontColor);
    font-weight: bold;
    float: right;
    margin-left: 5px;
  }
  
  .tab button.active:after {
    content: "▲";
  }
  
  .panel2 {
    padding: 0;
    background: none;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
  }

  .main_cont_slide{padding:20px 15px;}

  .mcs_swiper .swiper-slide.mcs_down,.mcs_swiper .swiper-slide.mcs_up{padding:5px;}
  .mcs_swiper .swiper-slide .ss_l > input[type="text"]{max-width: 70px;}

  .mcs_swiper .swiper-slide .ss_l .ss_l_percent i{margin-right: 5px;}
  .mcs_swiper .swiper-slide .ss_l .ss_l_percent span b{font-size: 0.8em !important;}
  .mcs_swiper .swiper-slide .ss_l .ss_l_percent input[type="text"]{font-size: .8em !important; max-width: 50px;}



/*mobile dark mode*/
.m_mode_toggle{position: relative; display: flex; justify-content: space-between; width: 100%; border-top:1px solid #eee; padding-top: 20px; color: var(--fontColor);}


#hct_cont2{position: absolute; top:22px; right:0px; 
  display: inline-block;
  width: 40px;
  height: 20px;}
#hct_cont2 .themed {
    display: block; 
    border:none; position: absolute; left:10px; top: 0px; 
}
#hct_cont2 .themed img{width: 20px; height: 20px;}
#hct_cont2 input[type="checkbox"]{
  display:block; margin-top: 0px;   width: 20px;
  height: 0;  height: 20px; opacity: 0; z-index:10000; position: absolute; left:10px; cursor: pointer; }
#hct_cont2 label{display: none;}

  
  .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
  }
  
  .slider:before {
    position: absolute;
    content: "";
    height: 12px;
    width: 12px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
  }
  
#hct_cont2 input[type="checkbox"]:checked + .slider {
    background-color: #2196F3;
  }
  
#hct_cont2 input[type="checkbox"]:focus + .slider {
    box-shadow: 0 0 1px #2196F3;
  }
  
#hct_cont2 input[type="checkbox"]:checked + .slider:before {
    -webkit-transform: translateX(20px);
    -ms-transform: translateX(20px);
    transform: translateX(20px);
  }
  
  /* Rounded sliders */
  .slider.round {
    border-radius: 34px;
  }
  
  .slider.round:before {
    border-radius: 50%;
  }

/*뉴스 & 증권통 관심종목 순위*/
  .main_cont_section{flex-direction: column; padding:0 10px;}
  .mcs_l, .mcs_r{width: 100%; margin-right: 0px; margin-bottom: 50px;}
  .mcs_l > input[type="button"], .mcs_r > input[type="button"]{margin-top: 20px;}

/*실시간 종목 순위*/
  .mcs_tabcont2{overflow:hidden;}
  .tab_tab{
    width: 100%;
    padding: 0;
    overflow: scroll;
    color: #112031;
    overflow-x: auto;
    white-space: nowrap;}
    .tab_tab::-webkit-scrollbar{display: none;}
  
  .tab_tab button{padding:10px 0px; font-size: 1em; margin:0 10px; width: 100%; box-sizing: border-box; }

  .mcs_table2 tbody tr td.pc_only{display: none;}

  .mcs_table2 tbody tr td:nth-child(1){width: 15%;}
  .mcs_table2 tbody tr td:nth-child(2){width:20%}
  .mcs_table2 tbody tr td div.mcs_table_rate.input_percent{justify-content: flex-end;}

  .mcs_table2 tbody tr td:nth-child(2) > input{min-width: 80px;  overflow: hidden; white-space: nowrap; text-overflow: ellipsis; word-break: break-all; }
  .mcs_table3 tbody tr td:nth-child(2) > input{min-width: 80px;  overflow: hidden; white-space: nowrap; text-overflow: ellipsis; word-break: break-all; }
  .mcs_table2 tbody tr td:nth-child(5) .mcs_table_rate {min-width: 70px;}
  .mcs_table3 tbody tr td:nth-child(4) .mcs_table_rate {min-width: 70px;}

  .mcs_table2 thead tr th.mt2_tit{
    max-width: 80px;  overflow: hidden; white-space: nowrap; text-overflow: ellipsis; word-break: break-all;
  }

  /*스케치 종목예측*/
  .main_cont_section2 > .main_cont_section{flex-direction: row;}
  .main_cont_section2 > .main_cont_section > .mcs_l{width: 49%; margin-right: 2%;}
  .main_cont_section2 > .main_cont_section > .mcs_r{width: 49%;}

  .mcs_tit_sub.mts_center{justify-content: center }
  .mcs_table3 > .pc_only{display: none;}

  .mcs_pd0px{padding:0px;}


  /*main_banner*/
  .main_banner_cont{width: 100%; height: 80px; padding:0 15px;}
  .main_banner_cont img{height: 100%; width: 100%;}

  /*footer*/
  .fc_top{flex-direction: column; align-items: flex-start}
  .fc_top > div{margin-bottom: 10px;}
  .fc_top > div > input{margin-right: 5px; }
  .fc_top > div > input:last-child{margin-right: 0px;}

  .footer_cont{padding: 15px;}
  .fc_top .copyright{width: 100%;}
  .fc_top .copyright .ft_group .tgl_btn{width:100%; padding:0 0 0 5px;}
  .fc_top .copyright .ft_group .tgl_btn span.tgl_btn_arrow{height:35px;line-height:35px;font-size:14px; position:absolute; right:5px;}
  .fc_top .copyright .ft_group .g_menu_wrap{width: 100%;}
  .fc_top .copyright .ft_group .g_menu_wrap .g_link_wrap{width: 49%; margin-right: 0%;}
  .fc_top .copyright .ft_group .g_menu_wrap .g_link_wrap:nth-child(2n){margin-right: 0px;}
  .fc_top .copyright .ft_group .g_menu_wrap .g_link_line{display: none;}


  /*modal*/
  #today_buy_modal .modal-dialog{top: 30%; max-width: 300px; left:50%; transform: translateX(-50%); margin: 0px;  }
}


@media screen and (max-width:380px) {
  .mcs_table2 tbody tr td:nth-child(2) > input{min-width: 50px; }
  .mcs_table3 tbody tr td:nth-child(2) > input{min-width: 50px; }
}

@media screen and (max-width:300px) {
  .mcs_table2 tbody tr td:nth-child(2) > input{min-width: 20px; }
  .mcs_table3 tbody tr td:nth-child(2) > input{min-width: 20px; }
}