@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Nanum+Gothic&family=Noto+Sans+KR&family=Roboto+Condensed&display=swap');

 #navi_header {  
    /*상단 바  색상*/
    position:relative;              
    top:0;
    z-index:100;
    /* z-index:9999; */
    display:inline-block;        
    width:100%;
    margin-bottom:0px;        
    text-align:center;                        
    /* background:transparent; */
    /*기본 폰트 설정*/
    font-family: 'Nanum Gothic', sans-serif;
    font-size:12px;    
}

#navi_header #navi_top {
    /* I. 탑네비 게이션 박스 (로고, 아이콘 삽입) */
    position:relative;        
    margin:0;
    text-align:left;
}    

#navi_header #navi_top .nav_logo{        
    margin:0;
    padding:20px 0 5px 15px;
}

#navi_header #navi_top .nav_logo img {        
    /* 1. 회사로고*/        
    width:140px;        
    border:none;
    margin: 5px 0;
}

/*탑 메뉴*/
.top_menu{
    display:block;
    color:gray;
    border-top:1px dotted lightgray;
    border-bottom:1px dotted lightgray;
    padding: 5px 0;
}

.top_menu ul {
    padding:0;
    margin:0;
}

.top_menu ul li{
    display:inline-block;
    width:25%;
    text-align:center;
    padding-top:8px;
    padding-bottom:2px;
    margin-left:-4px;
    line-height:1.6em;
    font-size:10px;
    font-weight:bold;
    letter-spacing:1px;
}

/* 이동 : 20203-06-23 [탑 메뉴] */

.top_menu ul li img {
    width:15px;
    height:14px;
    top:4px;
    border:none;
}

.top_menu ul li#mypage a span{
    display:inline-block;
    color:gray;
}

.top_menu ul li#mypage a span img{
    top:4px;
    width:15px;
    height:13px;
    border:none;
}

/* 카트 숫자 */

.itemNum{
    position:relative;    
    display: inline-block;
    width:50px;
}

.item-number{
    /*숫자*/
    position: absolute;
    display: inline-block;
    width: 50px;
    bottom: 13px !important;
    left: -1px;
    text-align: center;
    font-size: 10px;
    color: gray;
    text-shadow: none;
}

/* 2.  로그인 메시지 바*/
#personal_page {
    width:100%;
    position:relative;
    margin:0 auto;
    text-align:left;
    height: 35px;
    line-height: 35px;
    border-bottom:1px dotted lightgray;
    color:gray;
}

#nav_hello {        
    /*인사말 메시지*/
    display:inline-block;       
    position:relative;  
    left:10px;   
    letter-spacing:1px;
}

#nav_connect{
    display:inline-block;
    position:relative;
    float:right;
    right:10px;
    font-weight:bold;        
    letter-spacing:1px;   
}

#nav_connect .nav_login,
#nav_connect .nav_logout {
    /*텍스트 버튼*/
    position:relative;
    left:-10px;
    display:inline-block;
    font-size:11px;  
}

#nav_mypage:hover{
    color:black;
}

#nav_mypage div{
    /*기본 폰트 설정*/
    font-family: 'Nanum Gothic', sans-serif;
}

/* # 검색 파트 */
#navi_header #navi_search {
    /*검색창 */
    top:35px;
    padding:10px;
}

#navi_header #navi_search .search_option {
    /*카테고리 선택*/
    display:inline-block;        
    width:100%;
}

#navi_header #navi_search .search_input {
    /*검색창*/
    display:inline-block;                
    width:100%;        
}

#navi_header #mykeyword {                
    border:none;
    background:none;
    /*padding:5px;*/    
}

#navi_header .search_close,
#navi_header .login_close {        
    display:inline-block;
    width:98%;
    padding:5px;
    text-align:right;
}

/* 슬라이드 로그인 창 */
#navi_header #login_page,
#navi_header #login_page input {
    text-align:left;
    font-size:13px;
    border:none;
    background:none;        
    width:100%;     
}

#navi_header #login_page {        
    margin: 0;
    padding: 0;
    position: relative;
    border-bottom:1px solid lightgray;        
}

#navi_header #login_page div[data-role=fieldcontain] {
    padding:3px 5px;        
    margin:0;
    border-bottom:none;
}

#navi_header label {
    /*로그인*/
    display: block;
    position: relative;
    margin-bottom: 5px;
    font-size:17px;
    font-weight:bold;
    letter-spacing:3px;
    color:gray;
    text-indent:5px;
}

#login_page #mem_email {
    font-size:13px;
    border:none;
    background:none;        
    width:90%;     
}

/*로그인 폼 버튼*/

#login_page .ui-grid-b > div {
    display:inline-block;
    float:left;
}

