@charset "utf-8";
html{
    overflow: auto;
}
body {
    font-size: 14px;
    line-height: 1.8;
}
a { color: #fff; }
a:hover { text-decoration: none; }
.ah { transition: all .4s ease; }
.ah:hover { opacity: 0.7; }
br.pc { display: block; }
br.sp { display: none; }
body#index #fullWrap {
    width: 1280px;
    height: 620px;
}
body#index #inWrap {
    min-width: 1280px;
    min-height: 620px;
    width: 100%;
    height: 100%;
    position: absolute;
    overflow: hidden;
}
body#index #rightArea {
    margin-left: 303px;
    position: relative;
    height: 100%;
    min-height: 620px;
}
.linkA {
    position: relative;
    display: block;
    text-decoration: none;
    transition: .3s ease-in-out;
    z-index: 0;
}
.linkA:hover {
    color: #fff;
}
.linkA:after {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    content: '';
    background: #000;
    transform-origin: right top;
    transform: scale(0, 1);
    transition: transform .3s;
}
.linkA:hover:after {
    transform-origin: left top;
    transform: scale(1, 1);
}
.linkB {
    position: relative;
    display: block;
    text-align: center;
    text-decoration: none;
    transition: .3s;
    z-index: 0;
}
.linkB:hover {
    color: #fff;
}
.linkB:after {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    content: '';
    background: #1f1f1f;
    transform-origin: right top;
    transform: scale(0, 1);
    transition: transform .3s;
}
.linkB:hover:after {
    transform-origin: left top;
    transform: scale(1, 1);
}
.linkC {
    position: relative;
    display: block;
    text-align: center;
    text-decoration: none;
    transition: .3s;
    z-index: 0;
}
.linkC:hover {
    color: #000;
}
.linkC:after {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    content: '';
    background: #fff;
    transform-origin: right top;
    transform: scale(0, 1);
    transition: transform .3s;
}
.linkC:hover:after {
    transform-origin: left top;
    transform: scale(1, 1);
}
.linkinC .link {
    position: relative;
    display: block;
    text-align: center;
    text-decoration: none;
    transition: .3s;
    z-index: 0;
}
.linkinC:hover .link,
.linkinC.active .link {
    color: #000;
}
.linkinC .link:after {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    content: '';
    background: #fff;
    transform-origin: right top;
    transform: scale(0, 1);
    transition: transform .3s;
}
.linkinC:hover .link:after,
.linkinC.active .link:after {
    transform-origin: left top;
    transform: scale(1, 1);
}



body#index .owl-controls{
    display: none;
}
#loading{
	background: #000;
	position: fixed;
	top:0;
	left:0;
	bottom:0;
	right:0;
	z-index: 10000;
}

/* ▼HEADER▼ --------------------------------- 
-------------------------------------------------*/

#menuBtn{
    display: none;
}
header{
    width: 303px;
    box-sizing: border-box;
    position: fixed;
    height: 100%;
    min-height: 620px;
}
header:before{
    content: "";
    background: url(../img/common/symbol02_w.svg) no-repeat 0 0 / 100%;
    width: 37px;
    height: 37px;
    position: absolute;
    left: 34px;
    margin: auto;
    top: 0;
    bottom: 0;
    padding-bottom: 23px;
}
header:after{
content: "";
    background: url(../img/common/menu.svg) no-repeat 0 0 / 100%;
    width: 23px;
    height: 11px;
    position: absolute;
    left: 41px;
    margin: auto;
    top: 0;
    bottom: -45px;
}
header h1{
    position: absolute;
    top: 76px;
    left: 39px;
    width: 227px;
    height: 32px;
}
header h1 img{
    width: 100%;
}
header nav{
    position: absolute;
    width: 303px;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
}
header nav > ul{
    padding-left: 108px;
}
header nav > ul li{
    width: 150px;
    height: 30px;
    line-height: 30px;
    font-size: 12px;
    letter-spacing: 0.1em;
}
header nav > ul li a{
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none;
    color: #fff;
    transition: .6s;
}
header nav > ul li a.active{
    text-shadow: 0px 0px 6px #15B0C2, 0px 0px 6px #15B0C2;
}
header nav > ul li a:hover{
    animation: glitch 1.5s ease infinite;
    text-shadow: 0px 0px 6px #15B0C2, 0px 0px 6px #15B0C2;
}
body#index header nav > ul li{
    opacity: 0;
    transform: translateX(10px);
    transition: .3s ease-in-out;
}
body#index header nav > ul li.active{
    opacity: 1;
    transform: translateX(0);
}
@keyframes glitch {
    0%, 20%, 33%, 60%, 64%, 66%, 69%, 73%, 75%, 90%, 93%, 100% {
    transform: skew(0deg);
    }
    21%, 81% {
    transform: skew(30deg, 0deg);
    }
    22%, 82% {
    transform: skew(-30deg, 0deg);
    }
    61% {
    transform: skew(35deg);
    }
    62% {
    transform: skew(-15deg, -8deg);
    }
    65% {
    transform: skew(15deg, -8deg);
    }
    70% {
    transform: skew(-65deg);
    }
    74% {
    transform: skew(15deg, -15deg);
    }
}
/*header nav > ul li:nth-child(11){
    width: 150px;
    height: 35px;
    line-height: 18px;
    margin-top: 20px;
}
header nav > ul li:nth-child(12){
    margin-top: 26px;
}*/
@keyframes stopRotate {  0% {
 transform:rotateY(0deg);
}
 50% {
 transform:rotateY(360deg);
}
 100% {
 transform:rotateY(360deg);
}
}
header:before {
	display: block;
	animation: stopRotate 4s ease infinite;
}

/* ▼INDEX▼ --------------------------------- 
-------------------------------------------------*/

