/*--------------------------------------------------------------
#screen-area
--------------------------------------------------------------*/

/* mobile */
@media (min-width: 300px) {
	
	.main-box {
		position: absolute;
		top: 50%;
		left: 7%;
		-webkit-transform: translateY(-50%);
		transform: translateY(-50%);
		width: auto;
	}
	
	.main-box p {
		margin: 10px 0 0 5px;
		padding: 0;
		font-size: 10px;
		color: #C0FA00;
		font-style: italic;
		font-weight: 300;
		text-align: left;
	}
	
	
}

/* Small than tablet */
@media (min-width: 768px) {
	
	
	
}


/* Larger than tablet */
@media (min-width: 992px) {
	
	.main-box {
		position: absolute;
		top: 50%;
		left: 10%;
		-webkit-transform: translateY(-50%);
		transform: translateY(-50%);
		width: auto;
	}
	
	.main-box p {
		margin: 10px 0 0 5px;
		padding: 0;
		font-size: 13px;
		color: #C0FA00;
		font-style: italic;
		font-weight: 300;
		text-align: left;
	}
	
}








/*--------------------------------------------------------------
.glitch
--------------------------------------------------------------*/

/* mobile */
@media (min-width: 300px) {
	
	.glitch {
		position: relative;
		color: rgba(255,255,255,0.95);
		font-size: 2em;
		font-weight: 800;
		letter-spacing: 5px;
		animation: glitch-skew 1s infinite linear alternate-reverse;
		-webkit-animation: jerkwhole 2.5s infinite;
	}
	
	.glitch::before {
		content: attr(data-text);
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		text-shadow: -1px 0 #C0FA00;
		clip: rect(44px, 450px, 56px, 0);
		animation: glitch-anim 1s infinite linear alternate-reverse;
	}
	
	.glitch::after {
		content: attr(data-text);
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		text-shadow: -1px 0 #ff00c1, 1px 1px #ff00c1;
		clip: rect(44px, 450px, 56px, 0);
		animation: glitch-anim2 1s infinite linear alternate-reverse;
	}
	
	
}

/* Small than tablet */
@media (min-width: 768px) {
	
	
	
}


/* Larger than tablet */
@media (min-width: 992px) {
	
	.glitch {
		position: relative;
		color: rgba(255,255,255,0.95);
		font-size: 4em;
		font-weight: 800;
		letter-spacing: 10px;
		animation: glitch-skew 1s infinite linear alternate-reverse;
		-webkit-animation: jerkwhole 2.5s infinite;
	}
	
}



@keyframes glitch-anim {
0% {
	clip: rect(11px, 9999px, 63px, 0);
	transform: skew(0.97deg);
}
5% {
	clip: rect(86px, 9999px, 9px, 0);
	transform: skew(0.85deg);
}
10% {
	clip: rect(46px, 9999px, 23px, 0);
	transform: skew(0.9deg);
}
15% {
	clip: rect(16px, 9999px, 9px, 0);
	transform: skew(0.17deg);
}
20% {
	clip: rect(64px, 9999px, 97px, 0);
	transform: skew(0.35deg);
}
25% {
	clip: rect(53px, 9999px, 63px, 0);
	transform: skew(0.17deg);
}
30% {
	clip: rect(55px, 9999px, 51px, 0);
	transform: skew(0.25deg);
}
35% {
	clip: rect(11px, 9999px, 70px, 0);
	transform: skew(0.67deg);
}
40% {
	clip: rect(82px, 9999px, 97px, 0);
	transform: skew(0.07deg);
}
45% {
	clip: rect(24px, 9999px, 73px, 0);
	transform: skew(0.1deg);
}
50% {
	clip: rect(20px, 9999px, 41px, 0);
	transform: skew(0.34deg);
}
55% {
	clip: rect(81px, 9999px, 44px, 0);
	transform: skew(0.68deg);
}
60% {
	clip: rect(53px, 9999px, 72px, 0);
	transform: skew(0.89deg);
}
65% {
	clip: rect(21px, 9999px, 25px, 0);
	transform: skew(0.33deg);
}
70% {
	clip: rect(23px, 9999px, 74px, 0);
	transform: skew(0.19deg);
}
75% {
	clip: rect(19px, 9999px, 51px, 0);
	transform: skew(0.65deg);
}
80% {
	clip: rect(50px, 9999px, 70px, 0);
	transform: skew(0.98deg);
}
85% {
	clip: rect(48px, 9999px, 13px, 0);
	transform: skew(0.75deg);
}
90% {
	clip: rect(64px, 9999px, 6px, 0);
	transform: skew(0.52deg);
}
95% {
	clip: rect(81px, 9999px, 65px, 0);
	transform: skew(0.71deg);
}
}

