/**************** gen ****************/

body {width:100%;max-width:800px;right: 0;transition: right 0.4s;position: relative;margin: 0 auto !important;}

.main_wrap {width: 100%;background:#fff;height: 100vh !important;position: relative;overflow-y: auto;margin: 0 auto;padding:50px 0 70px;}

.checkbox_list .check_wrap {display: flex;align-items: center;}
.checkbox_list .check_wrap input {width:20px;height:20px; margin-right: 10px;}
.checkbox_list .check_wrap label{color:#333;font-size:16px; font-weight:400; margin-bottom:0;}
.checkbox_list li {display: flex;align-items: center;justify-content: space-between;margin-bottom: 12px;}

/* tab */
.tab_wrap {display: flex;align-items: center;justify-content: center;}
.sub_tab_wrap{display:flex;}
.sub_tab{width:calc(20% + 1px); margin:-1px 0 0 -1px; border:1px solid #ccc; background-color:#f3f3f3; font-size:17px; font-weight:300; color:#999; padding:10px 20px; text-align:center; cursor:pointer; word-break:keep-all; display:flex; align-items:center; justify-content:center;}
.sub_tab.on{background-color:#006d63; border-color:#006d63; color:#fff;}

.sub_tabcon{ display:none; overflow:hidden; }
.sub_tabcon.on{ display:block; }

@media(max-width:900px){
    .sub_tab_wrap{ display:none; }
}

/**************** header ****************/

#hd{position: fixed;width: 100%;padding: 0 20px;max-width: 800px;max-height:50px; z-index: 1000;top: 0;left: 50%;transition-duration: .3s;background: #fff;margin: 0 auto;transform: translateX(-50%);box-shadow: 0 2px 2px 0 rgb(0 0 0 / 5%);}
.header_wrap{z-index:200;width:100%;height:100%;margin:0 auto;zoom:1;text-align:center;display:flex;justify-content:space-between;align-items: center; position: relative;min-height: 50px;}

.header_logo_wrap {padding: 15px 10px;position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);}
.header_logo_wrap:after,.header_logo_wrap:before{content:'';display:table;clear:both;}

/* 검색 */
.search button {font-size: 20px;display: flex;align-items: center;justify-content: center;}
.search.active button{display:none;}

.modal_wrap{width:100%;height:100%;position: relative;padding:0 20px;}
.modal_wrap .close_btn {position: absolute;color:#fff;font-size:20px;top:20px;right: 20px;background:transparent;}

.search_modal{position: fixed;top:-100vh;right: 0;z-index: 3;height:30vh;width: 100%;background: rgba(0,0,0,0.75);overflow: hidden;transition: all ease .4s;box-shadow: 0 2px 2px 0 rgb(0 0 0 / 30%);}
.search_modal.active{top:0;}

#search_modal_contents {width: 100%;height: 100%;display: flex;align-items: center;justify-content: center;}
#search_modal_contents input {width:100%;height: 60px;padding: 0 0 0 0;border:0;border-bottom: 1px solid #eee;line-height: 60px;font-family: 'Noto Sans KR',sans-serif;font-size: 24px;font-weight: bold;color: #efefef;background: rgba(0,0,0,0);opacity: 1;}
#search_modal_contents div{position:relative;}
#search_modal_contents button {color: #fff;font-size: 25px;position: absolute;top: 50%;right: 0;transform: translateY(-50%);background: transparent;border-style: inherit;}



/* 모바일 */
#gnb_1dul .gnb_1da {padding: 12px 20px;display: inline-block;line-height: 60px;font-size: 17px;color: #fff;letter-spacing: -.02em;text-align: center;font-weight: 500;transition: all ease .5s;}

ul.mo_gnb{display:none;}

#m_nav_icon{width: 25px;height: 18px;display:block;position:relative;opacity: 1;cursor: pointer;}

#m_nav_icon .menu_bar{position:absolute;width:22px;height:2px;background:#333;z-index: 9999;transition: .25s ease-in-out;-webkit-transition: .25s ease-in-out;-moz-transition: .25s ease-in-out;-o-transition: .25s ease-in-out;}
#m_nav_icon .menu_bar:nth-child(2){width:18px;top:8px;z-index: 9999;}
#m_nav_icon .menu_bar:nth-child(3){bottom:0;z-index: 9999;}

a.hd_icon_btn.btn01:hover{background-position: -220px 0;}
a.hd_icon_btn.btn02:hover{background-position: -255px 0;}
#mo_menu_wrap:hover #m_nav_icon .menu_bar{background:#1d73df;}
#mo_menu_wrap:hover #m_nav_icon .menu_bar:nth-child(1){width:18px;right: 0;}
#mo_menu_wrap:hover #m_nav_icon .menu_bar:nth-child(2){width: 22px;}
#mo_menu_wrap:hover #m_nav_icon .menu_bar:nth-child(3){width:18px;right: 0;}

#m_nav_icon.close {width: 28px;z-index: 9999;}
#m_nav_icon.close .menu_bar:nth-child(1){transform:rotate(45deg);top:6px;width:28px !important;background:#333 !important;right: 0;}
#m_nav_icon.close .menu_bar:nth-child(2){width: 0%; opacity: 0;}
#m_nav_icon.close .menu_bar:nth-child(3){transform:rotate(-45deg);top:6px;width:28px !important;background:#333 !important;;right: 0;}

#m_nav_icon.close:hover .menu_bar:nth-child(1){transform:rotate(45deg);top:6px;width:28px;background:#333;}
#m_nav_icon.close:hover .menu_bar:nth-child(2){width: 0%; opacity: 0;}
#m_nav_icon.close:hover .menu_bar:nth-child(3){transform:rotate(-45deg);top:6px;width:28px;background:#333;}

header#hd.active {min-height: 50px;display: flex;align-items: center;}
body.active header#hd{background: transparent;border-bottom:none;box-shadow:none;}

#m_gnb.open{left:0;opacity: 1;}
#m_gnb.open main#container:before{content:'';background:rgba(0,0,0,.4);width:100%;height:100%;z-index:999;position:absolute;top:0;left:0;}

#m_gnb {opacity: 0; position: fixed;overflow-y: auto;z-index: 9998;top: 0;bottom: 0;left:-320px;width: 100%;max-width: 320px; padding-top:50px;background-color: #fff;line-height: 1.5;transition:left 0.4s;box-shadow: 0 5px 3px 0 rgb(0 0 0 / 5%);height: 100vh;}

#m_gnb #gnb_1dul .gnb_1da{color:#333;line-height:40px; width: 100%;text-align: left;position: relative;}
#m_gnb #gnb_1dul .gnb_1da:after{content: '';width: 10px;height: 10px;position: absolute;right:25px;top: calc(50% - 4px);border-top: 1px solid #333;border-right: 1px solid #333;transform: rotate(45deg);transition-duration: 0.3s;}
#m_gnb a.gnb_1da.open:after{transform: rotate(135deg)!important;}
#m_gnb #gnb_1dul .gnb_1dli{width:100%;height: auto;text-align: left;position: relative;}
#m_gnb #gnb_1dul .gnb_1dli:first-child{border-top: 1px solid #eee;}

#m_gnb .gnb_2dul{background: #f4f4f4;padding: 10px 20px;margin: 2px 10px;display:none;}
#m_gnb .gnb_2dli {padding: 3px 0;}
#m_gnb .gnb_2dli a.gnb_2da{color:#999;text-align: left;}
#m_gnb .gnb_2dli a.gnb_2da:hover{color:#333;}
#m_gnb  #gnb_1dul .gnb_1dli:before{display:none;}


#m_gnb .add_menu_wrap {position: absolute;top:0;left: 25px;}
#m_gnb li.add_menu.log_btn_wrap{display:block;}
#m_gnb li.add_menu.log_btn_wrap a{color:#333;}
#m_gnb a.hd_log_btn.login:after{background:#333;}
#m_gnb .logo {position: absolute;bottom: 60px;left: 50%;transform: translate(-50%, -0);opacity:0.6;}


body{right:0;transition: right 0.4s;width: 100%;position: relative;}
body.active:before {content: '';position: absolute;z-index: 999;top: 0;bottom: 0;left: 0;right: 0;background-color: rgba(0,0,0,0.5);}
#hd.active .header_logo_wrap{display:none;}

@media(max-width:1365px) {
    .header_wrap {min-height:50px;align-items: center;height: 1px;}
    #gnb{display:none;}
    #mo_menu_wrap{ height: 100%;width: 100%;display: flex;align-items: center;justify-content: flex-end;}
    li.add_menu{margin:0;}
    ul.gnb_1dul{display:none;}
    li.add_menu.log_btn_wrap{display:none;}
    li.add_menu.add_btn_wrap a.hd_icon_btn.btn01{display:none;}
    li.add_menu.add_btn_wrap a.hd_icon_btn.btn02{display:none;}
    a.hd_icon_btn.btn03.close{margin-top:0;}
    #gnb_btn{display:none;}
}




/**************** quick menu ****************/

.qm_wrap {position: fixed;z-index:998;left: 50%;bottom: 0;transform: translateX(-50%);width: 100%;max-width: 800px;height:70px;}
.qm_wrap.on{display:none;}

.qm_wrap > ul {display: flex;width: 100%;height: 100%;}

.qm_wrap .qm_li {width:25%; background:#2d343f;transition:0.4s;}
.qm_wrap .qm_li:hover{background:#1d73df;}
.qm_wrap .qm_li .qm_link{width:100%; height:100%;color:#fff; padding:10px;font-size:13px; display: flex;flex-flow: column;justify-content: center;text-align: center;align-items: center;transition:0.4s;}
.qm_wrap .qm_li i{font-size:22px;}
.qm_wrap .qm_li span{margin-top:2px;}

/***************** 좌우드래그 *****************/

.stockTbl-scrollbar-cover{display: none;}
.stockTbl-scrollbar-cover.off{display: none;}

@media(max-width:930px){
    .stockTbl-scrollbar-cover {display: block;position: absolute;  top: 0px;  left: 0px; right: 0px; bottom: 0px; background-color: rgba(0,0,0,0.5); }
    .stockTbl-scrollbar-cover .scroll-cover-txt {position: absolute; top: 50%; left: 0; width: 100%;text-align: center; color: #fff; font-size: 15px;}
    .stockTbl-scrollbar-cover .scroll-cover-txt i {font-size: 30px; display: block; margin-bottom: 20px; }
}