#topMovie,
#newsMore{
    display: none;
}
#mainVs{
    position: absolute;
    left: 0px;
    top: 0px;
    right: 55%;
    bottom: 0px;
}
#mainVs:before{
    content: "";
    background: #000;
    width:100%;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
    transition: .4s cubic-bezier(0.02, 0.88, 0.58, 1);
}
#mainVs.active:before{
    width: 0;
}
#mainVs > span {
    background-image: url(../img/pc/main_vs.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    position: absolute;
    left: 0;
    top: 7px;
    right: 0;
    bottom: 7px;
    display: block;
}
#mainVs img{
    display: none;
}
#startDate,
#newsArea{
    position: absolute;
    left: 45%;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
}
#startDate p{
    position: absolute;
    background: url(../img/pc/start_date.png) no-repeat 0 0 / 100%;
    width: 351px;
    height: 147px;
    margin: auto;
    top: 0;
    right: 0;
    bottom: -260px;
    left: 0;
    z-index: 1;
}
/*#startDate:after{
    content: "";
    position: absolute;
    background: url(../img/common/symbol02_g.svg) no-repeat 0 0 / 100%;
    width: 282px;
    height: 282px;
    margin: auto;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 0;
}*/
@keyframes noise-anim {
  0% {
    clip: rect(77px, 9999px, 6px, 0);
  }
  5% {
    clip: rect(65px, 9999px, 70px, 0);
  }
  10% {
    clip: rect(82px, 9999px, 82px, 0);
  }
  15% {
    clip: rect(32px, 9999px, 35px, 0);
  }
  20% {
    clip: rect(31px, 9999px, 49px, 0);
  }
  25% {
    clip: rect(18px, 9999px, 46px, 0);
  }
  30% {
    clip: rect(94px, 9999px, 64px, 0);
  }
  35% {
    clip: rect(69px, 9999px, 31px, 0);
  }
  40% {
    clip: rect(6px, 9999px, 72px, 0);
  }
  45% {
    clip: rect(25px, 9999px, 35px, 0);
  }
  50% {
    clip: rect(82px, 9999px, 26px, 0);
  }
  55% {
    clip: rect(7px, 9999px, 92px, 0);
  }
  60% {
    clip: rect(54px, 9999px, 30px, 0);
  }
  65% {
    clip: rect(86px, 9999px, 90px, 0);
  }
  70% {
    clip: rect(38px, 9999px, 65px, 0);
  }
  75% {
    clip: rect(41px, 9999px, 66px, 0);
  }
  80% {
    clip: rect(31px, 9999px, 37px, 0);
  }
  85% {
    clip: rect(8px, 9999px, 12px, 0);
  }
  90% {
    clip: rect(50px, 9999px, 69px, 0);
  }
  95% {
    clip: rect(7px, 9999px, 42px, 0);
  }
  100% {
    clip: rect(14px, 9999px, 57px, 0);
  }
}
@keyframes noise-anim-2 {
  0% {
    clip: rect(18px, 9999px, 13px, 0);
  }
  5% {
    clip: rect(74px, 9999px, 51px, 0);
  }
  10% {
    clip: rect(33px, 9999px, 65px, 0);
  }
  15% {
    clip: rect(64px, 9999px, 66px, 0);
  }
  20% {
    clip: rect(75px, 9999px, 6px, 0);
  }
  25% {
    clip: rect(40px, 9999px, 49px, 0);
  }
  30% {
    clip: rect(71px, 9999px, 1px, 0);
  }
  35% {
    clip: rect(42px, 9999px, 73px, 0);
  }
  40% {
    clip: rect(92px, 9999px, 57px, 0);
  }
  45% {
    clip: rect(4px, 9999px, 33px, 0);
  }
  50% {
    clip: rect(4px, 9999px, 34px, 0);
  }
  55% {
    clip: rect(49px, 9999px, 25px, 0);
  }
  60% {
    clip: rect(24px, 9999px, 44px, 0);
  }
  65% {
    clip: rect(31px, 9999px, 99px, 0);
  }
  70% {
    clip: rect(54px, 9999px, 83px, 0);
  }
  75% {
    clip: rect(57px, 9999px, 97px, 0);
  }
  80% {
    clip: rect(3px, 9999px, 15px, 0);
  }
  85% {
    clip: rect(84px, 9999px, 34px, 0);
  }
  90% {
    clip: rect(100px, 9999px, 88px, 0);
  }
  95% {
    clip: rect(91px, 9999px, 59px, 0);
  }
  100% {
    clip: rect(10px, 9999px, 87px, 0);
  }
}
#symBgTop{
    width: 282px;
    height: 282px;
    margin: auto;
    left: 0;
    right: 0;
    top: -90px;
    bottom: 0;
    z-index: 0;
    position: absolute;
    perspective: 564px;
}
#symBgTop span{
    display: block;
    animation: stopRotate 4s 3s ease infinite;
}
#startDate h1{
    width: 444px;
    height: 62px;
    margin: auto;
    left: 0;
    right: 0;
    top: -80px;
    bottom: 0;
    z-index: 1;
    position: absolute;
}
#startDate h1.active{
    animation: glitch 1s linear;
}
#startDate h1.active:before{
    content: "";
    position: absolute;
    background-image: url(../img/pc/top_mainlogo.png);
    background-size: 100%;
    background-position: 0 0;
    background-repeat: no-repeat;
    width: 444px;
    height: 62px;
    top: 0;
    left: 0;
    clip: rect(0, 900px, 0, 0);
    filter: drop-shadow(2px 2px 2px rgba(35,184,197,1));
    animation: noise-anim .5s linear alternate-reverse;
    opacity: .8;
}
#startDate h1.active:after{
    content: "";
    position: absolute;
    background-image: url(../img/pc/top_mainlogo.png);
    background-size: 100%;
    background-position: 0 0;
    background-repeat: no-repeat;
    width: 444px;
    height: 62px;
    top: 0;
    left: 0;
    clip: rect(0, 900px, 0, 0);
    filter: drop-shadow(2px 2px 2px rgba(274,27,27,1));
    animation: noise-anim-2 1s linear alternate-reverse;
    opacity: .8;
}
/*#startDate:before{
    content: "";
    position: absolute;
    background: url(../img/pc/top_mainlogo.png) no-repeat 0 0 / 100%;
    width: 444px;
    height: 62px;
    margin: auto;
    left: 0;
    right: 0;
    top: -30px;
    bottom: 0;
    z-index: 1;
}*/
#newsArea{
    z-index: 2;
}
#newsTop {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 7px;
    height: 68px;
}
#newsTop h2 {
    position: absolute;
    top: 0;
    left: 0;
    width: 62px;
    height: 21px;
}
#newsTop h2 img{
    width: 27px;
    position: absolute;
    margin: auto;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}