@keyframes glitch-anim2 {
0% {
	clip: rect(9px, 9999px, 87px, 0);
	transform: skew(0.01deg);
}
5% {
	clip: rect(73px, 9999px, 45px, 0);
	transform: skew(0.91deg);
}
10% {
	clip: rect(15px, 9999px, 52px, 0);
	transform: skew(0.77deg);
}
15% {
	clip: rect(52px, 9999px, 45px, 0);
	transform: skew(0.13deg);
}
20% {
	clip: rect(71px, 9999px, 6px, 0);
	transform: skew(0.63deg);
}
25% {
	clip: rect(38px, 9999px, 96px, 0);
	transform: skew(0.75deg);
}
30% {
	clip: rect(81px, 9999px, 15px, 0);
	transform: skew(0.45deg);
}
35% {
	clip: rect(35px, 9999px, 13px, 0);
	transform: skew(0.43deg);
}
40% {
	clip: rect(33px, 9999px, 57px, 0);
	transform: skew(0.25deg);
}
45% {
	clip: rect(21px, 9999px, 22px, 0);
	transform: skew(0.36deg);
}
50% {
	clip: rect(41px, 9999px, 41px, 0);
	transform: skew(0.27deg);
}
55% {
	clip: rect(57px, 9999px, 75px, 0);
	transform: skew(0.96deg);
}
60% {
	clip: rect(48px, 9999px, 5px, 0);
	transform: skew(0.54deg);
}
65% {
	clip: rect(20px, 9999px, 81px, 0);
	transform: skew(0.3deg);
}
70% {
	clip: rect(80px, 9999px, 78px, 0);
	transform: skew(0.35deg);
}
75% {
	clip: rect(28px, 9999px, 16px, 0);
	transform: skew(0.79deg);
}
80% {
	clip: rect(42px, 9999px, 22px, 0);
	transform: skew(0.09deg);
}
85% {
	clip: rect(37px, 9999px, 48px, 0);
	transform: skew(0.31deg);
}
90% {
	clip: rect(13px, 9999px, 34px, 0);
	transform: skew(0.81deg);
}
95% {
	clip: rect(16px, 9999px, 93px, 0);
	transform: skew(0.74deg);
}
}

@keyframes glitch-skew {
0% {
	transform: skew(-1deg);
}
10% {
	transform: skew(1deg);
}
20% {
	transform: skew(0deg);
}
30% {
	transform: skew(1deg);
}
40% {
	transform: skew(-3deg);
}
50% {
	transform: skew(0deg);
}
60% {
	transform: skew(-1deg);
}
70% {
	transform: skew(0deg);
}
80% {
	transform: skew(1deg);
}
90% {
	transform: skew(1deg);
}
}

@-webkit-keyframes jerkwhole {
	30% {
}
40% {
	opacity: 1;
	top: 0;
	left: 0px;
	-webkit-transform: scale(1, 1);
	-webkit-transform: skew(0, 0);
}
41% {
	opacity: 0.8;
	top: 0px;
	left: -100px;
	-webkit-transform: scale(1, 1.1);
	-webkit-transform: skew(20deg, 0);
}
42% {
	opacity: 0.8;
	top: 0px;
	left: 50px;
	-webkit-transform: scale(1, 1.1);
	-webkit-transform: skew(-40deg, 0);
}
43% {
	opacity: 1;
	top: 0;
	left: 0;
	-webkit-transform: scale(1, 1);
	-webkit-transform: skew(0, 0);
}
65% {
} }


