@charset "UTF-8";

/*    
================================================================================================================
NEWS
================================================================================================================
*/
#news-slider{width:100%; max-width:1300px; margin:0 auto; padding:0;}
#news-slider .news{
width:100%;
color:#fff;
background:rgba(0,0,0,.9);
border:1px solid #01eff2;
margin:0 auto;}
#news-slider .news p{width:100%;}
#news-slider .news img{width:100%; border:1px solid #fff;}
    
/*전체 링크*/
#news-slider a > .news{display:block; color:#fff; transition:all 0.3s ease;}
#news-slider a:hover > .news{opacity:0.7;}

/*날짜·갱신 타이틀 영역*/
#news-slider .news p:first-child{
background-color:rgba(0,74,76,.9);
background-image:url("https://seo381137-seo381137.ktcdn.co.kr/infinitas/img/news/slide/bg01.png");
background-repeat:no-repeat;
background-size:cover;
background-position:top left;
padding:3px 10px;
margin-bottom:10px;}
#news-slider .news p:first-child span{
display:block;
font-weight:bold;
letter-spacing:1px;
text-shadow:0px 0px 2px rgba(0,0,0,0.5),-1px -1px 2px rgba(0,0,0,0.5),1px 1px 2px rgba(0,0,0,0.5);}
#news-slider .news p:first-child span:first-child{font-size:11px;}
#news-slider .news p:first-child span:nth-child(2){font-size:12px; line-height:140%;}

/*이미지 영역*/
#news-slider .news p:nth-child(2){padding:0 5px;}
@media screen and (max-width:640px){#news-slider .news p:nth-child(2){padding:0 30px;}}

/*텍스트 영역*/
#news-slider .news p:nth-child(3){font-size:12px; padding:10px;}

/*    
================================================================================================================
INFORMATION
================================================================================================================
*/
#info{
width:100%;
padding:30px 0;
margin:0 auto;}

#info-inner{
width:100%;
max-width:980px;
color:#fff;
background-color:rgba(0,0,0,.95);
padding:20px;
margin:0 auto;}