#newsTop ul {
    height: 100%;
    padding-bottom: 7px;
}
#newsTop ul li{
    position: relative;
    padding-top: 34px;
    font-size: 12px;
    padding-left: 17px;
	
}
#newsTop ul li span{
    position: absolute;
    font-size: 15px;
    display: block;
    color: #000;
    width: 83px;
    height: 21px;
    line-height: 23px;
    text-align: center;
    background: #fff;
    top: 0;
    left: 62px;
    letter-spacing: 0.03em;
}
#newsTop ul li a{
    text-decoration: none;
    letter-spacing: 0.05em;
    transition: .3s ease;
}
#newsTop ul li a:hover{
    text-shadow: 0px 0px 6px #15B0C2, 0px 0px 6px #15B0C2;
}
#newsList{
    background: #000;
}
/*--NEW CSS↓--*/
#newVisual{
    position: fixed;
    overflow: auto;
    z-index: 9999;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}
#newVisual:before{
    content: "";
    position: fixed;
    width: 100%;
    height: 0;
    background: rgba(0,0,0,.85);
    bottom: 0;
    transition: .4s cubic-bezier(0.02, 0.88, 0.58, 1);
}
#newVisual.active:before{
    height: 100%;
}
#newVisual.active{
    pointer-events: auto;
}
#newVisual > div{
    display: none;
    width: 100%;
    height: 100%;
}
#newVisualIn{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    width: 580px;
    height: auto;
    margin: 0 auto;
    min-height: 100vh;
    min-height: 100%;
    padding: 30px 0;
    position: relative;
    transition: .4s ease-in-out;
    pointer-events: none;
}
#newVisualIn > div > figure{
    width: 580px;
    height: 821px;
    margin: 0 auto 10px;
    background: url(../img/common/new_visual.jpg) no-repeat 0 0 / 100%;
}
#newVisualIn > div > figcaption {
    color: #fff;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    letter-spacing: 0.05em;
}

/*--NEW-1213 CSS↓--*/

#mvBnr{
    position: fixed;
    overflow: auto;
    z-index: 9999;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}
#mvBnr:before{
    content: "";
    position: fixed;
    width: 100%;
    height: 0;
    background: rgba(0,0,0,.85);
    bottom: 0;
    transition: .4s cubic-bezier(0.02, 0.88, 0.58, 1);
}
#mvBnr.active:before{
    height: 100%;
}
#mvBnr.active{
    pointer-events: auto;
}
#mvBnr > div{
    display: none;
    width: 100%;
    height: 100%;
}
#mvBnrIn{
    pointer-events: none;
}
#mvBnrIn > div > figure{
    width: 800px;
    height: 407px;
    margin: auto;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}
.modalClose{
    width: 60px;
    height: 60px;
    position: fixed;
    margin: auto;
    top: 0;
    bottom: 0;
    right: 60px;
    z-index: 1000000;
    transition: .4s ease-in-out;
    opacity: 0;
    pointer-events: none;
}
.modalClose.active{
    opacity: 1;
    pointer-events: auto;
}
.modalClose a{
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
}
.modalClose a img{
    transition: all .6s;
    width: 100%;
}
.modalClose a:hover img{
    transform: rotate(360deg);
}

/* ▼FOOTER▼ --------------------------------- 
-------------------------------------------------*/

body#index footer #nav,
body#index #copyright,
#bttop,.shareTxt,
ul.share li.ln,
body#index #fmark{
    display: none;
}
body#index ul#psyLink {
    position: absolute;
    width: 230px;
    height: 74px;
    left: 37px;
    bottom: 0;
}
body#index ul#psyLink li{
    margin-bottom: 7px;
}
body#index ul#psyLink li:last-child{
    margin-bottom: 0;
}
body#index ul#psyLink li a{
    width: 100%;
    background: #FFF;
    display: block;
    height: 30px;
    line-height: 32px;
    color: #000;
    text-decoration: none;
    position: relative;
    font-size: 10px;
    letter-spacing: 0.1em;
    transition: .3s ease;
}
body#index ul#psyLink li a:hover{
    color: #fff;
}
ul#psyLink li a span{
    position: absolute;
    width: 100%;
    height: 100%;
    display: block;
    top: 0;
    left: 0;
    transition: .3s ease;
    padding-left: 8px;
}
ul#psyLink li a span:before{
    content: "";
    position: absolute;
    background: url(../img/common/triangle_r.svg) no-repeat 0 0 / 100%;
    width: 4px;
    height: 6px;
    right: 10px;
    margin: auto;
    top: 0;
    bottom: 0;
    transform: translateX(0);
    transition: .3s ease;
}
ul#psyLink li a:hover span:before{
    background: url(../img/common/triangle_r_w.svg) no-repeat 0 0 / 100%;
    transform: translateX(10px);
}
body#index ul.share{
    position: absolute;
    width: 83px;
    height: 42px;
    right: 20px;
    top: 20px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    z-index: 2;
}
body#index ul.share li {
    background: #000;
    border: 1px solid #1f1f1f;
    width: 42px;
    height: 42px;
}
body#index ul.share li a{
    display: block;
    height: 42px;
}
body#index ul.share li.fb{
    margin-left: -1px;
}
body#index ul.share li.tw a img{
    width: 17px;
}
body#index ul.share li.fb a img{
    width: 8px;
    padding-top: 10px;
}