/*--------------------------------------------------------------
.scrolldown
--------------------------------------------------------------*/

/* mobile */
@media (min-width: 300px) {
	
	.scrolldown{
		position: absolute;
		right: 6%;
		bottom: 5%;
		height: 50px;
		z-index: 1;
	}

	.scrolldown span{
		position: absolute;
		left: -7px;
		top: -50px;
		color: #C0FA00;
		font-size: 12px;
		letter-spacing: 0.05em;
		writing-mode: vertical-rl;
		font-style: italic;
		font-weight: 300;
	}

	.scrolldown::after{
		content: "";
		position: absolute;
		top: 0;
		width: 1px;
		height: 50px;
		background: #C0FA00;
		animation: pathmove 1.4s ease-in-out infinite;
		opacity:0;
	}
	
	.scrolldown a{
		transition: all .3s;
	}

	.scrolldown a:hover{
		opacity: 0.5;
	}
	
	
}

/* Small than tablet */
@media (min-width: 768px) {
	
	
	
}


/* Larger than tablet */
@media (min-width: 992px) {
	
	.scrolldown{
		position: absolute;
		right: 4%;
		bottom: 5%;
		height: 4.16vw;
	}

	.scrolldown span{
		position: absolute;
		left: -0.66vw;
		top: -4.16vw;
		color: #C0FA00;
		font-size: 1.08vw;
		letter-spacing: 0.05em;
		writing-mode: vertical-rl;
		font-style: italic;
		font-weight: 300;
	}
	
}


@keyframes pathmove{
	0%{
		height:0;
		top:0;
		opacity: 0;
	}
	30%{
		height: 50px;
		opacity: 1;
	}
	100%{
		height:0;
		top: 70px;
		opacity: 0;
	}
}

/*--------------------------------------------------------------
h3
--------------------------------------------------------------*/

/* mobile */
@media (min-width: 300px) {
	
	h3 {
		margin:  0 0 30px 0;
		padding: 0;
		color: #C0FA00;
		font-size: 40px;
		font-weight: 600;
		font-style: italic;
	}
	
}

/* Small than tablet */
@media (min-width: 768px) {
	
	
	
}


/* Larger than tablet */
@media (min-width: 992px) {
	
	h3 {
		margin:  0 0 3.33vw 0;
		padding: 0;
		color: #C0FA00;
		font-size: 5vw;
		font-weight: 600;
		font-style: italic;
	}
	
	
}

/*--------------------------------------------------------------
#about-area
--------------------------------------------------------------*/

/* mobile */
@media (min-width: 300px) {
	
	#about-area {
		margin: 0;
		padding: 0;
		position: relative;
		height: 100vh;
		
	}
	
	#video-area{
		position: absolute;
		top: 0;
		right:0;
		left:0;
		bottom:0;
		overflow: hidden;
	}
	
	#video {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 177.77777778vh;
		height: 56.25vw;
		min-height: 100%;
		min-width: 100%;
		opacity: 0.08;
	}
	
	
	.about-box {
		margin: 0;
		padding: 0;
		position: relative;
		top: 50%;
		left: 50%;
		-webkit-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%);
		text-align: center;
		width: 100%;
		z-index: 3;
	}
	
	
	.about-box h4 {
		margin: 0;
		padding: 0 10px;
		color: #1F1F1F;
		font-size: 40px;
		font-weight: 900;
		box-decoration-break: clone;
		-webkit-box-decoration-break: clone;
		display: inline;
		background-color: #C0FA00;
		letter-spacing: 5px;
	}
	
	.about-box p {
		margin: 40px 0 0 0;
		padding: 0 15%;
		font-size: 15px;
		font-weight: 500;
		letter-spacing: 1px;
		line-height: 2;
		text-align: left;
		text-align: justify;
	}
	
	.aboutbt{
		position: absolute;
		bottom: 10%;
		right: 10%;
		z-index: 4;
	}
}

