@charset 'utf-8';

@import url(https://fonts.googleapis.com/css?family=Amiri:400,400i,700,700i);
@import url(https://fonts.googleapis.com/css?family=Roboto+Condensed:400,400i);

/* html5doctor.com Reset Stylesheet v1.6.1
Last Updated: 2010-09-17 Author: Richard Clark - http://richclarkdesign.com Twitter: @rich_clark */
a,hr{padding:0}article,aside,details,figcaption,figure,footer,header,hgroup,hr,menu,nav,section{display:block}abbr,address,article,aside,audio,b,blockquote,body,canvas,caption,cite,code,dd,del,details,dfn,div,dl,dt,em,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,p,pre,q,samp,section,small,span,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,ul,var,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:0 0}ins,mark{color:#000;background-color:#ff9}ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}a{margin:0;vertical-align:baseline;background:0 0}ins{text-decoration:none}mark{font-style:italic;font-weight:700}del{text-decoration:line-through}abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help}table{border-collapse:collapse;border-spacing:0}hr{height:1px;border:0;border-top:1px solid #ccc;margin:1em 0}input,select{vertical-align:middle}img{vertical-align:bottom}



/*---------------------------------*/
/* [BASIC SETTING] */
html{
    font-size: 62.5% !important;
}
body{
    font-family:Verdana, Roboto, "Droid Sans", "游ゴシック", YuGothic, "メイリオ", Meiryo, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "ＭＳ Ｐゴシック", sans-serif;
}
img{
    vertical-align: bottom;
}

a {
	color: #000;
	text-decoration: none;
}
a:hover {
	text-decoration: none;
}

::selection {
	background: #C8162A;
	color: #FFF;
}

iframe[name="google_conversion_frame"]{
	position: absolute;
	height: 0;
}



/*---------------------------------*/
/* [MODULE SETTING] */

.mi{
	font-family: "游明朝", "Yu Mincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "HiraMinProN-W3", "Meiryo UI", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-weight:bold;
}

.ro{
	font-family: 'Amiri', serif;
}

.clearfix:before,
.clearfix:after {content:"";display:table;}
.clearfix:after {clear:both;}
.clearfix{zoom:1;}




/*--------------------------------*/
/* [Z-INDEX] */

#site-loader{z-index: 5000;}
#index-header{z-index: 4000;}




/*--------------------------------*/
/* [LOADER] */

#site-loader{
    position: fixed;
    top:0;
    width: 100%; height: 100vh;
    background: url('../images/common/bg_texture.png');
}

#site-loader .progress{
    position: absolute;
    right:50%; bottom: 50%;
    -webkit-transform: translate(50%, 50%);
        -ms-transform: translate(50%, 50%);
        transform: translate(50%, 50%);
}

#site-loader img{
    width: 400px; height: auto;
}




/*--------------------------------*/
/* [FOOTER SETTING] */

#index-footer{
	position: relative;
    padding: 20px 20px 0 60px;
}
#index-footer h3{
    position: absolute;
    left:40px; top:0;
    width:140px; height: 40px;
    padding-left: 40px;
    box-sizing: border-box;
    font-family: "Roboto Condensed", sans-serif;
    font-size: 11px;
    line-height: 40px;
    color:#FFF;
    background: #1e255e url('../images/index/icon_links.png') 20px center no-repeat;
    -webkit-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
        transform: rotate(90deg);
    -webkit-transform-origin:left top;
        -ms-transform-origin:left top;
        transform-origin:left top;
}

#index-footer #links{
    text-align: left;
    width: 50%;
    float:left;
}
#index-footer #links li{
    float: left;
    padding: 0 20px 20px 0;
}

#index-footer .footMenu{
    padding: 15px 0 20px 0;
    font-family: 'Amiri', serif;
    font-weight: 700;
    color: #FFF;
    text-align: right;
}
#index-footer .footMenu a{
    color: #FFF;
}
#index-footer .footMenu a:hover{
    text-decoration: underline;
}

#index-footer .coution{
    padding-top: 8px;
    text-align: right;
    color: #FFF;
}
#index-footer .copyright{
    padding: 8px 0 20px 0;
    text-align: right;
    color: #FFF;
}




/*---------------------------------*/
/* [INDEX SETTING] */