/* ▼SUB-COMMON▼ --------------------------------- 
-------------------------------------------------*/

.subInCont{
    opacity: 0;
    transform: translateX(20px);
    transition: .3s ease-in-out;
}
.subInCont.active{
    transform: translateX(0);
    opacity: 1;
}
body#sub #fullWrap {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
  	-webkit-box-direction: normal;
  	-ms-flex-direction: column;
  	flex-direction: column;
    min-height: 100vh;
}
body#sub footer {
    margin-top: auto;
}
body#sub header ul#psyLink {
    position: absolute;
    width: 230px;
    height: 74px;
    left: 37px;
    bottom: 80px;
}
body#sub header ul#psyLink li{
    margin-bottom: 7px;
}
body#sub header ul#psyLink li:last-child{
    margin-bottom: 0;
}
body#sub header ul#psyLink li a{
    width: 100%;
    background: #FFF;
    display: block;
    height: 30px;
    line-height: 32px;
    color: #000;
    text-decoration: none;
    position: relative;
    font-size: 10px;
    letter-spacing: 0.1em;
    transition: .3s ease;
}
body#sub header ul#psyLink li a:hover{
    color: #fff;
}
body#sub ul.share {
    position: fixed;
    width: 83px;
    height: 42px;
    left: 110px;
    bottom: 20px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    z-index: 2;
}
body#sub ul.share li {
    background: #000;
    border: 1px solid #1f1f1f;
    width: 42px;
    height: 42px;
}
body#sub ul.share li a{
    display: block;
    height: 42px;
}
body#sub ul.share li.fb{
    margin-left: -1px;
}
body#sub ul.share li.tw a img{
    width: 17px;
}
body#sub ul.share li.fb a img{
    width: 8px;
    padding-top: 10px;
}
body#sub #fullWrap {
    min-width: 1280px;
    overflow: hidden;
    position: relative;
}
body#sub #rightArea, body#sub footer{
    margin-left: 303px;
    overflow: hidden;
}
body#sub footer{
    position: relative;
}
.subCont > h2{
    position: relative;
    height: 38px;
}
.subCont > h2 span{
    text-align: center;
    color: #000;
    background: #fff;
    padding: 5px 34px;
    font-size: 16px;
    display: inline-block;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 0;
}
footer #nav ul{
    margin: 70px auto 84px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}
footer #nav li{
    margin-left: 8px;
    margin-right: 8px;
    position: relative;
}
footer #nav li a{
    color: #fff;
    text-decoration: none;
    font-size: 12px;
    letter-spacing: 0.05em;
    transition: .3s ease;
}
footer #nav li a:hover{
    opacity: .5;
}
body#sub footer ul#psyLink {
    width: 464px;
    height: 30px;
    margin: 0 auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    position: absolute;
    left: 0;
    right: 0;
    top: 110px;
}
body#sub footer ul#psyLink li{
    margin-right: 4px;
}
body#sub footer ul#psyLink li:last-child{
    margin-right: 0;
}
body#sub footer ul#psyLink li a{
    width: 230px;
    background: #FFF;
    display: block;
    height: 30px;
    line-height: 30px;
    color: #000;
    text-decoration: none;
    position: relative;
    font-size: 10px;
    letter-spacing: 0.1em;
    transition: .3s ease;
}
body#sub footer ul#psyLink li a:hover{
    color: #fff;
}
#copyright {
    font-size: 11px;
    color: #7e7e7e;
    text-align: center;
    padding-bottom: 40px;
    line-height: 30px;
}
#fmark{
    width: 246px;
    margin: 0 auto 32px;
}
#fmark img{
    width: 100%;
}
#fmark > span{
    display: none;
}

/* ▼SUB-CHARACTER▼ --------------------------------- 
-------------------------------------------------*/

