@charset "utf-8";


body{background-color:#080607;}
#content{width:100%;}

/*비주얼 영역*/

.visual{position: relative;width: 100%;height: 0;padding-bottom: 56.25%;z-index:0;background:#131313;/* z-index:-1 을 하지 않으면 iOS에서 비디오 배경 영역 때문에 컴바인 메뉴가 작동 하지 않는다. */}
.cont-video .btn-wrap .btn-start{
    display: inline-block;
    box-sizing: border-box;
    width:auto;
    margin:0;
    padding: 9.5px 20px;
    align-items: flex-start;
    border:0;
    vertical-align:top;
    font-size:20px;
    /*     font-family:'Notokr','Titillium Web',AppleSDGothicNeo,'Dotum',Sans-serif; */
    font-weight:bold;
    font-style: normal;
    text-align: center;
    text-transform:uppercase;
    color: #fff;
    background-color:#df8104;
    cursor: pointer;
    -webkit-appearance: none; /* 네이티브 외형 감추기 */
    -moz-appearance: none;
    appearance: none;
}
.cont-video .btn-wrap button.btn-start {margin-right:1rem;}
.cont-video .btn-wrap .btn-start:hover{
    color: #131313;
    background-color:#df8104;
}
.visual .bg-video{position:absolute;opacity:0.5;left:0;top:0;width:100%;height:130%;background:url(/static/images/main/cover-video.png) 0 0 repeat;}
.video-wrap{/*z-index:5;*/overflow:hidden;width:100%;height:1072px;height:82vh;padding:0;margin:0 auto;zoom:1;text-align:center;}
.video-wrap #video{overflow:hidden;z-index:-100;width:100%;right: 0;bottom: 0;background-size:cover;object-fit:cover;}
#video-obj{position: absolute;top: 0;left: 0;width: 100%;height: 100%;}
.cont-video{position:absolute;margin:0;padding:0;left:0;top:50%;width:100%;height:auto;text-align:center;}
.cont-video .img-wrap{width:30%;margin:0 auto;text-align:center;}
.cont-video .img-wrap img{width:100%;}
.cont-video p{box-sizing:border-box;margin-top:0.5rem;width:100%;text-align:center;font-weight:bold;text-shadow:0px 0px 5px rgba(0,0,0,0.8);font-size:24px;font-size:1.5rem;text-align:center;color:#fff;}
.cont-video .btn-wrap{width:100%;text-align:center;position:relative;}
.cont-video .btn-wrap.start{}
.cont-video .btn-wrap.download{}
.cont-video .btn-wrap .btn-start{width:210px;height:60px;line-height:45px;}
.cont-video .btn-wrap .btn-download{
    display:inline-block;
    box-sizing:border-box;
    margin: 0;
    padding: 9.5px 5px;
    align-items: flex-start;
    vertical-align: top;
    font-size:16px; font-size:1rem;
    line-height:34px;
    font-weight:bold;
    text-align: center;
    cursor: pointer;
    width:210px;height:60px;background:rgba(0,0,0,0.52);color:#df8104;border:4px solid #df8104;
}
.cont-video .btn-wrap .btn-download:hover{background:rgba(0,0,0,0.8);color:#fff;border:4px solid #df8104;}

/* 메인 컨텐츠 카드섹션 공통영역 */
.card-wrap{position:relative;width:100%;min-height:700px;margin:0 auto;background:url(/static/images/main/bg-card-wrap.jpg) center no-repeat;background-size:cover;}
.main-card{z-index:8000;position:absolute;width:auto;max-width:1200px;left:50%;margin:/* -165px */-22vw 0 0 -600px;}
.main-card .row-w{margin-left:auto;margin-right:auto;width:100%;max-width:1200px !important;}
.main-card .card{margin-bottom:11px;}
/*카드 형태*/
.card{float:left;overflow:hidden;-moz-transition: all .2s ease-in;-o-transition: all .2s ease-in;-webkit-transition: all .2s ease-in;transition: all .2s ease-in;}
.wrap-announce, .wrap-event,
.wrap-update, .wrap-maintenance, .wrap-item,
.wrap-media,.wrap-ranking, .wrap-facebook{z-index:20;-moz-transition: all .2s ease-in;-o-transition: all .2s ease-in;-webkit-transition: all .2s ease-in;transition: all .2s ease-in;}
.wrap-announce{box-sizing:border-box;width:360px;height:330px;width:calc(33.7% - 13px);height:22rem;box-shadow:0px 0px 20px rgba(0,0,0,0.8);border:1px solid #232323;}
.wrap-event{box-sizing:border-box;width:730px;height:330px;/*width:calc(66.3%);*/width:100%;height:22rem;box-shadow:0px 0px 20px rgba(0,0,0,0.8);border:1px solid #232323;}
.wrap-update{box-sizing:border-box;width:360px;height:330px;width:calc(33.7% - 13px);height:22rem;box-shadow:0px 0px 20px rgba(0,0,0,0.8);border:1px solid #232323;}
.wrap-maintenance{box-sizing:border-box;width:360px;height:330px;width:calc(33.7% - 13px);height:22rem;box-shadow:0px 0px 20px rgba(0,0,0,0.8);border:1px solid #232323;}
.wrap-item{box-sizing:border-box;width:360px;height:330px;width:calc(33.7% - 12px);height:22rem;box-shadow:0px 0px 20px rgba(0,0,0,0.8);border:1px solid #232323;background:#161616;}
.wrap-item:hover{ background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.2) 50%, rgba(0, 0, 0, 0.5) 70%, rgba(0, 0, 0, 1) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.2) 50%, rgba(0, 0, 0, 0.5) 70%, rgba(0, 0, 0, 1) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.2) 50%, rgba(0, 0, 0, 0.5) 70%, rgba(0, 0, 0, 1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#000000', GradientType=0); /* IE6-9 */
    -moz-transition: all .2s ease-in;-o-transition: all .2s ease-in;-webkit-transition: all .2s ease-in;transition: all .2s ease-in;
}
.wrap-media{box-sizing:border-box;width:360px;height:330px;width:calc(33.7% - 13px);height:22rem;box-shadow:0px 0px 20px rgba(0,0,0,0.8);border:1px solid #232323;}
.wrap-ranking{box-sizing:border-box;width:360px;height:330px;width:calc(33.7% - 13px);height:22rem;box-shadow:0px 0px 20px rgba(0,0,0,0.8);border:1px solid #232323;}
.wrap-facebook{display:none;box-sizing:border-box;width:360px;height:330px;width:calc(33.7% - 12px);height:22rem;box-shadow:0px 0px 20px rgba(0,0,0,0.8);border:1px solid #232323;}
/* 카드 마진 */
.wrap-event{margin-right:0;}
.wrap-announce{margin-right:12px;}
.wrap-update{margin-right:12px;}
.wrap-item{margin-right:0;}

.wrap-maintenance{margin-right:12px;}
.wrap-media{margin-right:12px;}
.wrap-ranking{margin-right:0px;}
/*.wrap-facebook{margin-right:0;}*/

/*카드 컨텐츠*/
/*카테고리, 제목*/
.card dl{z-index:30;position:relative;box-sizing:border-box;border:1px solid #232323;width:100%;height:100%;display:inline-block;}
.card dl a dt{z-index:30;position:absolute;padding: 0 23px;bottom:70px;bottom:4.375rem;font-weight:bold;font-size:30px;font-size:1.875rem;text-shadow:0px 0px 5px rgba(0,0,0,0.3);color:#ac6509;-moz-transition: all .2s ease-in;-o-transition: all .2s ease-in;-webkit-transition: all .2s ease-in;transition: all .2s ease-in;}
.card dl a dd{z-index:30;position:absolute;padding: 0 23px;bottom:24px;bottom:1.5rem;height:40px;height:2.5rem;font-weight:normal;font-size:18px;font-size:1.2rem;line-height:18px;line-height:1.25rem;color:#fff;text-shadow:0px 0px 5px rgba(0,0,0,0.3);-moz-transition: all .2s ease-in;-o-transition: all .2s ease-in;-webkit-transition: all .2s ease-in;transition: all .2s ease-in;}
.card .bg-gradient{position:absolute;left:-1px;top:0;width:100%;height:100%;z-index:29;display:none;}
.card .bg-gradient{
    display:inline-block;
    box-sizing:border-box;
    width:calc(100% + 2px);
    height:calc(100% + 2px);
    border-bottom:3px solid #000;
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+50,000000+98&0+50,0.65+100 */
    background: -moz-linear-gradient(top,  rgba(0,0,0,0) 50%, rgba(0,0,0,0.62) 98%, rgba(0,0,0,0.65) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top,  rgba(0,0,0,0) 50%,rgba(0,0,0,0.62) 98%,rgba(0,0,0,0.65) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom,  rgba(0,0,0,0) 50%,rgba(0,0,0,0.62) 98%,rgba(0,0,0,0.65) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#a6000000',GradientType=0 ); /* IE6-9 */

    -moz-transition: all .2s ease-in;-o-transition: all .2s ease-in;-webkit-transition: all .2s ease-in;transition: all .2s ease-in;
}
.card dl a img{z-index:25;position:absolute;
    width:100%;height:100%;margin:auto;right:0;left:0;top:0;bottom:0;-moz-transition: all .2s ease-in;-o-transition: all .2s ease-in;-webkit-transition: all .2s ease-in;transition: all .2s ease-in;}
.card dl.facebook a dt img{width:inherit;height: 73px;margin-top:0;}
.wrap-facebook.card dl a dd .icon img{margin-top:4px;width:24px;height:24px;width:1.5rem;height:1.5rem;}
/* 마우스 호버 효과 */
.card:hover dl a dt{bottom:100px;bottom:6.25rem;moz-transition: all .2s ease-in;-o-transition: all .2s ease-in;-webkit-transition: all .2s ease-in;transition: all .2s ease-in;}
.card:hover dl a dd{bottom:54px;bottom:3.375rem;-moz-transition: all .2s ease-in;-o-transition: all .2s ease-in;-webkit-transition: all .2s ease-in;transition: all .2s ease-in;}
.card:hover .bg-gradient{
    display:inline-block;
    box-sizing:border-box;
    border-bottom:3px solid #df8104;
    /*그라디언트*/
    background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.2) 50%, rgba(0, 0, 0, 0.5) 70%, rgba(0, 0, 0, 1) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.2) 50%, rgba(0, 0, 0, 0.5) 70%, rgba(0, 0, 0, 1) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.2) 50%, rgba(0, 0, 0, 0.5) 70%, rgba(0, 0, 0, 1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#000000', GradientType=0); /* IE6-9 */
    -moz-transition: all .2s ease-in;-o-transition: all .2s ease-in;-webkit-transition: all .2s ease-in;transition: all .2s ease-in;
}
/* 아이템 영역 */
.wrap-item h1{padding-left:16px;padding-left:1rem;padding-top:16px;padding-top:1rem;font-size:20px; font-size:1.875rem;color:#ac6509;}


/* 미디어 영역 */
.wrap-media .btn-play{position:absolute;z-index: 30;top:107.5px;left:50%;margin-left:-50px;margin-left:-3.125rem;display:inline-block;
    width:114px;height:114px;width:7.125rem;height:7.125rem;background:url(/static/images/main/btn-play.png) 0 0 no-repeat;background-size:contain;-moz-transition: all .2s ease-in;-o-transition: all .2s ease-in;-webkit-transition: all .2s ease-in;transition: all .2s ease-in;}
.wrap-media:hover .btn-play{top:87.5px;}

.bounceInLeft {animation-name:bounceInLeft; animation-duration:1s;
    -webkit-animation-name:bounceInLeft; -webkit-animation-duration:1s;
}
/* 애니메이션  animationOn */
@-ms-keyframes animationOn {
    0% {opacity:0;
        -ms-transform:scale(0);
    }
    100% {opacity:1;
        -ms-transform:scale(1);
    }
}
@-webkit-keyframes animationOn {
    0% {opacity:0;
        -webkit-transform:scale(0);
    }
    100% {opacity:1;
        -webkit-transform:scale(1);
    }
}
@-moz-keyframes animationOn {
    0% {opacity:0;
        -moz-transform:scale(0);
    }
    100% {opacity:1;
        -moz-transform:scale(1);
    }
}
@-o-keyframes animationOn {
    0% {opacity:0;
        -o-transform:scale(0);
    }
    100% {opacity:1;
        -o-transform:scale(1);
    }
}
@keyframes animationOn {
    0% {opacity:0;
        transform:scale(0);
    }
    100% {opacity:1;
        transform:scale(1);
    }
}
/* 애니메이션  animationOff */
@-ms-keyframes animationOff {
    0% {opacity:1;
        -ms-transform:scale(1);
    }
    100% {opacity:0;
        -ms-transform:scale(0);
    }
}
@-webkit-keyframes animationOff {
    0% {opacity:1;
        -webkit-transform:scale(1);
    }
    100% {opacity:0;
        -webkit-transform:scale(0);
    }
}
@-moz-keyframes animationOff {
    0% {opacity:1;
        -moz-transform:scale(1);
    }
    100% {opacity:0;
        -moz-transform:scale(0);
    }
}
@-o-keyframes animationOff {
    0% {opacity:1;
        -o-transform:scale(1);
    }
    100% {opacity:0;
        -o-transform:scale(0);
    }
}
@keyframes animationOff {
    0% {opacity:1;
        transform:scale(1);
    }
    100% {opacity:0;
        transform:scale(0);
    }
}
/* 애니메이션  bounceInLeft */
@-ms-keyframes bounceInLeft {
    0% { left:-50%; }
    50% { left:30%; }
    100% { left:0%; }
}
@-webkit-keyframes bounceInLeft {
    0% { left:-50%; }
    50% { left:30%; }
    100% { left:0%; }
}
@-moz-keyframes bounceInLeft {
    0% { left:-50%; }
    50% { left:30%; }
    100% { left:0%; }
}
@-o-keyframes bounceInLeft {
    0% { left:-50%; }
    50% { left:30%; }
    100% { left:0%; }
}
@keyframes bounceInLeft {
    0% { left:-50%; }
    50% { left:30%; }
    100% { left:0%; }
}
/* ./ 동영상 팝업  끝*/

/*페이스북*/
.wrap-facebook.card dl a dt{top:0;}
.wrap-facebook.card dl a dd{right:0;text-align:right;font-weight:bold;font-size:16px;font-size:1rem;text-transform: uppercase;color:#f89c22;}
.wrap-facebook.card dl a dd .icon{display:inline-block;position:relative;width:24px;height:24px;width:1.5rem;height:1.5rem;margin-right:6px;}
.wrap-facebook.card dl a dd .icon img{margin-top:4px;width:100%;}

/* 아이템 이름 */
.wrap-item h2{position:absolute;left:0px;left:0rem;margin-bottom:70%;overflow:hidden;width:100%;font-size:20px; font-size:1.875rem;}
/* 아이콘 */
.wrap-item h2 img.icon{float:left;margin-top:0;padding-bottom:0;}
/* 이름 */
.wrap-item h2 .item-name{float:left;font-size:22px;font-size:1.2rem;color:#fff;padding:8px 0px 0px 7px;}
/*아이템 테이블*/

/* //////////////////////////////////////// */
/* //////// 슬릭 공통 Slick common //////// */
* {vertical-align: bottom;}
.slick-dots{position: absolute;z-index:30;width:100%;text-align: center;bottom: 2rem;}
.slick-prev:before, .slick-next:before {content:none;}
.slick-prev{position: absolute;display:block !important; width:19px;height:38px;left:16px;left:1rem;top:50%;margin-top:-10px;
    background:url(/static/images/slide/arrow-event-left.png);}
.slick-next{position: absolute;display:block !important; width:19px;height:38px;right:16px;right:1rem;top:50%;margin-top:-10px;
    background:url(/static/images/slide/arrow-event-right.png);}
.slick-prev:hover,
.slick-prev:focus {background: url(/static/images/slide/arrow-event-left.png);}
.slick-next:hover,
.slick-next:focus {background: url(/static/images/slide/arrow-event-right.png);}
.slick-dots li button::before {content:''; display:inline-block; width:18px; height:18px; background:url(/static/images/slide/pager-off.png)no-repeat center / contain;}
.slick-dots li.slick-active button:before {background:url(/static/images/slide/pager-on.png)no-repeat center / contain;}
.slick-dots li:hover button:before, .slick-dots li:active button:before {background:url(/static/images/slide/pager-on.png)no-repeat center / contain;}


/* //////////////////////////////////////// */
/* ////////// 메인 배너 슬라이드 ////////// */
/* //////////////////////////////////////// */
.wrap-event{height:22.25rem;overflow:hidden;box-sizing:border-box;}
.wrap-event:hover{border-bottom:2px solid #ff9900;}
.wrap-event .slick-main-banner#mainBannerSlick {box-sizing:border-box; }
.wrap-event .slick-main-banner .slick-slide{box-sizing:border-box;position:relative; width:auto;padding:0;margin:0;border:0;display: table-cell;
    float: none;border:none;vertical-align: bottom;}
.wrap-event .slick-main-banner .slick-slide img.event-img{width:100%;}
.wrap-event .slick-main-banner .slick-slide img.event-img.big{display:block;height:100%; min-width:100%;}
.wrap-event .slick-main-banner .slick-slide img.event-img.small{display:none;}

.wrap-event .e-tit {position: absolute;left: 23px;top:17.5rem;width: calc(100% - 46px);text-align:left;
    font-size: 18px;font-size: 1.2rem;line-height:28px;color:#fff;-moz-transition: all .2s ease-in;-o-transition: all .2s ease-in;-webkit-transition: all .2s ease-in;transition: all .2s ease-in; }
.wrap-event .e-tit img.e-tit-img{width:69px;height:23px;}
.wrap-event:hover .e-tit{top:16.5rem;}


/* //////////////////////////////////////// */
/* ///////// 메인 아이템 슬라이드 ///////// */
/* //////////////////////////////////////// */
.wrap-item:hover{background:#131313;border-bottom:2px solid #ff9900;}
.wrap-item .tbl-item{position:absolute;margin-left:-16px;margin-left:-154.5px;left:50%;padding-bottom:30px;bottom:-15rem;}
.wrap-item .tbl-item th{font-weight:normal;color:#696969;text-align:left;font-size:14px;font-size:0.875rem;font-family:'hooge0555',sans-serif;text-transform: uppercase;}
.wrap-item .tbl-item td{font-weight:normal;color:#f89c22;text-align:left;font-size:14px;font-size:0.875rem;font-family:'hooge0555',sans-serif;text-transform: uppercase;}

/* 메인 아이템 슬라이더 - slick */
.item-cont {float: left;position: relative; list-style: none;/*width: 390px;*/width:100%;}
.wrap-item .slick-dots {bottom: auto;top: 14rem;padding-top: 25px;}
.wrap-item .slick-main-item .slick-caption span{ position: relative; display: block;padding-left:10px;color: #fff;font-family: Arial;font-size: 18px;font-size: 1.2rem;padding: 11px 32px;font-weight: normal;text-shadow: 0px 0px 3px rgba(0,0,0,0.95);}
.wrap-item .slick-main-item  .slick-caption span {padding-left: 10px;}
.wrap-item .slick-main-item {background:#161616;}
.wrap-item:hover  .slick-main-item{background:#161616;}
.wrap-item:hover{background:#131313;border-bottom:2px solid #ff9900;}

.wrap-item  .slick-main-item img.item{/*width:100%;*/box-sizing:border-box;height:22rem;margin:-54px auto 0;}
.wrap-item  .slick-main-item .slick-caption img {width:unset;}
.wrap-item  .slick-main-item .slick-caption {display:inline-block;box-sizing:border-box;position: absolute;left: 20px;left:1.25rem;height:100%;font-weight:bold;width:100%;height:100%;border:none;background:transparent;}
.wrap-item  .slick-main-item:hover .slick-caption {z-index:100;box-sizing:border-box;position: absolute;left:20px;left:1.25rem;display:inline-block;border:none;background:transparent;}
.wrap-item .slick-caption{font-family:'hooge0555',sans-serif;}

.wrap-item .tbl-item{position:absolute;margin-left:-16px;margin-left:-154.5px;left:50%;padding-bottom:30px;bottom:-15rem;}
.wrap-item .tbl-item th{font-weight:normal;color:#696969;text-align:left;font-size:14px;font-size:0.875rem;font-family:'hooge0555',sans-serif;text-transform: uppercase;}
.wrap-item .tbl-item td{font-weight:normal;color:#f89c22;text-align:left;font-size:14px;font-size:0.875rem;font-family:'hooge0555',sans-serif;text-transform: uppercase;}

.slick-main-item .slick-caption {position: absolute;z-index: 100;bottom: 0;left: 0;display: inline-block;box-sizing: border-box;width: 100%;height: 110px;line-height: 1rem;    border-bottom: 7px solid #000;
    background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.2) 50%, rgba(0, 0, 0, 0.5) 70%, rgba(0, 0, 0, 1) 100%);
    background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.2) 50%, rgba(0, 0, 0, 0.5) 70%, rgba(0, 0, 0, 1) 100%);
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.2) 50%, rgba(0, 0, 0, 0.5) 70%, rgba(0, 0, 0, 1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#000000', GradientType=0);
    -moz-transition: all .2s ease-in;-o-transition: all .2s ease-in;-webkit-transition: all .2s ease-in;transition: all .2s ease-in;}



/* //////////////////////////////////////// */
/* ////////// 메인 랭킹 슬라이드 ////////// */
/* //////////////////////////////////////// */
.wrap-ranking {position:relative;}
.wrap-ranking h1 {padding-left: 23px;padding-left: 1.438rem;padding-top: 9px;padding-top: 1.188rem;font-size: 26px;font-size: 1.625rem;color: #f89c22; text-shadow: 0px 0px 3px rgba(0,0,0,0.95);}
.wrap-ranking h1 span.small{font-size:16px;font-size:1rem;}
table .show-caption{overflow:hidden;position:relative;min-height:20px;margin-bottom:10px;padding-left: 23px;padding-left: 1.438rem;padding-right: 23px;padding-right: 1.438rem;text-align:left; font-size:18px;font-size:1.125rem;color:#fff;/* #f89c22; */}
.wrap-ranking .tbl-ranking{width:100%;margin-top:1.5rem;}
.wrap-ranking .tbl-ranking th{border:none;height:46px;line-height:46px;font-weight:bold;font-size:1rem;text-align:center;color:#f89c22;background:url(/static/images/main/bg-th.gif) 0 0 repeat-x}
.wrap-ranking .tbl-ranking td{border:none;height:30px;line-height:30px;font-weight:bold;font-size:1rem;text-align:center;color:#696969;}
.wrap-ranking h2.comming{position:absolute;z-index:300;box-sizing: border-box;left:50%;top:0;width:100%;height:100%;padding:35% 0 65%;text-align:center;margin-left:-50%;font-size:32px;font-size:2rem;color:rgba(255,255,255,0.2);font-style:italic;opacity:0.98;
    -ms-animation-duration: 5s;
    -webkit-animation-duration: 5s;
    animation-duration: 5s;
    -ms-animation-delay: 0s;
    -webkit-animation-delay: 0s;
    animation-delay: 0s;
    -ms-animation-iteration-count: infinite;
    -webkitanimation-iteration-count: infinite;
    animation-iteration-count: infinite;
    background:url(/static/images/main/cover-ranking.png) center no-repeat; background-size:cover;
}
/* 랭킹 slick */
.wrap-ranking .slick-dots {bottom: -35px;}
.wrap-ranking .slick-dots li {width:12px; height:12px;}
.wrap-ranking .slick-dots li button {padding:0;}
.wrap-ranking .slick-dots li button::before {width:12px; height:12px; background:url(/static/images/slide/pager-off.png)no-repeat center / contain;}
.slick-dots li.slick-active button:before {background:url(/static/images/slide/pager-on.png)no-repeat center / contain;}
.slick-dots li:hover button:before, .slick-dots li:active button:before {background:url(/static/images/slide/pager-on.png)no-repeat center / contain;}




@media screen and (max-width:1530px){
    .main-card{margin: -140px 0 0 -600px;}
    .wrap-item .tbl-item{margin-left:-118px;left:50%;}
}
@media screen and (max-width:1480px){
    .main-card{left: inherit;margin: -26vw 2% 0;width: 96%;max-width: 96% !important;}
    .wrap-announce, .wrap-update, .wrap-maintenance, .wrap-item, .wrap-media, .wrap-ranking, .wrap-facebook {width:calc(33.7% - 13px);height:22rem;}
    .wrap-event{width:100%;height: 25.5vw;}
    .wrap-event .slick-main-banner .slick-slide img.event-img{min-width:100%; width:auto;height:100%;}
    /* 랭킹 슬라이더  */
    table .show-caption{line-height: 30px;margin-bottom:0;}
    .wrap-ranking .tbl-ranking{margin-top:0.5rem;}
    .wrap-ranking .tbl-ranking th{height:30px;line-height:30px;}
    .wrap-ranking .tbl-ranking td{height:28px;line-height:28px;}
    .wrap-ranking .slick-dots  {bottom: -25px;}
}

@media screen and (max-width:1280px){
    .video-wrap #video{height:100%;}
    .main-card .row-w{max-width:94%;margin:0 auto;}

    .wrap-item .tbl-item{margin-left:-108.5px;left:50%;}
    table .show-caption {line-height: 26px;}
    .wrap-ranking .slick-dots {bottom: /*-15*/ -31px;}
    /* 랭킹 슬라이더 */
    .btn-more, .btn-more:visited{top:12px;}
}

@media screen and (max-width:1024px){
    
    .bg-video{display:none;}
    .cont-video .btn-wrap.start{display:none;}
    .main-card {margin: -80px 2% 0;}
    .card-wrap{min-height:1080px;padding-bottom:11.25rem;}

    .wrap-announce{box-sizing:border-box;width:calc(50% - 6px);}
    .wrap-announce.card dl a img{height:unset;max-height:unset;bottom:unset;}
    .wrap-event{box-sizing:border-box;width:calc(100%);height:auto}
    .slick-dotted.slick-slider {margin-bottom:0;}

    .wrap-update{box-sizing:border-box;width:calc(50% - 6px);height:22rem}
    .wrap-maintenance{box-sizing:border-box;width:calc(50% - 6px);height:22rem;}
    .wrap-item{box-sizing:border-box;width:calc(50% - 6px);height:22rem;}

    .wrap-media{box-sizing:border-box;width:calc(50% - 6px);height:22rem;}
    .wrap-ranking{box-sizing:border-box;width:calc(50% - 6px);height:22rem;}
    .wrap-facebook{box-sizing:border-box;width:calc(50% - 6px);height:22rem;}
    /* 카드 마진 */
    .wrap-event{margin-right:0;}


    .wrap-announce{margin-right:12px;}
    .wrap-update{margin-right:0;}

    .wrap-item{margin-right:12px;}
    .wrap-maintenance{margin-right:0;}

    .wrap-media{margin-right:12px;}
    .wrap-ranking{margin-right:0;}

    .wrap-facebook{margin-right:0;}

    .wrap-media .btn-play{top:25%;}

    /* 메인 랭킹  블러 */
    .wrap-item .tbl-item{margin-left:-183.5px}
    .wrap-item .tbl-item th{font-size:24px;font-size: 1.5rem;}
    .wrap-item .tbl-item td{font-size:24px;font-size: 1.5rem;}

    /* 메인 이벤트 슬라이더 */
    .wrap-event .e-tit {bottom: 2rem;top: inherit;}

    /* 메인 아이템 슬라이더 */
    .wrap-item .tbl-item{bottom:-15rem;}


}
/* 960 */
@media screen and (max-width:960px){
}
/* 900 */
@media screen and (max-width:900px){
    /* 메인 랭킹  블러 */
    .wrap-ranking h2.comming{padding-top:30%;}
    .wrap-item .tbl-item{margin-left:-162.5px}
    .wrap-item .tbl-item th{font-size:20px;font-size: 1.25rem;}
    .wrap-item .tbl-item td{font-size:20px;font-size: 1.25rem;}
}

/*800 */
@media screen and (max-width:800px){
    .main-card{margin:30px 2% 0;}
    .card-wrap {
        min-height: 1200px;
    }
}
/* 768 736*/
@media screen and (max-width:768px) {
    #content{min-height: 130vh;}
    #video-obj{min-width: 150%;
        min-height: 150%;
        left: -25%;
        background:url(/static/images/main/poster.png) 0 0 no-repeat; background-size:cover;
    }
    .visual .bg-video{height:150%;}
    .cont-video .img-wrap{width:230px;}
    .cont-video p{padding:0 1rem;line-height: 2.5rem;word-break:break-word;}
    .wrap-ranking .slick-dots {bottom: -25px;}
}
/*  667 640 */
@media screen and (max-width:667px){

    /*.card-wrap{min-height:2202px;padding-bottom: 100px;padding-bottom:6.25rem;}
    .wrap-announce{width:100%;}
    .wrap-event{width:100%;}
    .wrap-item{width:100%;}
    .wrap-update{width:100%;}
    .wrap-maintenance{width:100%;}
    .wrap-media{width:100%;height:22rem;}
    .wrap-ranking{width:100%;height:22rem;}
    .wrap-facebook{width:100%;height:22rem;}

    !* 카드 마진 *!
    .wrap-announce{margin-right:0;}
    .wrap-event{margin-right:0;}

    .wrap-update{margin-right:0;}
    .wrap-maintenance{margin-right:0;}

    .wrap-item{margin-right:0;}
    .wrap-media{margin-right:0;}

    .wrap-ranking{margin-right:0;}
    .wrap-facebook{margin-right:0;}

    .wrap-media .btn-play{top:25%;}

    .wrap-announce.card dl a img, .wrap-event.card dl a img, .wrap-update.card dl a img,
    .wrap-maintenance.card dl a img, .wrap-item.card dl a img,	.wrap-media.card dl a img,
    .wrap-ranking.card dl a img, .wrap-facebook.card dl a img{height: unset;max-height: unset;bottom: unset;}

    !* 메인 랭킹  블러 *!
    .wrap-ranking h2.comming{padding-top:10rem;}

    !* 메인 아이템 슬라이더 *!
    .wrap-item .tbl-item{bottom:-15rem;}

    .wrap-item .tbl-item{margin-left:-150px;left:50%}
    .wrap-item .tbl-item th{font-size:1.2rem;}*/

}
/* 568 533 */
@media screen and (max-width:640px){
    /*.wrap-ranking .bx-wrapper .bx-pager {bottom: 25px;}*/
}
@media screen and (max-width:568px){
    .wrap-ranking .slick-dots {top:inherit;}

    /*.wrap-event .slick-dots {top: 35%;}*/
    .wrap-event .slick-prev, .wrap-event .slick-next{top: inherit;bottom: 45%;}
    .wrap-event .slick-main-banner .slick-slide img.event-img.big{display: none;}
    .wrap-event .slick-main-banner .slick-slide img.event-img.small{display:block;height: 100%;}
    .wrap-event .e-tit {bottom: 4vw;}
    .wrap-event:hover .e-tit {top:inherit;bottom:9vw;}

    /*    .wrap-announce{}
        .wrap-event{width:100%;}
        .wrap-item{width:100%;}
        .wrap-update{width:100%;}
        .wrap-maintenance{width:100%;}
        .wrap-media{width:100%;height:22rem;}
        .wrap-ranking{width:100%;height:22rem;}
        .wrap-facebook{width:100%;height:22rem;}*/
    .wrap-announce, .wrap-update, .wrap-maintenance, .wrap-item, .wrap-media, .wrap-ranking, .wrap-facebook {width:100%;height: 32rem;}
    .wrap-event{ height: 72.5vw;}


    /* 카드 마진 */
    .wrap-announce{margin-right:0;}
    .wrap-event{margin-right:0;}

    .wrap-update{margin-right:0;}
    .wrap-maintenance{margin-right:0;}

    .wrap-item{margin-right:0;}
    .wrap-media{margin-right:0;}

    .wrap-ranking{margin-right:0;}
    .wrap-facebook{margin-right:0;}

    .wrap-media .btn-play{top:25%;}

    .wrap-announce.card dl a img, .wrap-event.card dl a img, .wrap-update.card dl a img,
    .wrap-maintenance.card dl a img, .wrap-item.card dl a img,	.wrap-media.card dl a img,
    .wrap-ranking.card dl a img, .wrap-facebook.card dl a img{height: 100%; max-height: unset;bottom: unset;}

    /* 메인 랭킹  블러 */
    .wrap-ranking h2.comming{padding-top:10rem;}

    /* 메인 아이템 슬라이더 */
    .wrap-item .slick-dotted.slick-slider{height:100%;}
    .wrap-item .tbl-item{bottom:-15rem;margin-left:-150px;left:50%}
    .wrap-item .tbl-item th{font-size:1.2rem;}
    .wrap-item .slick-dots {top: inherit;bottom: 6rem;}
    .wrap-item .slick-main-item img.item {box-sizing: border-box;height: 100%;margin: -54px auto 0;}

    /* ///// */

    .card-wrap{min-height: 2600px;margin-top: 27%;padding-bottom:6.25rem;}
    .cont-video {padding-top: 14.5%;}
    .cont-video p{line-height:1.2;}
    .cont-video .img-wrap{width:160px;}
    .cont-video .btn-wrap .btn-download{height:40px;width: auto;padding:0 24px;}

    /* 메인 랭킹 슬라이더 */
    .wrap-ranking .tbl-ranking th{height:30px;line-height:33px;}
    .wrap-ranking .tbl-ranking td{height:24px;line-height:24px;}

}
/* 533 */
@media screen and (max-width:533px){

    /* 메인 아이템 슬라이더 */
    .wrap-item .tbl-item{bottom:-15rem;}
    .wrap-item .tbl-item{bottom:-15rem;}
    .wrap-item .tbl-item th{font-size:1.25rem;height: 1.5rem;}
    .wrap-item .tbl-item td{font-size:1.25rem;height: 1.5rem;}
}
/* 480 */
@media screen and (max-width:480px){
    .card-wrap {min-height: 2500px;}
}
@media screen and (max-width:460px){
    .cont-video .btn-wrap.btn-start{height:40px;font-size:1.25rem;}
    .cont-video .btn-wrap.btn-download{height:40px;font-size:1.25rem;line-height:13px;}

    /* 메인 아이템 슬라이더 */
    .wrap-item .tbl-item{bottom:-15rem;}
}
@media screen and (max-width:414px){
    /* 이벤트 슬라이더 */
    .wrap-event .slick-main-banner .slick-slide img.event-img.small{height:29rem;}
    .wrap-event .slick-prev, .wrap-event .slick-next {top: 40%;}
    .wrap-event .slick-dots {top: 54%;}
}
@media screen and (max-width:360px){
    .cont-video .btn-wrap{margin-top:10px;}

}
@media screen and (max-width:320px){
    /* 이벤트 슬라이더 */
    .wrap-event .slick-main-banner .slick-slide img.event-img.small{height:25rem;}
    /*.slick-prev, .slick-next{top:40%;}*/
    .wrap-event .slick-dots {top: 63%;}

    .cont-video .img-wrap{width:120px;}
}

#isLauncher .main-card {margin:-20vw auto 0 -600px;}

@media screen and (max-width:1480px) {
    #isLauncher .main-card {
        margin: -25vw 2% 0;
    }
}

@media screen and (max-width:1300px) {
    #isLauncher .main-card {
        margin: -26vw 2% 0;
    }
}