#index{
    overflow-y: scroll;
}

#index-stage{
    position: relative;
    width: 100%;
    min-width: 1240px;
    visibility: hidden;
}
#index-stage::before{
    content:'';
    display: block;
    position: fixed;
    top:0;
    width: 100%; height: 100vh;
    min-width: 1240px;
    min-height: 620px;
    background: url('../images/common/bg_texture.png');
}

#index-main{
    position: relative;
    padding-top: 123%;
    overflow: hidden;
}

#index-mainInner{
    position: absolute;
    top:0;
    width:100%; height: 100%;
}

.pixi{
    position: fixed;
    top:0;
    width: 100%; height: 100vh;
}


/* Visuals */

/*--------test--------*/
/*#index-visuals{
    -webkit-animation: brightFrame 2s infinite ease-out;
        animation: brightFrame 2s infinite ease-out;
}
@keyframes -webkit-brightFrame{
    0%{
        filter: brightness(1);
    }
    50%{
        filter: brightness(1.5);
    }
    100%{
        filter: brightness(1);
    }
}
@keyframes brightFrame{
    0%{
        filter: brightness(1);
    }
    50%{
        filter: brightness(1.5);
    }
    100%{
        filter: brightness(1);
    }
}*/
/*--------------------*/

#index-visuals{
    position: absolute;
    top:0;
    width: 100%; height: 100%;
}
#index-visuals .layer1, 
#index-visuals .layer2, 
#index-visuals .layer3{
    position: absolute;
    top:0;
    width: 100%; height: 100%;
    background-repeat: 50% 0;
    background-repeat: no-repeat;
    background-size: 100% auto; 
}
#index-visuals .layer1{
    background-image: url('../images/index/visual_layer1.png');
}
#index-visuals .layer2{
    background-image: url('../images/index/visual_layer2.png');
}
#index-visuals .layer3{
    background-image: url('../images/index/visual_layer3.png');
}

#index-visuals .hikari{
    position: absolute;
    right:51%; top:41%;
    width:6%;
    -webkit-transform: translate(50%, 50%);
        -ms-transform: translate(50%, 50%);
        transform: translate(50%, 50%);
    -webkit-filter: brightness(2);
        filter: brightness(2);
}
#index-visuals .hikariInner{
    padding-top: 100%;
    border-radius: 50%;
    background-color: rgba(98, 193, 255, 0.8); 
    box-shadow: 0 0 10px 0 rgba(234, 239, 255, 0.8) inset, 0 0 20px 10px rgba(60, 80, 145, 0.3);
    -webkit-filter:blur(12px);
        -ms-filter:blur(12px);
        filter:blur(12px);
    
    -webkit-animation: hikariFrame 8s infinite ease-out;
        animation: hikariFrame 8s infinite ease-out;
}
@keyframes -webkit-hikariFrame{
    0%{
        background-color: rgba(98, 193, 255, 0.8); 
        box-shadow: 0 0 10px 0 rgba(234, 239, 255, 0.8) inset, 0 0 20px 5px rgba(60, 80, 145, 0.3);
    }
    25%{
        background-color: rgba(200, 240, 255, 0.8); 
        box-shadow: 0 0 10px 2px rgba(234, 239, 255, 0.8) inset, 0 0 40px 10px rgba(185, 205, 255, 0.8);
    }
    35%{
        background-color: rgba(98, 193, 255, 0.8); 
        box-shadow: 0 0 10px 0 rgba(234, 239, 255, 0.8) inset, 0 0 20px 5px rgba(60, 80, 145, 0.3);
    }
    100%{
        background-color: rgba(98, 193, 255, 0.8); 
        box-shadow: 0 0 10px 0 rgba(234, 239, 255, 0.8) inset, 0 0 20px 5px rgba(60, 80, 145, 0.3);
    }
}
@keyframes hikariFrame{
    0%{
        background-color: rgba(98, 193, 255, 0.8); 
        box-shadow: 0 0 10px 0 rgba(234, 239, 255, 0.8) inset, 0 0 20px 5px rgba(60, 80, 145, 0.3);
    }
    25%{
        background-color: rgba(200, 240, 255, 0.8); 
        box-shadow: 0 0 10px 2px rgba(234, 239, 255, 0.8) inset, 0 0 40px 10px rgba(185, 205, 255, 0.8);
    }
    35%{
        background-color: rgba(98, 193, 255, 0.8); 
        box-shadow: 0 0 10px 0 rgba(234, 239, 255, 0.8) inset, 0 0 20px 5px rgba(60, 80, 145, 0.3);
    }
    100%{
        background-color: rgba(98, 193, 255, 0.8); 
        box-shadow: 0 0 10px 0 rgba(234, 239, 255, 0.8) inset, 0 0 20px 5px rgba(60, 80, 145, 0.3);
    }
}