#cl_tab {
    width: 448px;
    padding-top: 30px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    margin: auto; 
}
#cl_tab li {
    width: 224px;
    height: 35px;
    background: #fff;
    border: 2px solid #fff;
    position: relative;
    transition: all .3s ease;
}
#cl_tab li:after {
    content: "";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 3px 0 3px 5px;
    border-color: transparent transparent transparent #fff;
    position: absolute;
    top: 50%;
    right: 13px;
    transform: translateY(-50%);
}
#cl_tab li a {
    display: block;
    font-size: 15px;
    line-height: 33px;
    text-align: center;
    color: #000;
    text-decoration: none;
}
#cl_tab li.active { background: #000; }
#cl_tab li.active a { color: #fff; pointer-events: none;}
ol.cl{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    position: relative;
    width: 100%;
    max-width: 1600px;
    height: 568px;
    margin: 0 auto;
    opacity: 0;
    pointer-events: none;
    transition: all .3s ease;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
ol.cl.active {
    opacity: 1;
    pointer-events: auto;
}
ol.cl li {
    width: 180px;
    position: absolute;
    top: 0;
    margin: auto;
}
ol.cl li img {
    width: 100%;
}
li#chara01{
    left: 0;
    right: -12%;
    z-index: 8;
}
li#chara02{
    left: 0;
    right: 12%;
    z-index: 7;
}
li#chara03{
    left: -59%;
    right: 0;
}
li#chara04{
    left: 0;
    right: -38%;
    z-index: 5;
}
li#chara05{
    left: 0;
    right: 36%;
    z-index: 6;
}
li#chara06{
    left: -82%;
    right: 0;
}
li#chara07{
    left: 0;
    right: -61%;
}
li#chara08{
    left: 83%;
    right: 0;
}
/*li#chara09{  }*/
li#chara10{
    left: 0;
    right: -16%;
    z-index: 8;
}
li#chara11{
    left: 0;
    right: -54%;
    z-index: 7;
}
li#chara12{
    left: -55%;
    right: 0;
    z-index: 6;
}
li#chara13{
    left: -18%;
    right: 0;
    z-index: 5;
}
ol.cl li a{
    transition: .3s ease-in-out;
}
ol.cl:hover li a:not(:hover){
    opacity: .5;
}
#charaIndexWrap{
    margin-top: 50px;
    margin-bottom: 50px;
    height: 568px;
}
#charaIndexWrap .owlControl,
#charaDotNav{
    display: none;
}
ul.charaThumb{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    max-width: 1067px;
    margin: 0 auto 40px;
    position: relative;
}
ul.charaThumb:after {
    content: "";
    width: 100%;
    height: 1px;
    background: #2f2f2f;
    position: absolute;
    bottom: -20px;
    left: 0;
}
ul.charaThumb:last-child:after { display: none; }
ul.charaThumb li{
    width: 525px;
    height: 85px;
    background-size: 100%;
    background-position: 0 0;
    background-repeat: no-repeat;
    position: relative;
    margin-right: 2px;
    margin-left: 2px;
    margin-bottom: 4px;
}
ul#charaThumb02{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    max-width: 1600px;
    margin: 0 auto;
}
ul#charaThumb02 li{
    position: relative;
    margin-right: 2px;
    margin-left: 2px;
    margin-bottom: 4px;
}
@media screen and (max-width:1395px) { 
    ul.charaThumb li{
        width: calc(50% - 8px);
        height: auto;
        padding-top: calc(8.7% - 8px);
        position: relative;
    }
    ul#charaThumb02 li{
        width: calc(50% - 8px);
    }
    ul#charaThumb02 li img{
        width: 100%;
    }
    ul.charaThumb li a{
        display: block;
        width: 100% !important;
        height: 100% !important;
        position: absolute;
        top: 0;
        left: 0;
        background-size: 100% !important;
        background-position: 0 0 !important;
        background-repeat: no-repeat !important;
    }
}
ul.charaThumb li a{
    display: block;
    width: 525px;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: #fff;
    transition: .3s ease;
}

ul#charaThumb02 li a{
    background: #fff;
    display: block;
    transition: .3s ease;
}
ul.charaThumb li a:hover,
ul.charaThumb li a.active,
ul#charaThumb02 li a:hover,
ul#charaThumb02 li a.active{
    background: #777;
}

ul.charaThumb li#charaT01 a{ background-image: url(../img/pc/chara01_t.png); }
ul.charaThumb li#charaT02 a{ background-image: url(../img/pc/chara02_t.png); }
ul.charaThumb li#charaT03 a{ background-image: url(../img/pc/chara03_t.png); }
ul.charaThumb li#charaT04 a{ background-image: url(../img/pc/chara04_t.png); }
ul.charaThumb li#charaT05 a{ background-image: url(../img/pc/chara05_t.png); }
ul.charaThumb li#charaT06 a{ background-image: url(../img/pc/chara06_t.png); }
ul.charaThumb li#charaT07 a{ background-image: url(../img/pc/chara07_t.png); }
ul.charaThumb li#charaT08 a{ background-image: url(../img/pc/chara08_t.png); }
ul.charaThumb li#charaT08 a{ background-image: url(../img/pc/chara08_t.png); }
ul.charaThumb li#charaT09 a{ background-image: url(../img/pc/chara09_t.png); }
ul.charaThumb li#charaT10 a{ background-image: url(../img/pc/chara10_t.png); }
ul.charaThumb li#charaT11 a{ background-image: url(../img/pc/chara11_t.png); }
ul.charaThumb li#charaT12 a{ background-image: url(../img/pc/chara12_t.png); }
ul.charaThumb li#charaT13 a{ background-image: url(../img/pc/chara13_t.png); }
ul.charaThumb li#charaT14 a{ background-image: url(../img/pc/chara14_t.png); }
ul.charaThumb li#charaT15 a{ background-image: url(../img/pc/chara15_t.png); }
ul.charaThumb li#charaT16 a{ background-image: url(../img/pc/chara16_t.png); }
ul.charaThumb li#charaT17 a{ background-image: url(../img/pc/chara17_t.png); }
ul.charaThumb li#charaT18 a{ background-image: url(../img/pc/chara18_t.png); }
ul.charaThumb li#charaT19 a{ background-image: url(../img/pc/chara19_t.png); }



#charaDetailWrap{
    position: relative;
    margin-bottom: 100px;
}
#charaDetailImg figure{
    width: 850px;
    margin: 0 auto;
    height: 853px;
    position: relative;
}
#charaDetailImg figure span{
    position: absolute;
    right: -85px;
    display: block;
    width: 650px;
}
#charaDetailImg figure span img{
    width: 100%;
}
#charaDetailImg02 figure{
    width: 850px;
    margin: 0 auto;
    height: 650px;
    position: relative;
}
#charaDetailImg02 figure span{
    position: absolute;
    right: 60px;
    display: block;
    width: 560px;
    top: 180px;
}
#charaDetailImg02 figure span img{
    width: 100%;
}
#charaPager {
    position: absolute;
    top: 370px;
    left: 0;
    width: calc(100% - 60px);
    height: 20px;
    margin: auto;
    right: 0;
    z-index: 2;
}
#charaPager p{
    width: 70px;
}
#charaPager p img{
    vertical-align: middle;
}
#charaPager .prev{
    float: left;
}
#charaPager .prev a,
#charaPager .next a{
    transition: .2s ease-in-out;
    display: block;
}
#charaPager .prev a:hover{
    transform: translateX(-10px);
}
#charaPager .next a:hover{
    transform: translateX(10px);
}
#charaPager .next{
    float: right;
}
#charaDetailTxt{
    position: absolute;
    width: 850px;
    margin: auto;
    right: 0;
    left: 0;
    top: 0;
}
#charaDetailTxt > h3{
    font-size: 38px;
    letter-spacing: 0.12em;
    position: absolute;
    top: 230px;
    left: 0;
}
[data-ruby] {
    position: relative;
}
[data-ruby]:before {
    content: attr(data-ruby);
    position: absolute;
    top: -1.3em;
    left: 0;
    right: 0;
    margin: auto;
    font-size: 12px;
    letter-spacing: 0.3em;
}
rt {
    display: none;
}
#cVoice{
    font-size: 18px;
    letter-spacing: 0.3em;
    position: absolute;
    top: 300px;
    left: 0;
}
#cTxt{
    font-size: 15px;
    letter-spacing: 0.1em;
    position: absolute;
    top: 440px;
    left: 0;
    width: 420px;
    line-height: 34px;
}
#cTxt02{
    font-size: 15px;
    letter-spacing: 0.1em;
    position: absolute;
    top: 515px;
    right:40px;
    width: 560px;
    line-height: 34px;
}