/* Small than tablet */
@media (min-width: 768px) {
	
	
	
}


/* Larger than tablet */
@media (min-width: 992px) {
	
	
	.about-box {
		margin: 0;
		padding: 0;
		top: 50%;
		left: 50%;
		-webkit-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%);
		text-align: center;
	}
	
	
	.about-box h4 {
		margin: 0;
		padding: 0 0.83vw;
		color: #1F1F1F;
		font-size: 5.83vw;
		font-weight: 900;
		box-decoration-break: clone;
		-webkit-box-decoration-break: clone;
		display: inline;
		background-color: #C0FA00;
		letter-spacing: 0.41vw;
		white-space: nowrap;
	}
	
	.about-box p {
		margin: 3.33vw 0 0 0;
		padding: 0;
		font-size: 1.5vw;
		font-weight: 500;
		letter-spacing: 0.08vw;
		line-height: 2;
		text-align: center;
	}
	
	.aboutbt{
		position: absolute;
		bottom: 10%;
		right: 10%;
	}
	
}


/*--------------------------------------------------------------
#service-area
--------------------------------------------------------------*/

/* mobile */
@media (min-width: 300px) {
	
	#service-area{
		position: relative;
		height: 100vh;
		text-align: center;
		color: #fff;
		background: url("../img/movie.jpg") no-repeat;
		background-size: cover;
		box-sizing: border-box;
		overflow: hidden;
	}
	
	#loading {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		font-weight: bold;
	}

	#loading.disappear{
		display: none;   
	}
	
	#service-area h2{
		font-size: 18vw;
		font-style: italic;
		font-weight: 600;
		color: transparent;
		-webkit-text-stroke: 1px #C0FA00;
		text-align: left;
		position: absolute;
		top: 8vw;
		left: 5%;
	}
	
	#service-area ul{
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		margin: 0;
		padding: 0;
		width: 80%;
		border-top: 1px solid #C0FA00;
	}
	
	#service-area ul li{
		margin: 0;
		padding: 30px 0;
		border-bottom: 1px solid #C0FA00;
		text-align: left;
		color: #C0FA00;
	}
	
	#service-area dt{
		font-size: 30px;
		font-style: italic;
		font-weight: 300;
	}
	
	#service-area dd{
		margin: 0 0 0 10px;
		font-size: 14px;
	}

	#youtube-area{
		opacity: 0;    
	}
	
	#youtube-area.appear {
		animation-name:PageAnimeAppear;
		animation-duration:.5s;
		animation-fill-mode:forwards;
	}
	
	#youtube {
		position: absolute;
		top: 0;
		left: 50%;
		transform: translate(-50%, 0);
		width: 177.77777778vh;
		height: 56.25vw;
		min-height: 100%;
		min-width: 100%;
		opacity: 0.1;
		border-top: 100px solid #000;
		border-bottom: 100px solid #000;
	}
	
	#youtube-mask{
		position: absolute;
		z-index: 2;
		top: 0;
		width: 100%;
		height: 100%;
	}
	
}

/* Small than tablet */
@media (min-width: 768px) {
	
	
	
}


