@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:before {content:"";position:absolute;left:50%;top:20px;width: 1px;height: 95px;/* border-left: 2px dotted #506b82; */border-left: 5px dotted #92bcdf;}/*230329*/
.up_pop ul li div { position:relative; display:block; height:78px; padding:5px 30px 0 340px; overflow:hidden; }
.up_pop ul li div .img { position:absolute; left:50px; top:0; width:272px; height:78px; text-align:center; overflow:hidden; }
.up_pop ul li div .img img { max-width:100%; height:100%; }
.up_pop ul li div .txt { font-size:0.85rem; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; margin:0 0 0.5rem; }
.up_pop ul li div .btn { /*width:126px;*/ text-align:center; line-height:30px; background:#5184b0; font-size:0.75rem; border-radius:30px; -webkit-transition:background-color 0.3s; transition:background-color 0.3s; padding:5px 20px 5px 20px;}
.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 div:hover .txt,
.up_pop ul li div:focus .txt{ text-decoration:underline; }
.up_pop ul li div:hover .btn,
.up_pop ul li div:focus .btn { background:#5b90ff; }

/* popBtn */
.popBtn { position:absolute; right:calc(50% - 720px); top:15px; width:104px; height:38px; border-radius:19px; background:#153958; text-align:center; font-size:14px; letter-spacing: .5px; color:#fff; line-height:40px }
.popBtn:after { content:"\e942"; font-family:"xeicon"; margin-left:3px; font-size:20px; vertical-align: bottom; }

.openPop .up_pop { margin-top:0;}
.openPop .popBtn:after {content:"\e945";}

/* 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: 1480px){
    .popBtn { position:fixed; right:0.5rem; top:auto; bottom:1.3rem; width:2.5rem; height:2.5rem; padding:0.65rem 0; font-size:11px; line-height:1; border-radius:50%; z-index:10; }
    .popBtn:after { display:block; margin-left:0; }
    #footer .btn_top { bottom:4.1rem; }
}
@media screen and (max-width: 1220px){
    .up_pop .bx-wrapper:before { 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; padding-top:3.5rem;}
	.openPop #header { top: 140px; }
    .openPop #container{ padding-top: calc(140px + 3.5rem); }/* 헤더 fixed 인 경우, 헤더 높이값 더해준다!! */
    .openPop #mSearch { top:calc(140px + 3.5rem); }

    .up_pop { position:fixed; top:0; left:0; }
}
@media screen and (max-width:680px){
    .up_pop ul li div .img { left:10px; top:16px; width:160px; height:45px; }
    .up_pop ul li div { padding-left:190px; }
    .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 div .img { display:none;}
    .up_pop ul li div { padding:0 20px; }
    .up_pop ul li div .btn { width:100px; line-height:25px;}

	.openPop #header { top: 110px; }
    .openPop #container{ padding-top: calc(110px + 3.5rem); }/* 헤더 fixed 인 경우, 헤더 높이값 더해준다!! */
    .openPop #mSearch { top:calc(110px + 3.5rem); }

}
@media screen and (max-width: 340px){

    .up_pop{ height:140px;}
    .up_pop ul li div{ 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 + 3.5rem); }/* 헤더 fixed 인 경우, 헤더 높이값 더해준다!! */
    .openPop #mSearch { top:calc(140px + 3.5rem); }

}