/* ▼SUB-ON AIR▼ --------------------------------- 
-------------------------------------------------*/

.onair > h2{
    margin-bottom: 60px;
}
#onairWrap{
    position: relative;
    z-index: 1;
}
.oaBox{
    width: 900px;
    /*width: 80%;
    min-width: 977px;
    max-width: 1200px;*/
    position: relative;
    margin: 0 auto;
}
.oaBox > h3{
    margin-bottom: 60px;
}
.oaBox > h3 span{
    height: 38px;
    line-height: 38px;
    display: inline-block;
    width: 162px;
    text-align: center;
    color: #000;
    background: #fff;
    font-size: 16px;
}
.oaBox > h3 span:nth-of-type(2){
    background: #222222;
    color: #fff;
}
.oaBox > h3{
    text-align: center;
}
#oaTv{
    margin-bottom: 60px;
}
#oaTvTxt{
    background: url(../img/pc/oa_tvtxt.png) no-repeat;
    width: 838px;
    height: 133px;
    margin-bottom: 60px;
    margin-left: 30px;
}
#oaWebTxt{
    background: url(../img/pc/oa_webtxt.png) no-repeat;
    width: 666px;
    height: 166px;
    margin-bottom: 60px;
    margin-left: 30px;
}
.oaTBL table{
    width: 100%;
    font-size: 20px;
}
.oaTBL table tr{
    display: inline-table;
    margin-bottom: 20px;
    position: relative;
    border-bottom: 1px solid #313131;
    width: 100%;
}
.oaTBL table td{
    padding-bottom: 20px;
    width: 33.3%;
}
.oaTBL table td:nth-child(1){
    padding-left: 30px;
}
.oaTBL table td:nth-child(3){
    color: #ea0000;
    font-size: 16px;
}
.comSym{
    position: relative;
}
#ceSym{
    position: fixed;
    width: 375px;
    height: 375px;
    top: 0;
    right: 0;
    bottom: 0;
    left: 303px;
    margin: auto;
    z-index: 0;
    min-width: 977px;
}
#ceSym img{
    width: 100%;
    height: 100%;
    opacity: .13;
}
#oaCaution{
    font-size: 13px;
    color: #fff;
    margin-top: 20px;
}

/* ▼SUB-STAFF&CAST▼ --------------------------------- 
-------------------------------------------------*/

#subRightBg{
    position: absolute;
    background: #181818;
    width: calc(50% - 152px);
    height: 100%;
    top: 0;
    right: 0;
    z-index: -1;
}
.scBox > h3{
    display: block !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
}
#scWrap{
    position: relative;
    z-index: 1;
    width: 90%;
    min-width: 977px;
    max-width: 1200px;
    margin: 0 auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-top: 80px;
    margin-bottom: 40px;
}
.scBox {
    width: 50%;
}
#cast{
    padding-left: 120px;
}
#staff{
    padding-left: 50px;
}
.scBox > ul{
    font-size: 16px;
    font-weight: 200;
    letter-spacing: 0.1em;
}
.scBox > ul li{
    margin-bottom: 20px;
}
.spF{
    margin-top: 50px;
}
.scBox > ul li .fontS{
    font-size: 12px;
}

/* ▼SUB-TRAILER▼ --------------------------------- 
-------------------------------------------------*/

#trailerWrap {
    position: relative;
    z-index: 1;
    width: 90%;
    min-width: 977px;
    max-width: 1200px;
    margin: 0 auto;
    margin-top: 85px;
    margin-bottom: 40px;
}
#trailerWrap > ul{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-top: 66px;
}
#trailerWrap > ul li{
    width: 50%; 
    height: 300px;
    padding-right: 5px;
    box-sizing: border-box;
    margin-bottom: 70px;
}
#trailerWrap > ul li:nth-child(even){
    padding-left: 5px;
    padding-right: 0;
}
#trailerWrap > ul li a{
    display: block;
    width: 100%;
    height: 100%;
    background-size: 100%;
    background-position: center center;
    position: relative;
    transition: .3s;
    z-index: 2;
}
#trailerWrap > ul li a:before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.5);
    z-index: 1;
    transform-origin: left top;
    transform: scale(1, 1);
    transition: transform .3s ease-in-out;
}
#trailerWrap > ul li a:hover:before {
    transform-origin: right top;
    transform: scale(0, 1);
}
#trailerWrap > ul li a:after{
    content: "";
    position: absolute;
    background: url(../img/common/mov_btn.svg) no-repeat 0 0 / contain;
    width: 48px;
    height: 48px;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    z-index: 5;
}
.pvName{
    font-size: 16px;
    border: 1px solid #fff;
    height: 30px;
    display: inline-block;
    background: #000;
}
.pvName > span:nth-of-type(1){
    padding: 0 30px;
}
.pvName > span:nth-of-type(2){
    background: #fff;
    display: inline-block;
    color: #000;
    padding: 0 50px;
    box-sizing: border-box;
}

/* ▼SUB-INTRODUCTION▼ --------------------------------- 
-------------------------------------------------*/