/* Larger than tablet */
@media (min-width: 992px) {
	
	
	#service-area h2{
		font-size: 16.6vh;
		font-style: italic;
		font-weight: 600;
		color: transparent;
		-webkit-text-stroke: 0.08vw #C0FA00;
		text-align: left;
		position: absolute;
		top: 0;
		left: 5%;
	}
	
	#service-area ul{
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		margin: 0;
		padding: 0;
		width: 45.8vw;
		border-top: 0.08vw solid #C0FA00;
	}
	
	#service-area ul li{
		margin: 0;
		padding: 2.5vw 0;
		border-bottom: 1px solid #C0FA00;
		text-align: left;
		color: #C0FA00;
	}
	
	#service-area dt{
		font-size: 5vw;
		font-style: italic;
		font-weight: 300;
	}
	
	#service-area dd{
		margin: 0 0 0 0.83vw;
		font-size: 1.25vw;
	}

	#youtube-area{
		opacity: 0;    
	}
	
	#youtube-area.appear {
		animation-name:PageAnimeAppear;
		animation-duration:.5s;
		animation-fill-mode:forwards;
	}
	
	#youtube {
		position: absolute;
		top: 0;
		left: 50%;
		transform: translate(-50%, 0);
		width: 177.77777778vh;
		height: 56.25vw;
		min-height: 100%;
		min-width: 100%;
		opacity: 0.1;
		border-top: 8.33vw solid #000;
		border-bottom: 8.33vw solid #000;
	}
	
	#youtube-mask{
		position: absolute;
		z-index: 2;
		top: 0;
		width: 100%;
		height: 100%;
	}
	
}


@keyframes PageAnimeAppear{
	0% {
	opacity: 0;
	}
	100% {
	opacity: 1;
	}
}


/*--------------------------------------------------------------
#member-area
--------------------------------------------------------------*/

/* mobile */
@media (min-width: 300px) {
	
	
	#scroll_wrap {
		width: 100%;
		overflow: hidden;
		margin: 0 auto;
		padding: 100px 0 50px 0;
		position: relative;
	}
	
	#scroll_wrap h3{
		margin: 0 5% 30px 5%;
	}
	
	.scroll_contents {
		display: flex;
		padding-left: 100%;
	}

	.scroll_item {
		width: 120%;
		margin-right: 50px;
	}
	
	.scroll_item h4 {
		font-size: 35px;
		font-style: italic;
		font-weight: 600;
		color: transparent;
		-webkit-text-stroke: 1px #FFF;
		padding: 0 5px;
	}
	
	.next-circle {
		wmargin: 0;
		padding: 0;
		width: 130px;
		position: absolute;
		top: 80px;
		right: 5%;
		z-index: 100;
	}
	
	.next-circle a span {
		position: absolute;
		top: 50%;
		left: 50%;
		-webkit-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%);
		transition: all .2s;
	}
	
	.next-circle a:hover span {
		position: absolute;
		left: 55%;
	}
	
	.next-circle .material-symbols-outlined {
		font-variation-settings:
			'FILL' 0,
			'wght' 100,
			'GRAD' 0,
			'opsz' 24;
		font-size: 50px;
		color: #C0FA00;
	}

	
	.scroll_item p {
		font-size: 20px;
		font-weight: 600;
		color: #1F1F1F;
		box-decoration-break: clone;
		-webkit-box-decoration-break: clone;
		display: inline;
		background-color: #C0FA00;
	}
	
	.scroll_item span {
		font-size: 13px;
		font-weight: 300;
		font-style: italic;
		color: #C0FA00;
		display: block;
		padding: 10px 0;
	}
	
	/* テキストスライド */
	
	.scroll-list {
		display: flex;
		list-style: none;
		padding-inline: 0;
		margin-inline: 0;
		gap: 0;
		position: relative;
		left: calc(50% - 50vw);
		width: 100vw;
		margin-top: 70px;
	}
	
	.scroll-list li {
		color: #C0FA00;
		font-size: 70px;
		font-weight: bold;
		white-space: nowrap;
		padding: 0 1em 0 0;
		animation: marquee-left 16s linear infinite;
		font-style: italic;
	}
	
	.scroll-list span.line {
		color: transparent;
		-webkit-text-stroke: 1px #C0FA00;
		padding: 0 0 0 1em;
	}
	
}

/* Small than tablet */
@media (min-width: 768px) {
	
	
	
}