@media screen and (max-width:640px){#info-inner{padding:10px;}}

/*타이틀 메뉴*/
#info-top{display:flex; justify-content:space-between; align-items:center;}
#info-top #info-logo img{width:100%; max-width:300px;}
#info-top ul#info-menu{display:flex;}
#info-top ul#info-menu li{flex:1;}
#info-top ul#info-menu li#info02{display:none;}
#info-top ul#info-menu li img{width:100%; max-width:80px;}
#info-top ul#info-menu li img:hover{cursor:pointer;}

@media screen and (max-width:640px){
#info-top{flex-wrap:wrap;}
#info-top ul#info-menu{width:90%; margin:0 auto;}}

/*인포 내용*/
#info-main{padding:0 20px;}
#info-main .cat{display:flex; position:relative; border-bottom:1px solid #00696a; /*align-items:center;*/ flex-wrap:wrap; padding:20px; margin:0 auto;}
#info-main .cat p{font-size:13px;}
#info-main .cat p:first-child{width:100px; color:#00fcff; font-weight:bold; letter-spacing:1px; /*text-align:center;*/}
#info-main .cat p:nth-child(2){width:calc(100% - 100px); font-size:12px; line-height:20px; padding:0 0 0 20px;}
#info-main .cat p:nth-child(2) a{display:inline-block; color:#00fcff; padding:3px; margin:0 3px;}
#info-main .cat p:nth-child(2) a:hover{text-decoration:underline;}

#info-main .cat p:nth-child(2) a.btn{
border:1px solid #00fcff;
border-radius:5px;
padding:5px 10px;
margin:5px 0;
-webkit-transition:all 0.3s ease;
-moz-transition:all 0.3s ease;
transition:all 0.3s ease;}
#info-main .cat p:nth-child(2) a.btn:hover{text-decoration:none; color:#000; background-color:#00fcff;}

#info-main .cat p:nth-child(2) img{width:100%; max-width:740px;}
#info-main .cat p:nth-child(2) strong{
display:block;
background: #01ebf6;
background: -moz-linear-gradient(left, #01ebf6 0%, #002b6d 100%);
background: -webkit-linear-gradient(left, #01ebf6 0%,#002b6d 100%);
background: linear-gradient(to right, #01ebf6 0%,#002b6d 100%);
font-size:16px;
text-shadow:1px 1px 0 rgba(0,0,0,0.6) , 0 1px 0 rgba(0,0,0,0.6) , 1px 0 0 rgba(0,0,0,0.6) , 2px 2px 0 rgba(0,0,0,0.6) , 0 0 3px rgba(0,0,0,0.6);
padding:5px 10px;
margin:0 auto 10px;}
#info-main .cat p:nth-child(2) b{display:block; font-size:14px; color:#ffe302; margin:0 auto 5px;}
#info-main .cat p:nth-child(2) span.indent{display:block; padding:5px 0 10px 20px;}
#info-main .cat p:nth-child(2) .yellow{color:#ffe302;}
#info-main .cat p:nth-child(2) .red{color:#ff004c;}

@media screen and (max-width:640px){
#info-main{padding:0;}
#info-main .cat p:first-child{width:100%;}
#info-main .cat p:nth-child(2){width:100%; padding:10px 0 0;}}

@media screen and (max-width:400px){
#info-main .cat{padding:20px 10px;}
#info-main .cat p:nth-child(2) strong{font-size:14px;}
#info-main .cat p:nth-child(2) b{font-size:13px;}
#info-main .cat p:nth-child(2) span.indent{padding:5px 0 10px 10px;}
#info-main .cat p:nth-child(2) a.btn{display:block; text-align:center;}}

/*인포 내용 - 종류*/
@media screen and (min-width:641px){
#info-main .cat p:first-child::after{display:block; content:""; height:50px; background-size:100%;}
#info-main .cat.info01 p:first-child::after{background-image:url( "https://seo381137-seo381137.ktcdn.co.kr/infinitas/img/news/info/icn01.png");}
#info-main .cat.info02 p:first-child::after{background-image:url( "https://seo381137-seo381137.ktcdn.co.kr/infinitas/img/news/info/icn02.png");}
#info-main .cat.info03 p:first-child::after{background-image:url( "https://seo381137-seo381137.ktcdn.co.kr/infinitas/img/news/info/icn03.png");}
#info-main .cat.info04 p:first-child::after{background-image:url( "https://seo381137-seo381137.ktcdn.co.kr/infinitas/img/news/info/icn04.png");}
#info-main .cat.info05 p:first-child::after{background-image:url( "https://seo381137-seo381137.ktcdn.co.kr/infinitas/img/news/info/icn05.png");}}
@media screen and (max-width:640px){
#info-main .cat p:first-child::after{display:inline-block; width:100px; color:#000; text-align:center; margin-left:10px;}
#info-main .cat.info01 p:first-child::after{content:"MUSIC"; background-color:#00fcff;}
#info-main .cat.info02 p:first-child::after{content:"RANKING"; background-color:#54ff00;}
#info-main .cat.info03 p:first-child::after{content:"EVENT"; background-color:#ffe400;}
#info-main .cat.info04 p:first-child::after{content:"INFINITAS"; background-color:#c600ff;}
#info-main .cat.info05 p:first-child::after{content:"OTHER"; background-color:#ff006c;}}

/*링크 처리*/
#info-main a.cat{
-webkit-transition:all 0.6s ease;
-moz-transition:all 0.6s ease;
transition:all 0.6s ease;}
#info-main a.cat:hover{background-color:rgba(0,105,106,0.3);}
#info-main a.cat p:nth-child(2){color:#fff;} 
#info-main a.cat p:nth-child(3){
display:block;
position:absolute;
bottom:5px;
right:20px;
width:calc(100%-20px);
color:#fff;
font-size:11px;
text-align:right;
text-shadow:2px 2px 3px rgba(0,253,255,0.5),-2px -2px 3px rgba(0,253,255,0.5),
            0px 0px 3px rgba(0,253,255,0.5),-1px -1px 3px rgba(0,253,255,0.5),
            1px 1px 3px rgba(0,253,255,0.5);
padding:0 20px 0 0;}
#info-main a.cat p:nth-child(3)::after{
display:block;
position:absolute;
top:3px;
right:0;
content:"";
width:0;
height:0;
border-left:10px solid #ff007e;
border-top:6px solid transparent;
border-bottom:6px solid transparent;}

@media screen and (max-width:400px){
#info-main a.cat{padding:20px 10px 30px;}
#info-main a.cat p:nth-child(3){right:10px; padding:0 15px 0 0;}
#info-main a.cat p:nth-child(3)::after{
top:5px;
border-top:3px solid transparent;
border-bottom:5px solid transparent;}}

/*업데이트 내역 목록*/
#info-bottom{
position:relative;
display:flex;
width:100%;
min-height:2px;
background-color:#000;
justify-content:flex-end;
padding-top:20px;
margin-top:-1px;
z-index:3;}
#info-bottom img{width:100%; max-width:200px;}
#info-bottom a img:hover{opacity:0.7;}

@media screen and (max-width:420px){
#info-top #info-logo img{max-width:200px;}
#info-bottom{display:flex; justify-content:center; padding:10px 0;}}

/*    
================================================================================================================
MAINTENANCE
================================================================================================================
*/
#info-mainte{
width:100%;
max-width:980px;
color:#fff;
background-color:#000;
font-size:14px;
padding:20px;
margin:30px auto 0;}
#info-mainte p:first-child img{width:100%; max-width:300px;}
#info-mainte p:nth-child(2){padding:20px 40px;}

@media screen and (max-width:420px){
#info-mainte{padding:10px;}
#info-mainte p:first-child img{max-width:200px;}}

/*
================================================================================================================
PLAY MOVIE
================================================================================================================
*/
#movie{
width:100%;
background:rgba(0,42,70,0.9);
background:-moz-linear-gradient(top, rgba(0,42,70,0.9) 0%, rgba(0,0,0,0.9) 100%);
background:-webkit-linear-gradient(top, rgba(0,42,70,0.9) 0%,rgba(0,0,0,0.9) 100%);
background:linear-gradient(to bottom, rgba(0,42,70,0.9) 0%,rgba(0,0,0,0.9) 100%);
border-top:1px solid #00355f;
border-bottom:1px solid #00355f;
margin:0 auto;}

#movie .inner{
width:100%;
max-width:980px;
background-image:url("https://seo381137-seo381137.ktcdn.co.kr/infinitas/img/top/main/cat_bg01.png") , url("https://seo381137-seo381137.ktcdn.co.kr/infinitas/img/top/main/cat_bg01.png") , url("https://seo381137-seo381137.ktcdn.co.kr/infinitas/img/top/main/cat_bg01.png") , url("https://seo381137-seo381137.ktcdn.co.kr/infinitas/img/top/main/cat_bg01.png");
background-repeat:no-repeat , no-repeat , no-repeat , no-repeat;
background-position:top left , top right , bottom left , bottom right;
padding:20px;
margin:0 auto;}
#movie .inner p:first-child img{width:100%; max-width:300px;}
#movie .inner p:nth-child(2){display:flex; /*flex-wrap:wrap;*/ justify-content:center}
#movie .inner p:nth-child(2) span{display:block; padding:10px 20px 40px;}
#movie .inner p:nth-child(2) span a img{width:100%;}
#movie .inner p:nth-child(2) span a img:hover{opacity:0.7;}

@media screen and (max-width:420px){
#movie .inner p:first-child img{max-width:200px;}
#movie .inner p:nth-child(2){flex-wrap:wrap;}
#movie .inner p:nth-child(2) span{width:100%;}}

/*
================================================================================================================
TIMELINE
================================================================================================================
*/

/*
#timeline{display:flex; width:100%; max-width:980px; justify-content:space-between; margin:50px auto 0;}
#timeline .cat{position:relative; width:49%; background-color:#000; padding:0 20px 20px;}
*/
#timeline{display:flex; width:100%; max-width:490px; justify-content:space-between; margin:50px auto 0;}
#timeline .cat{position:relative; width:100%; background-color:#000; padding:0 20px 20px;}

#timeline .cat:first-child > p{position:relative; left:-20px;}
#timeline .cat:nth-child(2) > p{position:relative; left:-35px;}

#timeline .cat #eamu-timeline{height:500px; background:#fff; overflow:auto; border:1px solid #02f5f8; border-radius:5px;}
#timeline #twitter-widget-0{border:1px solid #02f5f8 !important; border-radius:5px;}

@media screen and (max-width:640px){
#timeline{flex-wrap:wrap;}
#timeline .cat{width:100%;}
#timeline .cat #eamu-timeline{height:200px}
#timeline #twitter-widget-0{height:200px !important;}}

@media screen and (max-width:420px){
#timeline .cat > p img{max-width:240px;}
#timeline .cat:first-child > p{position:relative; left:-10px;}
#timeline .cat:nth-child(2) > p{position:relative; left:-25px;}}

/*
================================================================================================================
LINK
================================================================================================================
*/
#link{
display:flex;
width:100%;
max-width:980px;
justify-content:center;
margin:50px auto 0;}
#link a{display:block; width:calc(25% - 5px); background-color:#fff; margin:0 5px;}
#link a img{width:100%;}
#link a:hover img{opacity:0.7;}

@media screen and (max-width:640px){
#link{width:90%;}
#link a{width:calc(50% - 5px);}}

/*
================================================================================================================
FOOTER
================================================================================================================
*/
#bemani{
display:flex;
width:100%;
max-width:500px;
color:#fff;
font-size:12px;
text-align:left;
text-shadow:1px 2px 4px rgba(0,0,0,1),-1px -2px 4px rgba(0,0,0,1),
            2px 1px 4px rgba(0,0,0,1),-2px -1px 4px rgba(0,0,0,1),
            2px 2px 4px rgba(0,0,0,1),-2px -2px 4px rgba(0,0,0,1),
            1px 1px 4px rgba(0,0,0,1),-1px -1px 4px rgba(0,0,0,1),
            0px 0px 4px rgba(0,0,0,1);
justify-content:center;
align-items:center;
padding:0 0 20px 0;
margin:150px auto;}
#bemani img{width:86px;}
#bemani p:first-child{width:86px; margin-right:10px;}
#bemani p:nth-child(2){width:calc(100% - 96px);}

@media screen and (max-width:530px){#bemani{width:90%; font-size:11px; line-height:14px;}}
@media screen and (max-width:420px){#bemani{font-size:10px;}}

@media screen and (max-width:640px){#bemani{margin:100px auto 0;}}
@media screen and (max-width:400px){#bemani{margin:50px auto 0;}}

/*
================================================================================================================
로그인
================================================================================================================
*/
#login{
position:fixed;
bottom:0;
width:100%;
background-image:url("https://seo381137-seo381137.ktcdn.co.kr/infinitas/img/top/login/bg01.png");
background-position:center bottom;
background-repeat:no-repeat;
background-size:100%;
z-index:5 !important;}

#login .inner{display:flex; width:90%; max-width:1100px; height:140px; margin:0 auto;}

#login .inner .cat:first-child{
background-position:bottom left;
background-repeat:no-repeat;
background-size:100%;}
#login .inner .cat:nth-child(2){
position:relative;
background-position:bottom right;
background-repeat:no-repeat;
background-size:100%;}

#login .inner .cat:nth-child(2) p{position:absolute; bottom:5%; left:0; margin:0 auto;}
#login .inner .cat:nth-child(2) p a{display:block; text-align:center; margin:0 auto;}
#login .inner .cat:nth-child(2) p a img{
width:100%;
-webkit-filter:drop-shadow(0px 0px 18px rgba(0,151,153,0.7));
-moz-filter:drop-shadow(0px 0px 18px rgba(0,151,153,0.7));
filter:drop-shadow(0px 0px 18px rgba(0,151,153,0.7));}
#login .inner .cat:nth-child(2) p a img:hover{opacity:0.7;}

#login .inner.one .cat:first-child{width:70%; background-image:url("https://seo381137-seo381137.ktcdn.co.kr/infinitas/img/top/login/login01_01.png");}
#login .inner.one .cat:nth-child(2){width:30%; background-image:url("https://seo381137-seo381137.ktcdn.co.kr/infinitas/img/top/login/login01_02.png");}
#login .inner.one .cat:nth-child(2) p{width:62%;}
#login .inner.one .cat:nth-child(2) p a{width:100%;}

#login .inner.two .cat:first-child{width:55%; background-image:url("https://seo381137-seo381137.ktcdn.co.kr/infinitas/img/top/login/login02_01.png");}
#login .inner.two .cat:nth-child(2){width:45%; background-image:url("https://seo381137-seo381137.ktcdn.co.kr/infinitas/img/top/login/login02_02.png");}
#login .inner.two .cat:nth-child(2) p{display:flex; width:82%;}
#login .inner.two .cat:nth-child(2) p a{width:50%;}

@media screen and (max-width:800px){#login{display:none;}}