ul#isLink{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}
ul#isLink li a{
    display: block;
    width: 180px;
    height: 38px;
    line-height: 34px;
    background: #000;
    border:2px solid #fff;
    text-align: center;
    text-decoration: none;
    font-size: 16px;
    position: relative;
    transition: .3s ease;
}
ul#isLink li a:before{
    content: "";
    position: absolute;
    background: url(../img/common/triangle_r_w.svg) no-repeat 0 0 / 100%;
    width: 4px;
    height: 6px;
    right: 14px;
    margin: auto;
    top: 0;
    bottom: 0;
    transform: translateX(0);
    transition: .3s ease;
}
ul#isLink li a.active{
    color: #000;
    background: #fff;
}
ul#isLink li{
    margin-left: -2px;
}
ul#isLink li:first-child{
    margin-left: 0;
}
#introWrap {
    position: relative;
    z-index: 1;
    width: 960px;
    margin: 0 auto;
    margin-top: 85px;
    margin-bottom: 40px;
}
#introTop{
    position: relative;
    height: 295px;
    margin: 70px auto 60px;
}
#introTop p{
    background: url(../img/pc/intro_txt.png) no-repeat;
    width: 719px;
    height: 152px;
    position: absolute;
    margin: auto;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}
#introBgSym{
    position: absolute;
    width: 295px;
    height: 295px;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    z-index: 0;
}
#introBgSym img{
    width: 100%;
    height: 100%;
    opacity: .13;
}
#introWrap > p{
    font-size: 16px;
    font-weight: 200;
    color: #fff;
    line-height: 46px;
    letter-spacing: 0.02em;
}

/* ▼SUB-STORY▼ --------------------------------- 
-------------------------------------------------*/

#storyWrap{
    width: 80%;
    min-width: 940px;
    max-width: 1200px;
    position: relative;
    margin: 85px auto 50px;
}
#storyWrap > dl{
    color: #fff;
}
#storyWrap > dl dt{
    position: relative;
}
#storyWrap > dl dt > span{
    font-size: 30px;
    display: block;
    letter-spacing: 0.04em;
    padding-bottom: 24px;
    position: relative;
    cursor: pointer;
    padding-top: 20px;
    padding-left: 30px;
    padding-right: 30px;
}
#storyWrap > dl dt > span:before{
    content: "";
    position: absolute;
    width: 100%;
    height: 1px;
    background: #2f2f2f;
    bottom: 0;
    left: 0;
}
#storyWrap > dl dt > span:after{
    content: "";
    background: url(../img/common/arrow_wr.svg) no-repeat;
    width: 70px;
    height: 5px;
    position: absolute;
    top: 44px;
    right: 30px;
    transition: .3s ease-in-out;
}
#storyWrap > dl dt:hover > span:after{
    transform: rotate(90deg);
}
#storyWrap > dl dt.active > span:after{
    transform: rotate(90deg);
    margin-top: 50px;
}
#storyWrap > dl dt:before{
    content: "";
    width: 100%;
    height: 1px;
    background: #23b8c5;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 1;
    transform: scale(0, 1);
    transform-origin: right top;
    transition: transform .3s;
}
#storyWrap > dl dt:hover:before{
    transform-origin: left top;
    transform: scale(1, 1);
}
#storyWrap > dl dt.active:before{
    transform: scale(1, 1);
}
#storyWrap > dl dt:hover > span:after,
#storyWrap > dl dt.active > span:after{
    transform: rotate(90deg);
}
#storyWrap > dl dt > span > span{
    color: #23b8c5;
}
#storyWrap > dl dd{
    font-size: 16px;
    line-height: 43px;
    font-weight: 200;
    letter-spacing: 0.08em;
    padding-top: 24px;
    padding-left: 30px;
    padding-right: 30px;
    padding-bottom: 60px;
}
#storyWrap > dl dd:last-of-type{
    padding-bottom: 0;
}

/*BDDVD*/
#bddvdWrap {
	position: relative;
	z-index: 50;
	font-weight:500;
	font-size:16px;
}

#bddvdWrap .bddvds {
	width: 922px;
	margin-right: auto;
	margin-left: auto;
}
#bddvdNav {
	width: 100%;
	display: flex;
	justify-content: space-between;
	padding-bottom: 65px;
}

#bddvdNav li {
	width:178px;
}
#bddvdNav li a {
	display:block;
	height:100%;
	text-decoration:none;
/*	opacity:0.7;
	transition:all 0.3s ease;*/
}
/*#bddvdNav li a:hover {
	opacity:1;
}*/
#bddvdNav li a .thumb {
	width:178px;
	border:1px solid #FFF;
	margin-bottom:8px;
}
#bddvdNav li a .thumb img {
	width:176px;
	height:auto;
}
#bddvdNav li a .bdListName {
	height:26px;
	border:1px solid #FFF;
	line-height:26px;
}
#bddvdSpec {
	display: flex;
	justify-content: space-between;
	padding-bottom: 30px;
}
#bddvdSpecImg {
	width: 364px;
	border: 1px solid rgba(255,255,255,1);
	height:482px;
}
#dvdSpecText { width: 550px; line-height:41px;font-size:16px; }
#bddvdWrap h3 {
	height: 53px;
	background: rgba(255,255,255,1);
	font-size: 24px;
	line-height: 51px;
	color: rgba(0,0,0,1);
	text-align: center;
	margin-bottom: 10px;
}
#bddvdWrap .sp {
	display:none;
}
.salesDate {
	font-size: 20px;
	line-height: 100px;
	text-align: center;
	height: 100px;
}
#dvdSpecText dl {
	margin:0 10px;
}
#dvdSpecText dt {
	clear:both;
	float:left;
}
#dvdSpecText dt:before {
	content:'■';
}
#dvdSpecText dt:after {
	content:'：';
}
#bddvdWrap h4 {
	background: rgba(64,64,64,1);
	height: 60px;
	font-size: 18px;
	line-height: 60px;
	color: rgba(255,255,255,1);
	text-align: center;
}
#bddvdWrap .bddvdSpecialBox {
	border: 1px solid rgba(64,64,64,1);
	padding: 25px 60px 35px;
	line-height:46px;
	margin-bottom:20px;
}
.bddvdins { padding-bottom: 30px; }
.bddvdins img {
	width:100%;
	height:auto;
}
.bddvdtitle {
	font-weight: bold;
	color: #23b8c5;
}