#index-visuals .hikari2{
    position: absolute;
    right:52%; top:-3%;
    width:60%;
    -webkit-transform: translate(50%, 50%);
        -ms-transform: translate(50%, 50%);
        transform: translate(50%, 50%);
    -webkit-filter: brightness(2);
        filter: brightness(2);
}
#index-visuals .hikari2Inner{
    padding-top: 100%;
    border-radius: 50%;
    background-color: rgba(98, 193, 255, 0.8);

    -webkit-animation: hikari2Frame 8s infinite ease-out;
        animation: hikari2Frame 8s infinite ease-out;
}
@keyframes -webkit-hikari2Frame{
    0%{
        background-color: rgba(98, 193, 255, 0); 
        filter: brightness(1) blur(20px);
    }
    27%{
        background-color: rgba(200, 240, 255, 0.08); 
        filter: brightness(1.5) blur(80px);
    }
    37%{
        background-color: rgba(98, 193, 255, 0); 
        filter: brightness(1) blur(20px);
    }
    100%{
        background-color: rgba(98, 193, 255, 0); 
        filter: brightness(1) blur(20px);
    }
}
@keyframes hikari2Frame{
    0%{
        background-color: rgba(98, 193, 255, 0); 
        filter: brightness(1) blur(20px);
    }
    27%{
        background-color: rgba(200, 240, 255, 0.08); 
        filter: brightness(1.5) blur(80px);
    }
    37%{
        background-color: rgba(98, 193, 255, 0); 
        filter: brightness(1) blur(20px);
    }
    100%{
        background-color: rgba(98, 193, 255, 0); 
        filter: brightness(1) blur(20px);
    }
}



/* HEADER */
#index-header{
    position: absolute;
    width: 1080px;
    right:50%; top:20px;
    -webkit-transform: translate(50%, 0);
        -ms-transform: translate(50%, 0);
        transform: translate(50%, 0);
}
#index-header .siteLogo{
    position: absolute;
    width: 260px;
    right:50%; top:0;
    -webkit-transform: translate(50%, 0);
        -ms-transform: translate(50%, 0);
        transform: translate(50%, 0);
}
#index-header .siteLogo img{
    width: 100%; height: auto;
}

#index-catchcopy{
    position: absolute;
    width:4.5%;
    right: 6.4%; top: 220px;
}
#index-catchcopy img{
    width: 100%; height: auto;
}

#index-releaseday{
    position: absolute;
    width:12.5%;
    left: 0; top: 220px;
}
#index-releaseday img{
    width: 100%; height: auto;
}

/*NAVS*/
#index-gNavs .leftNav, #index-gNavs .rightNav{
    width: 380px;
    position: absolute;
    top:25px;
}
#index-gNavs .leftNav::before, #index-gNavs .rightNav::before{
    content: '';
    display: block;
    position: absolute;
    top:30px;
    width: 100%; height: 1px;
    background-color:#6d6b6b;
}

#index-gNavs .leftNav{
    left:0;
}
#index-gNavs .rightNav{
    right:0;
}

#index-gNavs ul{
    letter-spacing: -0.4em;
    text-align: center;
}
#index-gNavs li{
    display: inline-block;
    letter-spacing: normal;
    font-family: 'Amiri', serif;
    font-size:16px;
    font-style: italic;
    font-weight: bold;
    line-height: 1;
    color:#FFF;
    user-select: none;
}
#index-gNavs li:not(:first-child){
    margin-left: 20px;
}
#index-gNavs li.disable{
    color:#898989;
}