/* Larger than tablet */
@media (min-width: 992px) {
	
	#scroll_wrap {
		width: 100%;
		overflow: hidden;
		margin: 0 auto;
		padding: 10vw 0;
		position: relative;
	}
	
	#scroll_wrap h3{
		margin: 0 5% 7vh 5%;
	}
	
	.scroll_contents {
		display: flex;
		padding-left: 70%;
	}

	.scroll_item {
		width: 37.5vh;
		margin-right: 8.33vw;
	}
	
	.scroll_item h4 {
		font-size: 5.83vh;
		font-style: italic;
		font-weight: 600;
		color: transparent;
		-webkit-text-stroke: 0.08vw #FFF;
		padding: 0 0.41vw;
	}
	
	.next-circle {
		wmargin: 0;
		padding: 0;
		width: 13.75vw;
		position: absolute;
		top: 8.33vw;
		right: 10%;
	}
	
	.next-circle a span {
		position: absolute;
		top: 50%;
		left: 50%;
		-webkit-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%);
		transition: all .2s;
	}
	
	.next-circle a:hover span {
		position: absolute;
		left: 55%;
	}
	
	.next-circle .material-symbols-outlined {
		font-variation-settings:
			'FILL' 0,
			'wght' 100,
			'GRAD' 0,
			'opsz' 24;
		font-size: 5.83vw;
		color: #C0FA00;
	}

	
	.scroll_item p {
		font-size: 3.5vh;
		font-weight: 600;
		color: #1F1F1F;
		box-decoration-break: clone;
		-webkit-box-decoration-break: clone;
		display: inline;
		background-color: #C0FA00;
	}
	
	.scroll_item span {
		font-size:  1.16vh;
		font-weight: 300;
		font-style: italic;
		color: #C0FA00;
		display: block;
		padding: 0.83vw 0;
	}
	
	/* テキストスライド */
	
	.scroll-list {
		display: flex;
		list-style: none;
		padding-inline: 0;
		margin-inline: 0;
		gap: 0;
		position: relative;
		left: calc(50% - 50vw);
		width: 100vw;
		margin-top: 8.33vw;
	}
	
	.scroll-list li {
		color: #C0FA00;
		font-size: 8.33vw;
		font-weight: bold;
		white-space: nowrap;
		padding: 0 1em 0 0;
		animation: marquee-left 16s linear infinite;
		font-style: italic;
	}
	
	.scroll-list span.line {
		color: transparent;
		-webkit-text-stroke: 0.08vw #C0FA00;
		padding: 0 0 0 1em;
	}
	
}


@keyframes marquee-left {
   0%{
    transform: translateX(0);
  }
  100%{
    transform: translateX(-100%);
  }
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.rotate {
  animation: rotate 20s infinite linear;
}

/*--------------------------------------------------------------
#concept-area
--------------------------------------------------------------*/

/* mobile */
@media (min-width: 300px) {
	
	#concept-area{
		height: 100vh;
		color: #1F1F1F;
		position: relative;
	}
	
	#concept-area dl {
		position: absolute;
		top: 50%;
		left: 50%;
		-webkit-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%);
		width: 100%;
	}
	
	#concept-area dt {
		width: 70%;
		margin: 0 auto 40px auto;
	}
	
	#concept-area dd {
		font-size: 20px;
		font-weight: 600;
		letter-spacing: 1px;
		text-align: center;
	}
	
	#concept-area dd span {
		margin: 0;
		display: block;
	}
	
}

/* Small than tablet */
@media (min-width: 768px) {
	
	
	
}


/* Larger than tablet */
@media (min-width: 992px) {
	
	#concept-area{
		height: 100vh;
		color: #1F1F1F;
		position: relative;
	}
	
	#concept-area dl {
		position: absolute;
		top: 50%;
		left: 50%;
		-webkit-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%);
		width: auto;
	}
	
	#concept-area dt {
		width: 50vw;
		margin: 0 auto 3.33vw auto;
	}
	
	#concept-area dd {
		font-size: 1.66vw;
		font-weight: 600;
		letter-spacing: 0.08vw;
		text-align: center;
	}
	
	#concept-area dd span {
		margin: 0 0 0 2.5vw;
		display: inline;
	}
	
}


