html{ height: 100%;}
.page { left: 0; right: 0; top: 0; bottom: 0; }
.row, .col, .page { overflow: hidden; position: absolute; }
.row { left: 0; right: 0; }
.col { top: 0; bottom: 0; }
.scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.scroll-y { overflow-y: auto; -webkit-overflow-scrolling: touch; }
.fill, .pane { position: absolute; left: 0; top: 0; right: 0; bottom: 0; width: 100%; height: 100% }
.pane { display: none; }

/** 로딩중 **/
.loading-layer { display: none; position: absolute; top: 0; left: 0; width: 100%;  height: 100%; z-index: 9999; }
.loading-layer .loadingBg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #fff; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; /* IE 5-7 */ filter: alpha(opacity=50); /* Netscape */ -moz-opacity: 5.0; /* Safari 1.x */ -khtml-opacity: 0.5; /* Good browsers */ opacity: 0.5; }
.loading-layer .loadingImg { position: absolute; top: 50%;  left: 50%; transform: translate(-50%,-50%);}
/* .loading-layer .loadingImg img {animation: rotate_image 3s ease-out infinite;transform-origin: 50% 50%;}

@keyframes rotate_image{
    100% {
        transform: rotate(360deg);
    }
} */

.top_menu{position: fixed; top:0; left:0; width:100%; height: 108px; border-bottom: 1px solid #ccc; background-color: #fff; z-index: 9;}
.top_head{overflow: hidden; margin-bottom: 16px; padding:20px 25px 0 20px;}
.top_head > h1{float:left; width:220px;}
.top_head > h1 > a{display: block; width:100%;}
.top_head > h1 > a > img{width:100%; margin-top: -12px;}
.top_head > a{display: block; float:right; width:20px; height: 20px; padding-top:5px;}
.top_quick{display: flex; justify-content: space-around; padding: 0 20px;}
.top_quick > li.on_quick > a{color:#FBB900; position: relative;}
.top_quick > li.on_quick > a::before{position: absolute; display: block; content: ''; width: 4px; height:4px; border-radius: 4px; background-color: #FBB900; top:-8px; left:50%; transform: translate(-50%);}
.top_sub_quick{display: grid; grid-template-columns: 1fr 1fr; text-align: center; border-bottom: 1px solid #E1E1EA; border-top: 1px solid #E1E1EA; padding:10px 0; background-color: #eee; margin-top: 8px;}
.top_sub_quick > li.on_spuick > a{color:#FBB900; }
.top_sub_quick > li > a{display: block; width:100%; height: 100%; letter-spacing: -1px;}


.sub_head{display: grid; grid-template-columns: 1fr 5fr 1fr; margin-top: 5px; padding:20px 25px 14px 20px;; margin-bottom: 16px;}
.back{padding-top:3px}
.sub_cont{margin-top: 108px; padding-bottom: 60px;}
.sub_cont > section{border-bottom:10px solid #f2f2f2; padding:20px;}
.sub_cont > section:last-child{border-bottom: 0;}
.search_cont{display: grid;  gap:10px}
.search_btn{border:1px solid #ccc; display: flex; justify-content: center; align-items: center; max-width: 44px; max-height: 44px; min-width: 44px; min-height: 44px;}
.more_btn{display: inline-block; padding:10px 20px; border:1px solid #ccc; border-radius: 100px; text-align: center; margin: 0 auto;}

.sub_bottom{position: fixed; bottom: 0; left: 0; height: 60px; border-top: 1px solid #ccc; width:100%; background-color: #fff;}
.sub_bottom > a{width:60px; height: 60px; margin: -14px auto; border:5px solid #FBB900; border-radius: 500px; background-color: #fff; justify-content: center; align-items: center; display: flex;}
.sub_bottom > a > img{width:24px; height: 24px;}

/** 자동완성 검색 **/
.ui-autocomplete-loading { background: url(/resources/images/ajax-loader-s.gif) no-repeat center; }
.ui-autocomplete { height: 200px; overflow-y: auto; overflow-x: hidden; }
.ui-menu-item { padding: 3px 6px; }
.ui-menu-item strong { color: #006fc1; }
.ui-menu-item .resultMenu { font-size: 14px; font-weight: 800; }

#menuViewMask { width: 100%; height: 100%; position: fixed; top: 0; right:0; bottom:0; left: 0; background: #000; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; filter: alpha(opacity=50); zoom: 1; opacity: 0.5; z-index: 998; display: none; }

/* 햄버거 버튼 클릭 시 오픈 메뉴 */
.tab_menu{position: fixed; top:0; right: -370px; width:100%; max-width: 370px; height: 100vh; background-color: #fff; z-index: 999; overflow-y: auto; border-left: 1px solid #202468; }
.tab_menu > .tab_close{float:right; width:20px; height: 20px; margin: 20px;}
.tab_menu > .tab_close > img{width:100%;}
.tab_menu > div{position: relative; margin: 50px 20px 0 20px;}
.tab_menu > ul.tab_menu_list{margin-top: 20px;}
.tab_menu > ul.tab_menu_list > li{ border-top: 1px solid #f2f2f2;}
.tab_menu > ul.tab_menu_list > li:last-child{border-bottom: 1px solid #f2f2f2;;}
.tab_menu > ul.tab_menu_list > li > a{display: block; width:100%; padding:14px 20px;}
.tab_menu > ul.tab_menu_list > li > ul.sub_menu_list > li{background-color: #F8F8F8; border-bottom: 1px solid #f2f2f2;}
.tab_menu > ul.tab_menu_list > li > ul.sub_menu_list > li:last-child{border-bottom: 0;}
.tab_menu > ul.tab_menu_list > li > ul.sub_menu_list > li > a{display: block; width:100%; padding:14px 20px 14px 35px;}

/* Push 알람 css */
.alert_switch{position: relative; border:1px solid #202468; border-radius: 4px; padding:10px; margin-top: 10px;}
.alert_switch li > a, .alert_switch li > span{display: block; width:100%; height: 100%; padding: 8px 20px;}
.alert_switch input[type="checkbox"] {width: 65px; height: 22px; display: inline-block; -webkit-appearance: none; margin-right: 3px; background-color: #E1E1EA; border-radius: 50px; position: absolute; right: 10px; top: 50%; transform: translateY(-50%); transition: all .3s ease; cursor:pointer; border:none;}
.alert_switch input[type="checkbox"]:after {content:''; display:inline-block; width:20px; height:20px; background-color:#fff; border-radius: 50px; position: absolute; top: 50%; left: 6px; margin-top: -10px; transition: all .3s ease;}
.alert_switch input[type="checkbox"]:before {content: 'OFF'; position: absolute; right: 8px; top: 50%; margin-top: -8px; color:#202468}
.alert_switch input:checked[type="checkbox"] {background-color: #202468; transition: all .3s ease;}
.alert_switch input:checked[type="checkbox"]:before {content:'ON'; top: 8px; left:8px; color: #FBB900; font-weight: bold;}
.alert_switch input:checked[type="checkbox"]:after {left: 40px; transition: all .3s ease;}
.alert_switch label {position: absolute; font-size:0; width:1px; height:1px; opacity:0;}

/* 레이어 팝업 */
.slide_popup{position: fixed; width:100%; height: 100vh; top:0; left:0; z-index: 9999;}
.slide_popup > .slide_popup_bg{width:100%; height: 100vh; background-color: rgba(0, 0, 0, .5);}
.slide_popup > .slide_popup_bg > .slide_popup_cont{position: absolute; bottom: 0; width:100%;  background-color: #fff; border-top-left-radius: 20px; border-top-right-radius: 20px;}
.slide_popup > .slide_popup_bg > .slide_popup_cont > .slide_popup_con{padding:40px 20px 20px 20px;}
.slide_popup > .slide_popup_bg > .slide_popup_cont > .slide_popup_con > .slide_popup_title{font-size: 16px; font-weight: 600; margin-bottom: 30px; position: relative;}
.slide_popup > .slide_popup_bg > .slide_popup_cont > .slide_popup_con > .slide_popup_title .slide_popup_close{position: absolute; top:-24px; right:0; font-size: 40px; text-align: center; display: block;}
.slide_popup > .slide_popup_bg > .slide_popup_cont > .slide_popup_con > ul > li{margin-bottom: 20px;}
.slide_popup > .slide_popup_bg > .slide_popup_cont > .slide_popup_con > ul > li > p:first-child{margin-bottom: 10px;}
.slide_popup > .slide_popup_bg > .slide_popup_cont > .slide_popup_con > ul > li select{margin-bottom: 10px;}
.slide_popup > .slide_popup_bg > .slide_popup_cont > .slide_popup_btn{display: block; width:100%; padding:20px 0; text-align: center; background-color: #ccc; color:#fff;}
.slide_popup > .slide_popup_bg > .slide_popup_cont > .slide_popup_btn_on{background-color: #202468;}

#appVersion {text-align: right;}