#index-gNavs a{
    position: relative;
    display: block;
    color:#FFF;
    -webkit-transition: all 0.3s ease-out;
        -ms-transition: all 0.3s ease-out;
        transition: all 0.3s ease-out;
}
#index-gNavs a::after{
    content: '';
    display: block;
    position: absolute;
    width: 0; height: 1px;
    right:50%;
    background: #c32232;
    
    -webkit-transform: translate(50%, 0);
        -ms-transform: translate(50%, 0);
        transform: translate(50%, 0);
    
    -webkit-transition: all 0.3s ease-out;
        -ms-transition: all 0.3s ease-out;
        transition: all 0.3s ease-out;
}

#index-gNavs .upperNav a{
    padding-bottom: 15px;
}
#index-gNavs .upperNav a::after{
    bottom: 0;
}

#index-gNavs .lowerNav a{
    padding-top: 15px;
}
#index-gNavs .lowerNav a::after{
    top:-1px;
}

#index-gNavs a:hover,
#index-gNavs .is-active a{
    color:#ffd162;
    text-shadow: 0 0 10px #de1212, 0 0 8px #de1212, 0 0 0.4px #de1212;
}

#index-gNavs a:hover::after,
#index-gNavs .is-active a::after{
    width: 100%;
}

#index-gNavs a:hover span::before,
#index-gNavs a:hover span::after{
    opacity: 1;
    -webkit-animation: navYuragiFrame 1s linear infinite;
        animation: navYuragiFrame 1s linear infinite;
}

#index-gNavs span{
    position: relative;
    display:inline-block;
    padding:0 2px;
}
#index-gNavs span::before, #index-gNavs span::after{
    content: attr(data-text);
    display: block;
    position: absolute;
    top: 0;
    text-shadow: 0 0 10px #de1212, 0 0 8px #de1212, 0 0 0.4px #de1212;
    color:#ffd162;
    overflow: hidden;
    clip: rect(0, 900px, 0, 0);
    opacity: 0;
}
#index-gNavs span::before{
    left: -2px;
}
#index-gNavs span::after{
    left: 2px;
}
@keyframes -webkit-navYuragiFrame{
    0% {clip: rect(0, 0, 0, 0);}
    2% {clip: rect(10px, 9999px, 15px, 0);}
    5% {clip: rect(15px, 9999px, 20px, 0);}
    7% {clip: rect(10px, 9999px, 13px, 0);}
    10% {clip: rect(0, 0, 0, 0);}
    20% {clip: rect(0, 0, 0, 0);}
    22% {clip: rect(2px, 9999px, 8px, 0);}
    25% {clip: rect(7px, 9999px, 14px, 0);}
    27% {clip: rect(0, 0, 0, 0);}
    57% {clip: rect(0, 0, 0, 0);}
    60% {clip: rect(12px, 9999px, 20px, 0);}
	62% {clip: rect(5px, 9999px, 12px, 0);}
	65% {clip: rect(6px, 9999px, 15px, 0);}
	67% {clip: rect(0, 0, 0, 0);}
	72% {clip: rect(0 0, 0, 0);}
	75% {clip: rect(15px, 9999px, 22px, 0);}
	77% {clip: rect(19px, 9999px, 25px, 0);}
	80% {clip: rect(0, 0, 0, 0);}
	100% {clip: rect(0, 0, 0, 0);}
}
@keyframes navYuragiFrame{
    0% {clip: rect(0, 0, 0, 0);}
    2% {clip: rect(10px, 9999px, 15px, 0);}
    5% {clip: rect(15px, 9999px, 20px, 0);}
    7% {clip: rect(10px, 9999px, 13px, 0);}
    10% {clip: rect(0, 0, 0, 0);}
    20% {clip: rect(0, 0, 0, 0);}
    22% {clip: rect(2px, 9999px, 8px, 0);}
    25% {clip: rect(7px, 9999px, 14px, 0);}
    27% {clip: rect(0, 0, 0, 0);}
    57% {clip: rect(0, 0, 0, 0);}
    60% {clip: rect(12px, 9999px, 20px, 0);}
	62% {clip: rect(5px, 9999px, 12px, 0);}
	65% {clip: rect(6px, 9999px, 15px, 0);}
	67% {clip: rect(0, 0, 0, 0);}
	72% {clip: rect(0 0, 0, 0);}
	75% {clip: rect(15px, 9999px, 22px, 0);}
	77% {clip: rect(19px, 9999px, 25px, 0);}
	80% {clip: rect(0, 0, 0, 0);}
	100% {clip: rect(0, 0, 0, 0);}
}



