@charset "UTF-8";

._fnctWrap {line-height:1.5;}

/* Top Banner */
.wrap-top-banner {background:#0E1C29; height: 0; max-height: 0; transition: max-height 0.5s, height 0.5s; overflow: hidden; position: relative; z-index: 111; opacity: 0; visibility: hidden;}
.wrap-top-banner.on {max-height:130px; height: 90px; opacity: 1; visibility: visible;}
/* 데이터가 없을 시 */
.wrap-top-banner.no-data.on {max-height: 0; height: 0;}
/* scroll 시 */
.wrap-top-banner.no-data.on.content-scroll {max-height: 0; height: 0;}
.wrap-top-banner.on.content-scroll {position: fixed; left: 0; width: 100%; top: 0; max-height:130px; height: 90px;}

.wrap-top-banner .banner-container {position:relative; max-width: 1720px; margin: 0 auto;}
.wrap-top-banner .slider {padding:5px 30px 25px 30px;}
.wrap-top-banner .slider ul {display:inline-block; width:100%;}
.wrap-top-banner .slider li {float:left; width:50%;}
.wrap-top-banner .slider li.slick-current+li .con-top-banner:after {opacity: 0;}
.wrap-top-banner .slider li a {display: block;}
.wrap-top-banner .con-top-banner {position:relative; display:table; width:100%; height: 70px;}
.wrap-top-banner .con-top-banner::before {content: ""; position: absolute; width: 1px; height: 60%; left: -1px; top: 22%; background: rgba(255, 255, 255, 0.25);}

.wrap-top-banner .icon {display:table-cell; vertical-align:middle; width:20%; min-width: 70px; padding: 0 30px 0 0;}
.wrap-top-banner .icon .icon-inner {display: inline-block; width: 70px; height: 70px; text-align: center; background: #5D89B3; border-radius: 50%; text-align: center; line-height: 65px;}
.wrap-top-banner .icon .icon-inner img {display: inline-block; vertical-align: middle; max-width: 52px;}

.wrap-top-banner .desc {display:table-cell; vertical-align:middle; padding: 0 20px; }
.wrap-top-banner .desc .title {position: relative; height: 24px; width: 100%; font-size: 16px; line-height: 30px; letter-spacing: -0.5px; color: #fff;}
.wrap-top-banner .desc .title span {position: absolute; left: 0; top: 0; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.wrap-top-banner .desc .info {position: relative; height: 24px;font-size: 14px; line-height: 24px; color: #c8e5ff; letter-spacing: -0.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.wrap-top-banner .desc .info span {position: absolute; left: 0; top: 0; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}

.wrap-top-banner .desc strong.color2 {color:#86eaff;}
.wrap-top-banner .desc strong.color3 {color:#fff799;}
.wrap-top-banner .desc strong.color4 {color:#f58220;}
.wrap-top-banner .desc strong.color5 {color:#abc5f4;}
.wrap-top-banner .desc strong.color6 {color:#ffebae;}
.wrap-top-banner .desc strong.color7 {color:#f58220;}
.wrap-top-banner .desc strong.color8 {color:#abc5f4;}
.wrap-top-banner .desc strong.color9 {color:#ffebae;}
.wrap-top-banner .desc strong.color10 {color:#f58220;}
.wrap-top-banner .desc strong.color11 {color:#abc5f4;}
.wrap-top-banner .desc strong.color12 {color:#ffebae;}
.wrap-top-banner .desc strong.color13 {color:#f58220;}
.wrap-top-banner .desc strong.color14 {color:#abc5f4;}
.wrap-top-banner .desc strong.color15 {color:#ffebae;}
.wrap-top-banner .desc strong.color16 {color:#f58220;}
.wrap-top-banner .desc strong.color17 {color:#abc5f4;}
.wrap-top-banner .desc strong.color18 {color:#ffebae;}
.wrap-top-banner .desc strong.color19 {color:#f58220;}
.wrap-top-banner .desc strong.color20 {color:#ffebae;}
.wrap-top-banner .desc p {color:#fff; font-size:14px; overflow:hidden;}
.wrap-top-banner .control {position:absolute; top:17px; left:0px; width:100%; height:0px;}
.wrap-top-banner .control button {width:32px; height:60px;}
.wrap-top-banner .control button.prev {float:left; background:#0E1C29 url('../images/btn_prev.png') no-repeat left center; text-indent:-9999px; transition:background-position 0.5s cubic-bezier(0.7, 0, 0.3, 1);}
.wrap-top-banner .control button:hover.prev {background-position:right center; transition:background-position 0.5s cubic-bezier(0.7, 0, 0.3, 1);}
.wrap-top-banner .control button.next {float:right; background:#0E1C29 url('../images/btn_next.png') no-repeat left center; text-indent:-9999px; transition:background-position 0.5s cubic-bezier(0.7, 0, 0.3, 1);}
.wrap-top-banner .control button:hover.next {background-position:right center; transition:background-position 0.5s cubic-bezier(0.7, 0, 0.3, 1);}

.wrap-top-banner .control2 {text-align:left; position:absolute; bottom:15px; left:0; width:100%;}
.wrap-top-banner .control2 .paging {max-width: 1680px; margin: 0 auto; padding: 0 30px;}
.wrap-top-banner .control2 .paging ul {display:inline-block;}
.wrap-top-banner .control2 .paging li {float:left; margin:0 2px;}
.wrap-top-banner .control2 .paging li button {display:block; width:7px; height:7px; background:#878E94;  text-indent:-9999px; transition:width 0.5s cubic-bezier(0.7, 0, 0.3, 1); border-radius: 50%;}
.wrap-top-banner .control2 .paging li.slick-active button {background:#fff;}

.wrap-top-banner .control2 .playstop {display:inline-block; position:relative; top:3px; }
.wrap-top-banner .control2 .playstop button {display:none; text-indent:-9999px;}
.wrap-top-banner .control2 .playstop button.on {display:inline-block;}
.wrap-top-banner .control2 .play {width:13px; height:16px; background:url('../images/ico_top_play.png') no-repeat center center;}
.wrap-top-banner .control2 .stop {width:13px; height:16px; background:url('../images/ico_top_stop.png') no-repeat center center;}
.wrap-top-banner .no-today {position:absolute; right:67px; bottom:16px;}
.wrap-top-banner .no-today label {display: inline-block; vertical-align: middle; font-family: 'Noto DemiLight'; font-size:13px; letter-spacing: -0.5px; color:#fff; margin-right: 10px;}
.wrap-top-banner .no-today label input {display: inline-block; vertical-align: middle;}
.wrap-top-banner .no-today button {display: inline-block; width: 20px; height: 20px; background:url('../images/btn_close.png') no-repeat left center; vertical-align: middle;}

.wrap-top-banner .txt-hidden{visibility: hidden;}
@media all and (max-width:1800px) {
    .wrap-top-banner .container {padding:0 2%;}
    .wrap-top-banner .control button.prev {margin:0 0 0 10px;}
    .wrap-top-banner .control button.next {margin:0 10px 0 0;}
    .wrap-top-banner .no-today {right:20px; padding-top: 10px; }
    .wrap-top-banner .slider ul {padding:0px;}
}

@media all and (max-width:1024px) {
    /* .wrap-top-banner .slider {padding: 20px 80px 40px 80px;} */
    /* .wrap-top-banner .control {top: 30px;} */
    .wrap-top-banner .icon {padding-left: 0;}
    .wrap-top-banner .slider li {padding: 0;}
    .wrap-top-banner .con-top-banner:after {display:none;}
}

@media all and (max-width:768px) {
	/* 모바일 롤링배너 OFF 할 경우
    .main .wrap-header.popup {top: 0px !important;}*/
	/* 모바일 롤링배너 ON 할 경우*/
    .main .wrap-header.popup {top: 70px !important;}
	
    .main .wrap-header.popup.content-scroll {top: 70px;}
	
	/* 모바일 롤링배너 OFF 할 경우
    .wrap-top-banner.on {height: 70px; display: none;}*/
	/* 모바일 롤링배너 ON 할 경우*/
    .wrap-top-banner.on {height: 70px;}
	
    .wrap-top-banner.on.content-scroll {height: 70px;}
    .wrap-top-banner .slider {padding: 5px 50px 33px 50px;}
    .wrap-top-banner .con-top-banner {height: 50px;}
    .wrap-top-banner .no-today {display: none;}
    .wrap-top-banner .control2 {bottom: 20px;}
    .wrap-top-banner .control2 .paging ul {position: relative; left: 50%; margin-left: -16px;}
    .wrap-top-banner .control button {width: 22px; height: 20px;}
    .wrap-top-banner .control button.prev {margin: 5px 0 0 10px;}
    .wrap-top-banner .control button.next {margin: 5px 10px 0 0;}
    .wrap-top-banner .icon {display: none;}
    .wrap-top-banner .desc {width: 100%; padding: 0;}
    .wrap-top-banner .desc .title {height: 20px; line-height: 20px;}
    .wrap-top-banner .desc .info {height: 20px; line-height: 20px;}
    .wrap-top-banner .desc strong {height: 66px; font-size: 18px;}
}


/*@media all and (max-width:670px) {*/
    /*----원래있던주석-----*/
    /* .wrap-top-banner .slider {padding: 20px 80px 40px 80px;} */
    /* .wrap-top-banner .control {top: 30px;} */
    /*-------------*/
    /*.wrap-top-banner .control2 {}
    .wrap-top-banner .no-today {bottom: 16px; padding-top: 0;}
    .wrap-top-banner .con-top-banner::before {display: none;}
}

@media all and (max-width:500px) {
  .wrap-top-banner .slider {padding: 20px 50px 40px 50px;}
    .wrap-top-banner .con-top-banner {height: 65px;}
    .wrap-top-banner .icon {display: none;}
    .wrap-top-banner .desc {width: 100%; padding: 0;}
    .wrap-top-banner .desc strong {height: 66px; font-size: 18px;}
}*/