/* ▼SUB-MUSIC▼ --------------------------------- 
-------------------------------------------------*/

.music > h2 {
    margin-bottom: 60px;
}
#musicWrap{
    width: 922px;
    margin: 0 auto;
}
ul#tabLink{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}
ul#tabLink li{
    width: 456px;
}
ul#tabLink li:first-child{
    margin-right: 10px;
}
ul#tabLink li a{
    display: block;
    text-decoration: none;
    width: 100%;
    height: 100%;
    padding: 16px;
    border: 1px solid #2B2B2B;
    color: #fff;
    letter-spacing: 0.1em;
    position: relative;
}
ul#tabLink li a:before{
    content: "";
    position: absolute;
    top: -1px;
    left: -1px;
    width: 0;
    height: 1px;
    background: #fff;
    transition: .3s ease-in-out;
}
ul#tabLink li a:after{
    content: "";
    position: absolute;
    bottom: -1px;
    right: -1px;
    width: 0;
    height: 1px;
    background: #fff;
    transition: .3s ease-in-out;
}
ul#tabLink li a:hover:before,
ul#tabLink li a:hover:after,
ul#tabLink li a.active:before,
ul#tabLink li a.active:after{
    width: calc(100% + 2px);
}
ul#tabLink li a > span:before{
    content: "";
    position: absolute;
    top: -1px;
    left: -1px;
    width: 1px;
    height: 0;
    background: #fff;
    transition: .3s ease-in-out;
}
ul#tabLink li a > span:after{
    content: "";
    position: absolute;
    bottom: -1px;
    right: -1px;
    width: 1px;
    height: 0;
    background: #fff;
    transition: .3s ease-in-out;
}
ul#tabLink li a:hover > span:before,
ul#tabLink li a:hover > span:after,
ul#tabLink li a.active > span:before,
ul#tabLink li a.active > span:after{
    height: calc(100% + 2px);
}
ul#tabLink li a .mOE{
    display: block;
    background: #2B2B2B;
    text-align: center;
    font-size: 10px;
    padding: 2px 0;
    margin-bottom: 10px;
}
ul#tabLink li a .mTtl{
    text-align: center;
    display: block;
    font-size: 18px;
}
ul#tabLink li a .mTtl > span{
    font-size: 14px;
}
#oneMusicWrap{
    margin-top: 50px;
}
#oneMusicWrap > h3{
    font-size: 24px;
    font-family: "游明朝体", "YuMincho", "游明朝", "Yu Mincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN W3", HiraMinProN-W3, "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", serif;
    text-align: center;
}
#oneMusicWrap > h3 .mSingle{
    font-family: 'Roboto', sans-serif;
    display: inline-block;
    background: #2B2B2B;
    text-align: center;
    font-size: 13px;
    padding: 0px 8px;
    letter-spacing: 0.07em;
    vertical-align: text-top;
    margin-top: 1px;
    margin-left: 18px;
}
#oneMusicWrap > h3 .mTtl{
    font-size: 34px;
}
#mSale{
    text-align: center;
    color: #23b8c5;
    font-size: 17px;
    margin-bottom: 60px;
    font-weight: bold;
}
.oneMusic{
    position: relative;
    margin-bottom: 80px;
}
.oneMusic > h3{
    position: absolute;
    width: 448px;
    background: #2B2B2B;
    text-align: center;
    font-size: 15px;
    top: 0;
    right: 0;
    letter-spacing: 0.06em;
    font-weight: 400;
    padding: 8px 0;
    line-height: 20px;
}
.oneMusic > figure{
    width: 440px;
    float: left;
}
.oneMusic > .oneMusicTxt{
    width: 448px;
    margin-top: 86px;
    float: right;
}
.oneMusic > figure img{
    width: 100%;
}
.cdIcon{
    color: #000;
    background: #fff;
    font-size: 14px;
    display: block;
    width: 60px;
    line-height: 1.5;
    text-align: center;
    margin-bottom: 10px;
}
.dIcon{
    width: 170px !important;
}
.oneMusicTxt > ul li{
    font-size: 13px;
    border-bottom: 1px solid #2B2B2B;
    margin-bottom: 8px;
    padding-bottom: 8px;
    letter-spacing: 0.06em;
}
.oneMusicTxt > ul{
    margin-bottom: 30px;
}
.supplement{
    font-size: 12px;
    margin-bottom: 26px;
}
#mOfficialLink{
    margin-bottom: 10px;
}
#mOfficialLink a{
    width: 300px;
    background: #FFF;
    display: block;
    height: 40px;
    line-height: 40px;
    color: #000;
    text-decoration: none;
    position: relative;
    font-size: 14px;
    transition: .3s ease;
    margin: 0 auto;
}
#mOfficialLink a:hover{
    color: #fff;
}
#mOfficialLink a span{
    position: absolute;
    width: 100%;
    height: 100%;
    display: block;
    top: 0;
    left: 0;
    transition: .3s ease;
    padding-left: 12px;
}
#mOfficialLink a span:before{
    content: "";
    position: absolute;
    background: url(../img/common/triangle_r.svg) no-repeat 0 0 / 100%;
    width: 4px;
    height: 6px;
    right: 10px;
    margin: auto;
    top: 0;
    bottom: 0;
    transform: translateX(0);
    transition: .3s ease;
}
#mOfficialLink a:hover span:before{
    background: url(../img/common/triangle_r_w.svg) no-repeat 0 0 / 100%;
    transform: translateX(10px);
}