/* TOPICS */
#index-topics{
    position: absolute;
    right:0; top:0;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.2);
    -webkit-transform: translate(80px, 0);
        -ms-transform: translate(80px, 0);
        transform: translate(80px, 0);
    -webkit-transition:all 0.3s ease-out;
        -ms-transition:all 0.3s ease-out;
        transition:all 0.3s ease-out;
}
#index-topics:hover{
    background-color: rgba(0, 0, 0, 0.8);
    -webkit-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
        transform: translate(0, 0);
    /*background-color: rgba(0, 0, 0, 0.9);*/
}

#index-topics .ttl{
    position: relative;
    width: 120px; height: 120px;
    font-family: "Roboto Condensed", sans-serif;
    font-size: 11px;
    font-weight:300;
    background: #1e255e url('../images/index/icon_topics.png') 0 0 no-repeat; 
}
#index-topics .ttl span{
    position: absolute;
    left: -40px; top: 50px;
	width: 120px; height: 40px;
	-webkit-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
        transform: rotate(90deg);
    -webkit-transform-origin: center center;
        -ms-transform-origin: center center;
        transform-origin: center center;
    line-height: 40px;
	color: #FFF;
	-webkit-backface-visibility:hidden;
    	backface-visibility:hidden;
    text-align: center;
}
#index-topics li{
	float: left;
	width: 40px;
    color: #FFF;
}
#index-topics li a{
    display: block;
    width: 40px;
    height: 937px;
    padding-top: 20px;
    font-size: 13px;
    line-height: 40px;
	color: #FFF;
	text-decoration: none;
	letter-spacing: 2px;
    -webkit-writing-mode: vertical-rl;
        -ms-writing-mode: tb-lr;
        writing-mode: vertical-rl;
    -webkit-transition:all 0.3s ease-out;
        -ms-transition:all 0.3s ease-out;
        transition:all 0.3s ease-out;
}
#index-topics li a:hover{
    color: #ffd162;
    text-shadow: 0 0 10px #de1212, 0 0 8px #de1212, 0 0 0.4px #de1212;
}


/* SHARE */
#index-share{
    position: absolute;
    left:0; top:0;
    width: 40px;
}
#index-share .ttl{
    position: relative;
    height: 100px;
    background: #1e255e url('../images/index/icon_share.png') 50% 13px no-repeat;
}
#index-share .ttl span{
    display: block;
    position: relative;
    top:50px;
    color:#FFF;
    -webkit-backface-visibility:hidden;
    	backface-visibility:hidden;
    -webkit-transform:rotate(90deg);
        -ms-transform:rotate(90deg);
        transform:rotate(90deg);
}
#index-share li{
    margin-bottom: 1px;
}
#index-share li a{
    display: block;
    background-color: rgba(255, 255, 255, 0.3);
    -webkit-transition:all 0.3s ease-out;
        -ms-transition:all 0.3s ease-out;
        transition:all 0.3s ease-out;
}
#index-share li a:hover{
    background-color: rgba(255, 255, 255, 0.2);
}


/* MOVIE */
#index-movie{
    position: fixed;
    left:0; bottom:0;
}

#index-movie section{
    overflow: hidden;
}

#index-movie .ttl{
    position: relative;
    float:left;
    width: 40px; height: 120px;
    background: #1e255e url('../images/index/icon_movie.png') 50% 13px no-repeat;
}
#index-movie .ttl span{
    display: block;
    position: relative;
    top:50px;
    color:#FFF;
    font-weight:300;
    -webkit-backface-visibility:hidden;
    	backface-visibility:hidden;
    -webkit-transform:rotate(90deg);
        -ms-transform:rotate(90deg);
        transform:rotate(90deg);
}

#index-movie .imageArea{
    float: left;
    width: 200px;
    box-sizing: border-box;
    border:1px solid #a9a7a7;
}
#index-movie .imageArea .image{
    width:198px; height: 118px;
    overflow: hidden;
}
#index-movie .image img{
    display: block;
    -webkit-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1);
    -webkit-transition: all 0.3s ease-out;
        -ms-transition: all 0.3s ease-out;
        transition: all 0.3s ease-out;
    -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
}

