@CHARSET "UTF-8";

#header #numberCircle span {
    text-align: center;
    line-height: 18px;
    display: block;
}
button:focus {outline:0;}

#section--home{padding-top:31px;}

body.modal-open {   overflow: hidden;   position:fixed;   width: 100%;}

#btn--back{
	width:44px;
	height:38px;
    position: fixed;
    left: 0;
    bottom: 75px;
    z-index: 999;
    margin-left: 8px;
    background-image: url('/smartLibrary/resources/images/btn_back_000.png'); 
    background-size: cover; 
    border: none; 
    background-color: Transparent;		    
}

#btn--back img{width: 100%;}

/*Mobile*/
@media (max-width:767px){
	
	.input-img-search{width: 14px;}
	.input-text-delete{width: 14px;}
	
	section{padding-top:56px;}
	
	#header{width: 100%; height:61px; overflow:hidden; background-image: url('/smartLibrary/resources/images/img_topbar_shadow.png'); background-size:cover; position: fixed; top:0px; z-index:99;}
	#header .row .col-sm-4-left{width: 16%; float: left; padding: 0;}
	#header .row .col-sm-4-center{width: 45%; height:60px; float: left; padding: 0; text-align: left; display: table;}
	#header .row .col-sm-4-center p{width: 100%; color: white; font-size: 19px; font-family: 'NanumBarunGothicBold'; display:table-cell; vertical-align:middle;}
	#header .row .col-sm-4-right{width: 39%; float: left; padding: 0;}
	#header .row .col-sm-4-search{width:80%; float:left; padding: 0; text-align: left;}
	#header .row .col-sm-4-search .search_input{width: 100%; height: 37px; border: 0px; border-radius: 0;}
	
	#header .img--logo{width: 47px; height:35px; margin-top: 10px; margin-left: 9px; 
	background-image: url('/smartLibrary/resources/images/logo_white.png'); background-size: cover; border: none; background-color: Transparent;}
	#header .img--stationChange{width: 32px; height:37px; margin-top: 10px; margin-right: 9px; border: none; background-color: Transparent;}
	#header .img--back{width: 29px; height:29px; margin-top: 16px; margin-left: 9px; 
	background-image: url('/smartLibrary/resources/images/btn_back.png'); background-size: cover; border: none; background-color: Transparent;}
	#header .img--guide {position:absolute; width: 30px; height:30px; float: left; right: 0; margin-right: 53%; margin-top: 14px; display: none;}
	#header .img--mypage {position:absolute; width: 30px; height:30px; float: left; right: 0; margin-right: 41%; margin-top: 14px; display: none;}
	#header .img--beacon {position:absolute; width:28px; height:28px; float: left; right: 0; margin-right: 28%; margin-top: 12px; 
	background-image: url('/smartLibrary/resources/images/btn_beacon.png'); background-size: cover; border: none; background-color: Transparent; display: none;}
	#header .img--search {position:absolute; width: 30px; height:30px; float: left; right: 0; margin-right: 16%; margin-top: 14px;}
	#header .img--basket {position:absolute; width: 30px; height:30px; float: left; right: 0; margin-right: 4%; margin-top: 13px; display: none;}
	#header #numberCircle{display: none;}
	
	#header .img--guide:active {content:url('/smartLibrary/resources/images/btn_info_s.png');z-index:99999;}
	#header .img--mypage:active {content:url('/smartLibrary/resources/images/btn_top_mypage_s.png');z-index:99999;}
	#header .img--back:active{background-image: url('/smartLibrary/resources/images/btn_back_s.png'); background-size: cover; border: none; background-color: Transparent;}
	#header .img--beacon:active {background-image:url('/smartLibrary/resources/images/btn_beacon_s.png'); background-size: cover; border: none; background-color: Transparent;}
	#header .img--search:active {content:url('/smartLibrary/resources/images/btn_search_s.png');z-index:99999;}
	#header .img--basket:active {content:url('/smartLibrary/resources/images/btn_basket_s.png');z-index:99999;}
	#header #numberCircle {
		position:absolute;
	    border-radius: 50%;
	    float: left;
	    right: 0;
	    margin-right: 5px; 
	    margin-top: 10px;
	    width: 18px; 
	    height: 18px;
	    font-size: 10px;
	    color: white;
	    font-weight:bold;
	    border: 0px;
	    background-color:red;
	    display: none;
	}
	#header .row{width: 100%; margin: 0;}
	#header .header_title{width:100%; height: 31px; display: table;}
	#header .header_title p{width: 100%; color: white; font-size: 17px; padding-top : 15px; text-align : center; font-family: 'NanumBarunGothicBold'; display:table-cell; vertical-align:middle;}
		
}