#login_page .ui-grid-b #btn_login,
#login_page .ui-grid-b #btn_reset,
#login_page .ui-grid-b #btn_close {        
    position:absolute;
    letter-spacing: 3px;   
    z-index:99999;                            
}

/*패스워드 찾기*/
.btn_register,
.findpw{
    position:relative; 
    top:2px;
    right:10px;
    float:right;                
    display:inline-block;            
    font-size:11px;
    font-weight:normal;            
    letter-spacing:1px;
}

/*슬라이드 패널 설정*/

#popupPanel_menu .close_panel,
#popupPanel .close_panel {     
    /* 최상단 타이틀 (박스) */
    height:35px;
    line-height: 35px;
    text-align: right;

    /*기본 폰트 설정*/
    font-family: 'Nanum Gothic', sans-serif;
    font-size:12px;
    background: rgba(74, 42, 42, 0.3); 
    color:white;
}

#popupPanel_menu .close_panel img,
#popupPanel .close_panel img {
    /* 최상단 타이틀 (X 닫기 버튼) */
    position:relative;
    top:5px;
    right:10px;
    width:25px;
    height:25px;
    border:none;
}

.panel_browser {
    /*장르 브라우저 - 상단 타이틀 (텍스트)*/
    font-size: 15px;
    /* font-family: 'Nanum Gothic', sans-serif; */
    letter-spacing: 5px;
    float: left;      
    text-shadow: none;
    position: relative;          
    padding-left: 8px;        
}

.panel_mypage {
    /*마이 페이지 설정*/
    position: relative; 
    float: left;        
    font-size: 15px;
    letter-spacing: 5px;
    padding-left: 8px;
    text-shadow: none;
    color: white;
}  


/*슬라이드 패널 닫기*/
#popupPanel .close_panel img {            
    position:relative;
    top:5px;
    right:10px;
    width:25px;
    height:25px;
    border:none;
}

/*팝업 패널 위치 조정*/
/*#popupPanel-popup is the ID of the container div generated by the framework*/

#popupPanel-popup,
#popupPanel_menu-popup {
    right: 0 !important;
    left: auto !important;
    z-index:99999;
    /*왼쪽으로 붙이기*/
    /* left: 0 !important; */    
}

#popupPanel,
#popupPanel_menu {
    /*팝업 패널 전체 배경 설정*/        
    /*넓이*/
    width: 210px;
    /*배경색*/
    background:white;
    border-left: 1px solid lightgray;
    border-bottom: 1px solid lightgray;
    border-top: 1px solid lightgray;
    /*위치*/
    margin: -1px 0;
    /* box-shadow: 1px 2px 3px gray; */
    /* background: rgba(76, 71, 142, 0.85);             */
}

    #popupPanel > div,
    #popupPanel_menu > div {                
        border-bottom:1px dotted lightgray;
        font-size:14px;
        padding-left:10px;
        /* text-shadow:1px 1px 0px rgba(68, 62, 62, 0.40); */
        /* color:white; */
    }
    
    #popupPanel .ui-btn,
    #popupPanel_menu .ui-btn {
        margin: 2em 15px;
    }

    #popupPanel > div:hover{
        background:rgba(75, 73, 73, 1.0);
        background: lightgray;
    }

    #popupPanel_menu > div > p,
    #popupPanel > div > p {     
        /*장르 타이틀(영문)*/           
        padding:3px 0;
        font-size:11px;
        font-weight:bold;
        letter-spacing:3px;        
        margin:0;
        text-transform:uppercase;
        color:gray;
    }

    #popupPanel_menu > div > span,
    #popupPanel > div > span {
        /*장르 타이틀(한글)*/           
        display:block;
        padding-bottom:5px;
        font-size:11px;
        letter-spacing:3px;
        color:darkgray;
    }

    /*장르 리스트 (list)*/
    #popupPanel_menu > div ul {                
        list-style:none;                
        margin:0;
        padding:0;
    }
        #popupPanel_menu > div ul li {
            font-size:10px;
            text-transform:uppercase;
            font-weight:normal;                    
            letter-spacing:1px;
            text-indent:10px;            
            border-bottom:1px dotted rgba(234, 221, 221, 1.0);            
            line-height: 2.6em;
        }
            #popupPanel_menu > div ul li:hover {                        
                 font-weight: bold;
            }

/* MY PAGE 슬라이드 설정 */
#nav_mypage #popupPanel {
    background:lightgreen;    
    height: 400px;
}
#popupPanel > div {
    font-family: 'Nanum Gothic', sans-serif;
}
#popupPanel > div > p{
    font-size:12px;
    line-height: 2em;
}
#popupPanel > div > span{
    font-size:11px;
}