#index-movie .imageArea a{
    position: relative;
    display: block;
}
#index-movie .imageArea a::after{
    content: '';
    display: block;
    position: absolute;
    width: 100%; height: 100%;
    top:0;
    background: url('../images/index/movie_over_icon.png') 50% 50% no-repeat;
    opacity: 0;
    -webkit-transform: scale(1.2);
        -ms-transform: scale(1.2);
        transform: scale(1.2);
    -webkit-transition: all 0.3s ease-out;
        -ms-transition: all 0.3s ease-out;
        transition: all 0.3s ease-out;
}
#index-movie .imageArea a:hover::after{
    -webkit-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1);
    opacity:1;
}
#index-movie .imageArea a:hover .image img{
    -webkit-transform: scale(1.1);
        -ms-transform: scale(1.1);
        transform: scale(1.1);
}


/* PICKUP */
#index-pickup{
    position: fixed;
    right:0; bottom:0;
}
#index-pickup aside{
    overflow: hidden;
}

#index-pickup .ttl{
    float: right;
    position: relative;
    width:40px; height: 120px;
    background: #1e255e url('../images/index/icon_pickup.png') 50% 13px no-repeat;
}
#index-pickup .ttl span{
    display: block;
    position: relative;
    top:50px;
    color:#FFF;
    -webkit-backface-visibility:hidden;
    	backface-visibility:hidden;
    -webkit-transform:rotate(90deg);
        -ms-transform:rotate(90deg);
        transform:rotate(90deg);
}
#index-pickup .bnrs{
    float: right;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}
#index-pickup .bnrs li{
    float: right;
}
#index-pickup .bnrs a{
    -webkit-transition: all 0.3s ease-out;
        -ms-transition: all 0.3s ease-out;
        transition: all 0.3s ease-out;
}
#index-pickup .bnrs a:hover{
    opacity: 0.8;
}
#index-pickup .bnrs img{
    width: 120px;
    height: 120px;
}


/* TWITTER */
#index-twitter{
    position: relative;
    background: url('../images/index/twitter_bg.jpg') 50% 50% no-repeat;
    background-size: cover;
    background-attachment: fixed;
}
#index-twitter::before{
    content:'';
    display: block;
    position: absolute;
    top:0;
    width: 100%; height: 100%;
    background: url('../images/common/bg_dots.png');
}

#index-twitter .innerbox{
    position: relative;
    padding: 80px 0;
}

#index-twitter .ttl{
    position: relative;
    padding: 0 0 40px;
    font-size: 40px;
    font-family: 'Amiri', serif;
    color:#FFF;
    text-align: center;
}
#index-twitter .ttl::after{
    content: '';
    display: block;
    position: absolute;
    right:50%; bottom:0;
    -webkit-transform: translate(50%, 0);
        -ms-transform: translate(50%, 0);
        transform: translate(50%, 0);
    width: 40px; height: 1px;
    background: #676869;
}

#index-twitter .twgt{
    position: relative;
    width:540px;
    margin: 40px auto 0;
    padding: 20px;
    border: 1px solid #676869;
}

#index-twitter .btnFollow{
    margin: 40px 0 0;
    text-align: center;   
}
#index-twitter .btnFollow a{
    display: inline-block;
    padding: 6px 40px;
    font-family: 'Amiri', serif;
    font-size:16px;
    font-weight: bold;
    font-style: italic;
    color:#FFF;
    background: rgba(255, 255, 255, 0.2);
    -webkit-transition: all 0.3s ease-out;
        -ms-transition: all 0.3s ease-out;
        transition: all 0.3s ease-out;
}
#index-twitter .btnFollow a:hover{
    background: rgba(255, 255, 255, 0.1);
}

/*****modal_newyear*****/
.modal_newyear{
	position:fixed;
	z-index:9999999;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: none;
}
.modal_newyear .image{
	position: absolute;
	left:50%;
	top:50%;
	z-index:100;
	margin: -300px 0 0 -265px;
}
.modal_newyear .bg{
	position:fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background:rgba(0,0,0,0.5)
}
.modal_newyear .close{
	position:absolute;
	left:50%;
	top:50%;
	margin: -340px 0 0 235px;
	cursor: pointer;
}