@charset "utf-8";

/* up_pop */
.up_pop { margin-top:-140px; -webkit-transition:0.3s; transition:0.3s; position:relative; width:100%; height:140px; background:#153958; color:#fff; z-index:10; padding:0 30px; }
.up_pop .bx-wrapper { margin:0 auto; padding:20px 0 40px; overflow:hidden;  }
/* .up_pop .bx-wrapper {max-width:80% !important;} */
/* .up_pop .bx-wrapper:before,
.up_pop .bx-wrapper:after { content:""; position:absolute; top:20px; width:1px; height:78px; left:50%; border-left:1px dotted #506b82; } */
.up_pop .bx-wrapper:before { margin-left:-10.85rem; }
.up_pop .bx-wrapper:after { margin-left:10.85rem; }
.up_pop ul li a { position:relative; display:block; height:78px; padding:5px 30px; overflow:hidden; text-align:center; }
.up_pop ul li a .img { width:316px; height:78px; text-align:center; overflow:hidden; margin:0 auto; }
.up_pop ul li a .img img { max-width:100%; height:100%; }
.up_pop ul li a .txt_pop { display:flex; align-items:center; width:316px; margin:0 auto; height:100%; }
.up_pop ul li a .txt_pop .txt { font-size:0.75rem; overflow:hidden; text-overflow:ellipsis; display: -webkit-box; -webkit-box-orient: vertical; flex:1; padding-right:.5rem; line-height: 1.1rem; word-wrap: break-word; -webkit-line-clamp: 2; text-align:left; }
.up_pop ul li a .txt_pop .btn { width:65px; text-align:center; line-height:30px; background:rgba(255,255,255,.15); font-size:0.6rem; border-radius:30px; -webkit-transition:background-color 0.3s; transition:background-color 0.3s; }
.up_pop .bx-controls-direction a { position:absolute; top:45px; font-size:0;}
.up_pop .bx-controls-direction a:before {font-family:"xeicon"; font-size:1.2rem; }
.up_pop .bx-controls-direction a.bx-prev { left:30px; }
.up_pop .bx-controls-direction a.bx-prev:before {content:"\e93b";}
.up_pop .bx-controls-direction a.bx-next { right:30px; }            
.up_pop .bx-controls-direction a.bx-next:before {content:"\e93e"; }            
.up_pop .bx-controls-auto { position:absolute; right:165px; bottom:15px; font-size:0; z-index:2; }
.up_pop .bx-controls-auto .bx-controls-auto-item > a { display:block; }  
.up_pop .bx-controls-auto .bx-controls-auto-item > a.active { display:none; }  
.up_pop .bx-controls-auto .bx-start:before { content:"\ea3e"; font-family:"xeicon"; font-size:11px; }
.up_pop .bx-controls-auto .bx-stop:before { content:"\ea3b"; font-family:"xeicon"; font-size:11px; }
.up_pop .control{position:absolute; right:1rem; bottom:10px;}
.up_pop .control a{ display:inline-block; }
.up_pop .control .popuplst{ color:#000; background:#fff; border-radius:22px; font-size:13px; line-height:22px; padding:0 15px; }
.up_pop .count { display:inline-block; background:#45759e; border-radius:22px; font-size:11px; line-height:22px; padding:0 35px 0 15px; }
.up_pop .pop_close { font-size:14px;  }
.up_pop .pop_close i { margin-left:5px;}
.up_pop ul li a:hover .txt,
.up_pop ul li a:focus .txt{ text-decoration:underline; }
.up_pop ul li a:hover .btn,
.up_pop ul li a:focus .btn { background:#5b90ff; }

/* popBtn */
.popBtn { position:absolute; right:0; top:27px; width:110px; height:30px; border-radius:19px; background:#444444; text-align:center; font-size:15px; letter-spacing: .5px; color:#fff; line-height:30px }
.popBtn:before { content:"\e99c"; font-family:"xeicon"; margin-right:3px; font-size:18px; vertical-align: bottom; }

.openPop .up_pop { margin-top:0;}
/* .openPop .popBtn { display:block; } */
.openPop .popBtn:before {content:"\e99c";}

/* up_pop */
.upPopClose {display:none;}
.upPopOpen {display:block;}


@media screen and (max-width: 1600px){
    .up_pop { height:140px; margin-top:-140px; }
    .up_pop .bx-controls-direction a { top:45px; }
}  
@media screen and (max-width: 1540px){   
	.popBtn { top:-35px; }
} 

@media screen and (max-width: 1380px){
    /* .up_pop .bx-wrapper { max-width:100% !important; } */
}

@media screen and (max-width: 1220px){
    .up_pop .bx-wrapper:before,
    .up_pop .bx-wrapper:after { display:none}
}
@media screen and (max-width: 1024px){
    /* layout */ 
    #header{ -webkit-transition:top 0.3s; transition:top 0.3s;}
    #container { -webkit-transition:padding 0.3s; transition:padding 0.3s;}
	.openPop #header { top: 140px; }
    .openPop #container{ padding-top: calc(140px + 5.5rem); }/* 헤더 fixed 인 경우, 헤더 높이값 더해준다!! */
    .openPop #mSearch { top:calc(140px + 5.5rem); }
    
    .up_pop { position:fixed; top:0; left:0; }
    
    /* popBtn */
	.popBtn { /*right:1rem;*/ top:5px !important }
}

@media screen and (max-width:768px){
    /* popBtn */
	.popBtn { width:33px; height: 62px; border-radius:8px; top: 3.75rem !important; right:0; font-size:14px; line-height:1.2; padding-top:0.15rem; }

}

@media screen and (max-width:680px){
    .up_pop ul li a .img { width:160px; height:45px; } 
    .up_pop ul li a .txt_pop { width:70%; height:45px; }
    
    .up_pop .bx-controls-direction a.bx-prev { left:10px; } 
    .up_pop .bx-controls-direction a.bx-next { right:10px; } 
    .up_pop .bx-controls-auto { right:155px; }
    .up_pop .count { right:140px; }
    .up_pop .control a.pop_close { font-size:13px; }    

}
@media screen and (max-width: 480px){
    .up_pop { height:110px; }
    .up_pop .bx-wrapper { padding:10px 0; }
    .up_pop ul li a { padding:0 20px; }     
    .up_pop ul li a .btn { width:100px; line-height:25px;}
    
	.openPop #header { top: 110px; }
    .openPop #container{ padding-top: calc(110px + 5.5rem); }/* 헤더 fixed 인 경우, 헤더 높이값 더해준다!! */
    .openPop #mSearch { top:calc(110px + 5.5rem); }
    /* .popBtn {width:100px;} */

}
@media screen and (max-width: 340px){
    
    .up_pop{ height:140px;}
    .up_pop ul li a{ height:60px; padding:0 13px;}
    .up_pop .bx-controls-auto{ right:30px; bottom:43px;}
    .up_pop .bx-controls-direction a{ top:25px;}
    .up_pop .control a.pop_close { display:block; text-align: right; margin-top:10px;}  
    
	.openPop #header { top: 140px; }
    .openPop #container{ padding-top: calc(140px + 5.5rem); }/* 헤더 fixed 인 경우, 헤더 높이값 더해준다!! */
    .openPop #mSearch { top:calc(140px + 5.5rem); }

}