/*--------------------------------------------------------------
#news-area
--------------------------------------------------------------*/

/* mobile */
@media (min-width: 300px) {
	
	#news-area {
		margin: 0;
		padding: 100px 5%;
		background-color: #1F1F1F;
		color: #FFF;
	}
	
	.inner {
		margin: 0;
		padding: 0;
		position: relative;
	}
	
	#news-area h4 {
		font-size: 40px;
		font-style: italic;
		font-weight: 600;
		color: #C0FA00;
	}
	
	#news-area ul {
		border-top: 1px solid #3B3B3B;
		margin: 20px 0 30px 0;
	}
	
	#news-area ul li {
		font-size: 15px;
		letter-spacing: 1px;
		font-weight: 400;
		border-bottom: 1px solid #3B3B3B;
		
	}
	
	#news-area ul li a {
		display: block;
		padding: 20px 20px;
		color: #FFF;
		position: relative;
	}
	
	#news-area ul li span {
		margin: 10px 0 0 0;
		font-size: 11px;
		letter-spacing: 0;
		font-weight: 300;
		font-style: italic;
		display: block;
	}
	
	#news-area ul li a{
		position: relative;
		color: #FFF;
		transition: all .3s;
	}
	
	#news-area ul li a:hover{
		color: #C0FA00;
	}

	#news-area ul li a::after {
		content: '';
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 1px;
		background: #C0FA00;
		transition: all .3s;
		transform: scale(0, 1);
		transform-origin: left top;
	}
	
	#news-area ul li a:hover::after {
		transform: scale(1, 1);
	}
	
	.news-bt-area {
		margin: 0;
		text-align: right;
	}
	
}

/* Small than tablet */
@media (min-width: 768px) {
	
	
	
}


/* Larger than tablet */
@media (min-width: 992px) {
	
	#news-area {
		margin: 0;
		padding: 8.33vw 15%;
		background-color: #1F1F1F;
		color: #FFF;
	}
	
	.inner {
		margin: 0;
		padding: 0;
		position: relative;
	}
	
	#news-area h4 {
		font-size: 4.16vw;
		font-style: italic;
		font-weight: 600;
		color: #C0FA00;
		position: absolute;
		top: -5%;
		right: 3%;
	}
	
	#news-area ul {
		border-top: 1px solid #3B3B3B;
		margin: 0 25% 2.5vw 0;
	}
	
	#news-area ul li {
		font-size: 1.33vw;
		letter-spacing: 0.08vw;
		font-weight: 400;
		border-bottom: 0.08vw solid #3B3B3B;
		
	}
	
	#news-area ul li a {
		display: block;
		padding: 2.5vw 16.6vw 2.5vw 1.66vw;
		color: #FFF;
		position: relative;
	}
	
	#news-area ul li span {
		font-size: 1.08vw;
		letter-spacing: 0;
		font-weight: 300;
		font-style: italic;
		position: absolute;
		top: 50%;
		right: 1.66vw;
		-webkit-transform: translateY(-50%);
		transform: translateY(-50%);
		display: inherit;
		margin: 0;
	}
	
	#news-area ul li a{
		position: relative;
		color: #FFF;
		transition: all .3s;
	}
	
	#news-area ul li a:hover{
		color: #C0FA00;
	}

	#news-area ul li a::after {
		content: '';
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 0.08vw;
		background: #C0FA00;
		transition: all .3s;
		transform: scale(0, 1);
		transform-origin: left top;
	}
	
	#news-area ul li a:hover::after {
		transform: scale(1, 1);
	}
	
	.news-bt-area {
		margin: 0;
		text-align: right;
	}
	
}