/*Tablet*/
@media (min-width:768px) and (max-width:1024px){
	
	.input-img-search{width: 20px;}
	.input-text-delete{width: 20px;}
	
	section{padding-top:80px;}
	
	#header{width: 100%; height:80px; overflow:hidden; background-image: url('/smartLibrary/resources/images/img_topbar_shadow.png'); background-size:cover; position: fixed; top:0px; z-index:99;}
	#header .row .col-sm-4-left{width: 8%; float: left; padding: 0;}
	#header .row .col-sm-4-center{width: 45%; float: left; padding: 0; text-align: left; margin-left: 40px;}
	#header .row .col-sm-4-center p{width: 100%; padding-top: 26px; color: white; font-size: 23px; font-family: 'NanumBarunGothicBold';}
	#header .row .col-sm-4-right{width: 39%; float: left; padding: 0;}
	#header .row .col-sm-4-search{width:80%; float:left; padding: 0; text-align: left; margin-left: 40px;}
	#header .row .col-sm-4-search .search_input{width: 100%; height: 55px; border: 0px; border-radius: 0; font-size: 17px;}
	
	#header .img--logo{width: 90px; height:35px; margin-top: 22px; margin-left: 9px;
	background-image: url('/smartLibrary/resources/images/logo_white.png'); background-size: cover; border: none; background-color: Transparent;}
	/*background-image: background-size: cover; border: none; background-color: Transparent;}*/
	#header .img--stationChange{width: 32px; height:37px; margin-top: 20px; margin-right: 9px; border: none; background-color: Transparent;}
	#header .img--back{width: 29px; height:29px; margin-top: 16px; margin-left: 9px; background-image: url('/smartLibrary/resources/images/btn_back.png'); background-size: cover; border: none; background-color: Transparent;}
	#header .img--guide {position:absolute; width: 30px; height:30px; float: left; right: 0; margin-right: 34%; margin-top: 24px; display: none;}
	#header .img--mypage {position:absolute; width: 30px; height:30px; float: left; right: 0; margin-right: 26%; margin-top: 24px; display: none;}
	#header .img--beacon {position:absolute; width:28px; height:28px; float: left; right: 0; margin-right: 18%; margin-top: 22px;
	background-image: url('/smartLibrary/resources/images/btn_beacon.png'); background-size: cover; border: none; background-color: Transparent; display: none;}
	#header .img--search {position:absolute; width: 30px; height:30px; float: left; right: 0; margin-right: 10%; margin-top: 24px;}
	#header .img--basket {position:absolute; width: 30px; height:30px; float: left; right: 0; margin-right: 2%; margin-top: 23px; display: none;}
	#header #numberCircle{display: none;}
	
	#header .img--back:active{background-image: url('/smartLibrary/resources/images/btn_back_s.png'); background-size: cover; border: none; background-color: Transparent;}
	#header .img--beacon:active {background-image:url('/smartLibrary/resources/images/btn_beacon_s.png'); background-size: cover; border: none; background-color: Transparent;}
	#header .img--guide:active {content:url('/smartLibrary/resources/images/btn_info_s.png');z-index:99999;}
	#header .img--mypage:active {content:url('/smartLibrary/resources/images/btn_top_mypage_s.png');z-index:99999;}
	#header .img--search:active {content:url('/smartLibrary/resources/images/btn_search_s.png');z-index:99999;}
	#header .img--basket:active {content:url('/smartLibrary/resources/images/btn_basket_s.png');z-index:99999;}
	#header #numberCircle {
		position:absolute;
	    border-radius: 50%;
	    float: left;
	    right: 0;
	    margin-right: 5px; 
	    margin-top: 20px;
	    width: 18px; 
	    height: 18px;
	    font-size: 10px;
	    color: white;
	    font-weight:bold;
	    border: 0px;
	    background-color:red;
	    display: none;
	}
	#header .row{width: 100%; margin: 0;}
	#header .header_title{width:100%; height: 31px; display: table;}
	#header .header_title p{width: 100%; color: white; font-size: 23px; padding-top : 15px; text-align : center; font-family: 'NanumBarunGothicBold'; display:table-cell; vertical-align:middle;}
	
}

