@charset "UTF-8";
:root{
	--main-color: #012354;
	--white : #fff;
	--black : #000;
	--red   : #f00;
	--green : #0f0;
}

@font-face {
	font-family: 'KLeagueBasic';
	src: url(../fonts/KLeagueBasic-Medium-e491f3586f66b9d34c711958316b11eb.woff) format('truetype');
}
@font-face {
	font-family: 'KLeagueDynamic';
	src: url(../fonts/KLeagueDynamic-ExtraBold-304b8963f69a45b24ae09fa66fd41ebd.woff) format('truetype');
}




/* html Setting Start*/
html{line-height:1.15;-webkit-text-size-adjust:none;-moz-text-size-adjust:none;-ms-text-size-adjust:none;text-size-adjust:none;overflow-x:hidden;}
body, div, p, span, em, small, a, h1, h2, h3, h4, h5, h6, ul, ol, li, dl, dt, dd, table, th, td, form, fieldset, legend, input, textarea, button, select, article, aside, details, figcaption, figure, footer, header, main, menu, nav, section, blockquote{margin:0;padding:0;-webkit-box-sizing:border-box;box-sizing:border-box;}
article, aside, canvas, details, figcaption, figure, footer, header, main, menu, nav, section{display:block;}
table{border-collapse:collapse;}
img, fieldset, iframe{border-style:none;}
ul, ol, li, dl, dt, dd{list-style:none;}
i, em, dfn{font-style:normal;}
a{background-color:transparent;/*color:inherit;font-size:inherit;*/text-decoration:none;}
/* a:visited{color:inherit;} */
b, strong{font-weight:bolder;}
img{border-style:none;vertical-align:top;}
button, input, optgroup, select, textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}
input, select, button, textarea{outline-style:none;}
button{display:block;border:0;border-radius:0;cursor:pointer;}
button, input{overflow:visible;}
button, select{text-transform:none;}
select{-webkit-appearance:none;-moz-appearance:none;appearance:none;}
select::-ms-expand{display:none;}
button, [type="button"], [type="reset"], [type="submit"]{-webkit-appearance:button;}
button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner{border-style:none;padding:0;}
button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring{outline:1px dotted ButtonText;}
[type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button{-webkit-appearance:none;}
[type="search"]{-webkit-appearance:textfield;outline-offset:-2px;}
[type="search"]::-webkit-search-cancel-button, [type="search"]::-webkit-search-decoration{-webkit-appearance:none;}
::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}
input, input[type=text], input[type=password], input[type=email], input[type=number], input[type=tel]{-webkit-appearance:none;-moz-appearance:none;appearance:none;}
input:-ms-clear, input:-ms-reveal{display:none;}
input::-ms-clear, input::-ms-reveal{display:none;}
textarea{resize:vertical;overflow:auto;}
legend{color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}
hr, template, [hidden]{display:none;}
abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted;}
code, kbd, samp, pre{font-family:monospace, monospace;font-size:1em;}
mark{background-color:#ff0;}
small{font-size:80%;}
sub, sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;}
sub{bottom:-0.25em;}
sup{top:-0.5em;}
audio, video{display:inline-block;}
audio:not([controls]){display:none;height:0;}
svg:not(:root){overflow:hidden;}
progress{vertical-align:baseline;}
*, *::before, *::after {outline: none;-webkit-font-smoothing: antialiased;touch-action: pan-y;}
/* Section Setting Start*/

html, body, h1, h2, h3, h4, h5, h6, input, select, button, textarea{font-family:'KLeagueBasic', sans-serif;font-size: 1.4583333333333333VW;font-weight:400;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;word-break:keep-all;}
@media only screen and (min-width:768px){
	html, body, h1, h2, h3, h4, h5, h6, input, select, button, textarea{}
}

.section__body  {position:relative;}
.text--black{color:#060001;-webkit-text-stroke: 0.05vw #000;}
.text--yellow{color:#F0C85E;-webkit-text-stroke: 0.05vw #000;}
.text--brown{color:#715245;-webkit-text-stroke: 0.05vw #000;}
.clearfix:before, .clearfix:after{content:"";display:table;}
.clearfix:after{clear:both;}
.blind{position:absolute;top:-1000em;left:0;display:block;overflow:hidden;}
.sr-only{display:block;overflow:hidden;text-indent:-9999em;white-space:nowrap;}
.pc{display:none !important;}
.mo{display:block !important;}
@media only screen and (min-width:768px){

	.pc{display:block !important;}
	.mo{display:none !important;}
}
#wrap{}
@media only screen and (min-width:768px){
	
}
.row{margin:0 30px;margin-right:calc(30px + constant(safe-area-inset-right));margin-right:calc(30px + env(safe-area-inset-right));margin-left:calc(30px + constant(safe-area-inset-left));margin-left:calc(30px + env(safe-area-inset-left));}
@media only screen and (min-width:768px){
	
	.row{max-width:1350px;margin:0 auto;
}}

/* Header Setting Start*/
.header{position:fixed;top:0;left:0;z-index:10;width:100%;padding-top:constant(safe-area-inset-top);padding-top:env(safe-area-inset-top);padding-left:20px;padding-left:calc(20px + constant(safe-area-inset-left));padding-left:calc(20px + env(safe-area-inset-left));}
@media only screen and (min-width:768px){

	.header{padding-right:30px;padding-right:calc(30px + constant(safe-area-inset-right));padding-right:calc(30px + env(safe-area-inset-right));padding-left:30px;padding-left:calc(30px + constant(safe-area-inset-left));padding-left:calc(30px + env(safe-area-inset-left));}
	.header__nav{position:absolute;top:0;top:constant(safe-area-inset-top);top:env(safe-area-inset-top);right:0;}
}

.header{height: 0;}
.header__nav{background:#FF2D12;position:fixed;top:0;right:0;bottom:0;left:100%;white-space:nowrap;overflow:hidden;-webkit-transition:left 0.3s;-o-transition:left 0.3s;transition:left 0.3s;}
.header__nav.opened{left:0;}
.header__nav--opener{position:absolute;top:0;top:calc(0px + constant(safe-area-inset-top));top:calc(0px + env(safe-area-inset-top));right:0;right:calc(0px + constant(safe-area-inset-right));right:calc(0px + env(safe-area-inset-right));width:70px;height:56px;background:url("../images/pc/ico-hamburger-white.svg") no-repeat center;background-size:24px auto;}
.header__nav--closer{position:absolute;top:0;top:calc(0px + constant(safe-area-inset-top));top:calc(0px + env(safe-area-inset-top));right:0;right:calc(0px + constant(safe-area-inset-right));right:calc(0px + env(safe-area-inset-right));width:70px;height:56px;background:url("../images/pc/ico-close-black.svg") no-repeat center;background-size:24px auto;}
.header__nav--closer-wrap{height:58px;height:calc(58px + constant(safe-area-inset-top));height:calc(58px + env(safe-area-inset-top));padding-top:constant(safe-area-inset-top);padding-top:env(safe-area-inset-top);background:#F8E487;border-bottom:2px solid #EFD875;}
.header__nav--list{position:absolute;top:58px;top:calc(58px + constant(safe-area-inset-top));top:calc(58px + env(safe-area-inset-top));bottom:0;left:0;width:100%;background:#fff;}
.header__nav--list-link{display:block;height:48px;padding:0 15px;padding-right:calc(15px + constant(safe-area-inset-right));padding-right:calc(15px + env(safe-area-inset-right));padding-left:calc(15px + constant(safe-area-inset-left));padding-left:calc(15px + env(safe-area-inset-left));font-size: 1.09375VW;font-weight:400;line-height:48px;}
/* .header__nav--list-link:before{display:inline-block;width:25px;height:100%;margin-right:10px;background-repeat:no-repeat;background-position:center;content:"";vertical-align:top;}
.header__nav--list-link:hover{background-color:#525252;background-image:url("../images/pc/bg-nav-hover.svg");background-repeat:repeat-x;background-position:left center;background-size:auto 106px;color:#F8E487;} */

.header__nav--list-link::before {
    transform: scaleX(0);
    transform-origin: bottom left;
  }
  
  .header__nav--list-link:hover::before {
    transform: scaleX(1);
    transform-origin: bottom left;
  }
  
  /* .header__nav--list-link::before {
    content: " ";
    display: block;
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    inset: 0 0 0 0;
    background: hsl(200 100% 80%);
    z-index: -1;
    transition: transform .3s ease;
  } */

.header__nav--list-headset:before{background-image:url("../images/pc/ico-headset-gray.svg");background-size:auto 22px;}
.header__nav--list-headset:hover:before{background-image:url("../images/pc/ico-headset-yellow.svg");}
.header__nav--list-talk:before{background-image:url("../images/pc/ico-talk-gray.svg");background-size:25px auto;}
.header__nav--list-talk:hover:before{background-image:url("../images/pc/ico-talk-yellow.svg");}
.header__nav--list-gear:before{background-image:url("../images/pc/ico-gear-gray.svg");background-size:22px 22px;}
.header__nav--list-gear:hover:before{background-image:url("../images/pc/ico-gear-yellow.svg");}
.header__nav--list-preview:before{background-image:url("../images/pc/ico-preview-gray.svg");background-size:25px auto;}
.header__nav--list-preview:hover:before{background-image:url("../images/pc/ico-preview-yellow.svg");}
.header__nav--list-gift:before{background-image:url("../images/pc/ico-gift-gray.svg");background-size:23px auto;}
.header__nav--list-gift:hover:before{background-image:url("../images/pc/ico-gift-yellow.svg");}
.header__nav--list-text:before{display:none;}

.btnMenu {
	position: fixed;
	display: flex;
    justify-content: center;
    align-items: center;
    bottom: 0;
    left: 0;
    z-index: 999;
    width: 100%;
    background: white;
    height: 40px;
}

.click_menu_bg {
	display:none;
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
	padding: 0px;
	margin: 0px;
}
.click_menu_back_ul {
	position: relative;
	width:100%;
	height:100%;
	font-size:0;
	z-index: 3;
}
.click_menu_front_ul {
	position: fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
	font-size:0;
	z-index: 4;
	
}
.click_menu_li {
	display: inline-block;
	position:fixed;
	width: 12.5%;
	height: 100%;
	
}
.click_menu_front_li {
	display:	flex;
	justify-content:center;
	align-items:	center;
	align-content:	center;
	position:		absolute;
	width: 		100%;
	height: 	9%;
	left:		50%;
	transform:translateX(-50%);
	font-size:	12vw;
	color:		#FFF;
	background-color:transparent;
}
.click_menu_front_li .front_li_a:hover {
	color:#011128;
}
.front_li_a {
	color: white;
}
.click_menu_front_li > a {
	cursor: pointer;
}

.first {
	background-color: #01ff73;
}
.second {
	background-color: #00c75a;
}
.one {left:0;}
.two {left:12.5%}
.three {left:25%;}
.four {left:37.5%}
.five {left:50%;}
.six {left:62.5%;}
.seven {left:75%;}
.eight {left:87.5%;}

.li_CONCEPT 	{top: 6%;}
.li_DESIGNVIEW 	{top:16%;}
.li_GALLERY		{top:26%;}
.li_SPECS 		{top:36%;}
.li_TRYIT 		{top:46%;}
.li_DOWNLOADS 	{top:56%;}

.appear_animation {
	-webkit-animation: width_animation 0.7s cubic-bezier(0.12, 0.9, 0.27, 1.55) forwards;
}
.moving_arrow {
	-webkit-animation: moving_arrow_ani 1s infinite;
}
@-webkit-keyframes width_animation {
	0% 		{ width:0%; }
	100% 	{ width:12.5%; }
}
@-webkit-keyframes moving_arrow_ani {
	0%		{transform:translateY(0%);}
	20%		{transform:translateY(-5%);}
	50%		{transform:translateY(10%);}
	70% 	{transform:translateY(-5%);}
	100% 	{transform:translateY(0%);}
}

@media only screen and (min-width:768px){
	.btnMenu {
		display: none;
	}

	.list_CONCEPT,.list_DESIGNVIEW,.list_GALLERY,.list_SPECS,.list_TRYIT,.list_DOWNLOADS {
		width:12.5%;
		display: inline-block;
		background: linear-gradient(to left, transparent 50%, #BE0000 50%) right;
		background-size:200%;
	}
	.list_CONCEPT:hover,.list_DESIGNVIEW:hover,.list_GALLERY:hover,.list_SPECS:hover,.list_TRYIT:hover,.list_DOWNLOADS:hover {
		background-position :left;
		transition: .2s ease-in;
	}
	.list_KLEAGUE {width:25%;display: inline-block;background: linear-gradient(to left, #FFF 50%, #DFDFDF 50%) right;background-size:200%;}
	.list_KLEAGUE:hover {background-position :left;}

	.click_menu_bg {
		display:none;
		position:fixed;
		top:0;
		left:0;
		width:100%;
		height:100%;
		padding: 0px;
		margin: 0px;
	}
	.click_menu_back_ul {
		position: relative;
		width:100%;
		height:100%;
		font-size:0;
		z-index: 3;
	}
	.click_menu_front_ul {
		position: fixed;
		top:0;
		left:0;
		width:100%;
		height:100%;
		font-size:0;
		z-index: 4;
		
	}
	.click_menu_li {
		display: inline-block;
		position:fixed;
		width: 12.5%;
		height: 100%;
		
	}
	.click_menu_front_li {
		display:	flex;
		justify-content:center;
		align-items:	center;
		align-content:	center;
		position:		absolute;
		width: 		100%;
		height: 	9%;
		left:		50%;
		transform:translateX(-50%);
		font-size:	5.8vw;
		font-weight:400;
		color:		#FFF;
		background-color:transparent;
	}
	.click_menu_front_li:hover {
		color:#011128;
	}
	.click_menu_front_li > a {
		cursor: pointer;
	}
	
	.first {
		background-color: #01ff73;
	}
	.second {
		background-color: #00c75a;
	}
	.one {left:0;}
	.two {left:12.5%}
	.three {left:25%;}
	.four {left:37.5%}
	.five {left:50%;}
	.six {left:62.5%;}
	.seven {left:75%;}
	.eight {left:87.5%;}

	.li_CONCEPT 	{top:13%;}
	.li_DESIGNVIEW 	{top:26%;}
	.li_GALLERY		{top:39%;}
	.li_SPECS 		{top:52%;}
	.li_TRYIT 		{top:65%;}
	.li_DOWNLOADS 	{top:78%;}

	
	
	.front_cancelBtn {
		position: relative;
		z-index:20;
	}
	.appear_animation {
		animation: width_animation 0.7s cubic-bezier(0.12, 0.9, 0.27, 1.55) forwards;
		-webkit-animation: width_animation 0.7s cubic-bezier(0.12, 0.9, 0.27, 1.55) forwards;
		-moz-animation: width_animation 0.7s cubic-bezier(0.12, 0.9, 0.27, 1.55) forwards;
		-ms-animation: width_animation 0.7s cubic-bezier(0.12, 0.9, 0.27, 1.55) forwards;
	}
	.moving_arrow {
		animation: moving_arrow_ani 1s infinite;
		-webkit-animation: moving_arrow_ani 1s infinite;
		-moz-animation: moving_arrow_ani 1s infinite;
		-ms-animation: moving_arrow_ani 1s infinite;
	}
	
	@keyframes width_animation {
		0% 		{ width:0%; }
		100% 	{ width:12.5%; }
	}
	@-webkit-keyframes width_animation {
		0% 		{ width:0%; }
		100% 	{ width:12.5%; }
	}
	@-moz-keyframes width_animation {
		0% 		{ width:0%; }
		100% 	{ width:12.5%; }
	}
	@-ms-keyframes width_animation {
		0% 		{ width:0%; }
		100% 	{ width:12.5%; }
	}



	@keyframes moving_arrow_ani {
		0%		{transform:translateY(0%);}
		20%		{transform:translateY(-5%);}
		50%		{transform:translateY(10%);}
		70% 	{transform:translateY(-5%);}
		100% 	{transform:translateY(0%);}
	}
	@-webkit-keyframes moving_arrow_ani {
		0%		{transform:translateY(0%);}
		20%		{transform:translateY(-5%);}
		50%		{transform:translateY(10%);}
		70% 	{transform:translateY(-5%);}
		100% 	{transform:translateY(0%);}
	}
	@-moz-keyframes moving_arrow_ani {
		0%		{transform:translateY(0%);}
		20%		{transform:translateY(-5%);}
		50%		{transform:translateY(10%);}
		70% 	{transform:translateY(-5%);}
		100% 	{transform:translateY(0%);}
	}
	@-ms-keyframes moving_arrow_ani {
		0%		{transform:translateY(0%);}
		20%		{transform:translateY(-5%);}
		50%		{transform:translateY(10%);}
		70% 	{transform:translateY(-5%);}
		100% 	{transform:translateY(0%);}
	}

	/* .header__nav--list-CONCEPT:after {position:absolute;content:"";width:0;height:100%;top:0;background-color:#BE0000;z-index:0; }
	.header__nav--list-CONCEPT:hover {color:#fff;}
	.header__nav--list-CONCEPT:hover:after {color:#fff;content:"";left:0; width:12.5%;transition: all 0.3s ease;}
	.header__nav--list-CONCEPT:active {top:2px;} */
	
/* 	
	.header__nav--list-KLEAGUE:after {position:absolute;content:"";width:0;height:100%;top:0;background-color:#DFDFDF;z-index:0; }
	.header__nav--list-KLEAGUE:hover {color:#fff;}
	.header__nav--list-KLEAGUE:hover:after {color:#fff;content:"";left:36.75%; width:25%;transition: all 0.3s ease;}
	.header__nav--list-KLEAGUE:active {top:2px;} */


	.header__logo a{font-size: 1.6145833333333335VW;line-height: 4.270833333333333VW;}
	.header__nav{position:absolute;bottom:auto;left:auto;width: 100%;}
	.header__nav--opener, .header__nav--closer-wrap{display:none;}
	.header__nav--list{position:static;background:none;color:#fff;padding-right: 0;}
	.header__nav--list:before, .header__nav--list:after{content:"";display:table;}
	.header__nav--list:after{clear:both;}
	.header__nav--list > li{float:left;}
	.header__nav--list-link{/*width:228px; padding: 0 2.083333333333333VW;*/color:#FFF;font-weight:400;text-align:center;}
	.header__nav--list-link:before {width:1.9vw;}
	.header__nav--list-link:hover{background:none;font-weight:400;}
	/* .header__nav--list-CONCEPT{width: 10.677083333333332VW;} */
	/* .header__nav--list-CONCEPT:before{background-image:url("../images/pc/ico-headset-white.svg");background-size:1.8VW;} */
	
	.header__nav--list-CONCEPT:hover:before{background-image:url("../images/pc/ico-headset-yellow.svg");}
	/* .header__nav--list-DESIGNVIEW{width: 10.677083333333332VW;} */
	.header__nav--list-DESIGNVIEW:before{background-image:url("../images/pc/ico-talk-white.svg");background-size:1.9vw auto;}
	.header__nav--list-DESIGNVIEW:hover:before{background-image:url("../images/pc/ico-talk-yellow.svg");}
	/* .header__nav--list-GALLERY{width: 9.739583333333334VW;} */
	.header__nav--list-GALLERY:before{background-image:url("../images/pc/ico-gear-white.svg");background-size:1.7vw 1.7vw;}
	.header__nav--list-GALLERY:hover:before{background-image:url("../images/pc/ico-gear-yellow.svg");}
	/* .header__nav--list-KLEAGUE{width: 10.677083333333332VW;} */
	.header__nav--list-KLEAGUE:before{background-image:url("../images/pc/ico-preview-white.svg");background-size:1.9vw auto;}
	.header__nav--list-KLEAGUE:hover:before{background-image:url("../images/pc/ico-preview-yellow.svg");}
	/* .header__nav--list-SPECS{width: 11.875VW;} */
	.header__nav--list-SPECS:before{background-image:url("../images/pc/ico-gift-white.svg");background-size:1.8vw auto;}
	.header__nav--list-SPECS:hover:before{background-image:url("../images/pc/ico-gift-yellow.svg");}
    /* .header__nav--list-TRYIT{width: 11.875VW;} */
	.header__nav--list-TRYIT:before{background-image:url("../images/pc/ico-gift-white.svg");background-size:1.8vw auto;}
	.header__nav--list-TRYIT:hover:before{background-image:url("../images/pc/ico-gift-yellow.svg");}
    /* .header__nav--list-DOWNLOADS{width: 11.875VW;} */
	.header__nav--list-DOWNLOADS:before{background-image:url("../images/pc/ico-gift-white.svg");background-size:1.8vw auto;}
	.header__nav--list-DOWNLOADS:hover:before{background-image:url("../images/pc/ico-gift-yellow.svg");}

	.header__nav--list-text{display:none;}
}

@media only screen and (min-width: 1920px) {
	.header__nav--list-link {
		font-size: 21px;
	}
}

/* intro */
section{background-color: #012354;}

.section__head, .section__body--desc{position: relative;height: 100vh; overflow: hidden;}

.intro_wrapper{position:absolute;top: 5.266667VW;}

.section__head .title-box{text-align: center; width: 100vw;position: absolute;}
.title-box__text{font-family: 'KLeagueDynamic'; font-weight: 400; text-align: center;font-size: 10rem;color:#FFF;}
.title-box__text--small{color:#000;}

.title1 {top: 13vh;}
.title2 {letter-spacing: 2rem;}
.title3 {letter-spacing: 0.95rem;}

@media only screen and (min-width:768px){ 
	.title-box__text{font-size: 6rem;}

	.title-box__text--small{color:#000;}
}

/* Main Video Setting Start*/

.section__body--concept { padding-bottom: 2%; overflow: hidden;}
.video_contain{height:100%;}
#intro_pc_bg{width: 100%; height:100%; object-fit: cover;}
.main_video {width: 100%;	margin: 2% auto;}
.main_video video {width: 100%;}
.video_belt {width: 200%;}
.videoWrapper {	position: relative;	padding-bottom: 56.25%; /* 16:9 */	height: 0;  }
.videoWrapper iframe {	position: absolute;	top: 0;	left: 0;	width: 100%;	height: 100%;  }

@media only screen and (min-width:768px){
	#intro_pc_bg{width: 100%; height:100%;}
	.section__body--concept {padding-bottom: 0;}
	.main_video {width: 80%;	margin: 2% auto;}
	.video_belt { width: 100%;}
}

/* designView Setting Start*/

video#design_Left  {width: 100%;}
video#design_Right {width: 100%;}
.section__body--design {display: flex; flex-direction: column;}

@media only screen and (min-width:768px){
	.section__body--design {flex-direction: row;}
	video#design_Left  {width: 50%;}
	video#design_Right {width: 50%;}
}

/* Feature Setting Start*/

.accordion {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	font-size: 0;
}

.tabs {
	display: inline-flex;
	background-color: #0A1432;
	/* border-right: #19FF8D 1px solid; */
	/* width: var(--width, calc(100% / var(--items))); */
	width:100%;
	height: 20vw;
	overflow: hidden;
	position: relative;
	margin: 0;
	font-size: 16px;
	/* -moz-transition: all 0.4s ease-in-out 0.1s;
	-o-transition: all 0.4s ease-in-out 0.1s;
	-webkit-transition: all 0.4s ease-in-out;
	-webkit-transition-delay: 0.1s;
	transition: all 0.4s ease-in-out 0.1s; */
	/* transition: 1s; */
}
.tab_video {
	display: inline-flex;
	height: 100%;
	overflow: hidden;
	position: relative;
	margin: 0;
	font-size: 16px;

	animation:  tab_video_width_ani 1s forwards;
	-webkit-animation: tab_video_width_ani 1s forwards;
	-moz-animtaion: tab_video_width_ani 1s forwards;
	-ms-animation: tab_video_width_ani 1s forwards;
}
.tab_video_faster {
	display: inline-flex;
	height: 100%;
	overflow: hidden;
	position: relative;
	margin: 0;
	font-size: 16px;

	animation: tab_video_width_ani_faster 1s forwards;
	-webkit-animation: tab_video_width_ani_faster 1s forwards;
	-moz-animation: tab_video_width_ani_faster 1s forwards;
	-ms-animation: tab_video_width_ani_faster 1s forwards;
}
.inner_video {
	object-fit: cover;
	display:inline-flex;
	object-position:0% 0%;
	width: 100vw;
}
.tab_video_ani {
	object-fit:cover;
	animation: tab_video_width_ani 1s forwards;
	-webkit-animation: tab_video_width_ani 1s forwards;
	-moz-animation: tab_video_width_ani 1s forwards;
	-ms-animation: tab_video_width_ani 1s forwards;
}
.tab_video_ani_faster {
	object-fit:cover;
	animation: tab_video_width_ani_faster 1s forwards;
	-webkit-animation: tab_video_width_ani_faster 1s forwards;
	-moz-animation: tab_video_width_ani_faster 1s forwards;
	-ms-animation: tab_video_width_ani_faster 1s forwards;
}

.tab_width_ani {
	animation: other_tab_start_ani 1s forwards;
	-webkit-animation: other_tab_start_ani 1s forwards;
	-moz-animation: other_tab_start_ani 1s forwards;
	-ms-animation: other_tab_start_ani 1s forwards;
}
.delete_video {
	animation: delete_video_ani 1s forwards;
	-webkit-animation: delete_video_ani 1s forwards;
	-moz-animation: delete_video_ani 1s forwards;
	-ms-animation: delete_video_ani 1s forwards;
}

/* @keyframes other_tab_start_ani {
	0% {width:20%;}
	100% {width:12%;}
}
@-webkit-keyframes other_tab_start_ani {
	0% {width:20%;}
	100% {width:12%;}
}
@-moz-keyframes other_tab_start_ani {
	0% {width:20%;}
	100% {width:12%;}
}
@-ms-keyframes other_tab_start_ani {
	0% {width:20%;}
	100% {width:12%;}
} */

@keyframes tab_video_width_ani {
	0%		 {height:0;}
	100%	{height:100vw;}
}
@-webkit-keyframes tab_video_width_ani {
	0%		 {height:0;}
	100%	{height:100vw;}
}
@-moz-keyframes tab_video_width_ani {
	0%		 {height:0;}
	100%	{height:100vw;}
}
@-ms-keyframes tab_video_width_ani {
	0%		 {height:0;}
	100%	{height:100vw;}
}

@keyframes delete_video_ani {
	0%		 {height:100vw;}
	100%	{height:0;}
}
@-webkit-keyframes delete_video_ani {
	0%		 {height:100vw;}
	100%	{height:0;}
}
@-moz-keyframes delete_video_ani {
	0%		 {height:100vw;}
	100%	{height:0;}
}
@-ms-keyframes delete_video_ani {
	0%		 {height:100vw;}
	100%	{height:0;}
}

@keyframes tab_video_width_ani_faster {
	0%		 {height:0;}
	100%	{height: 100vw;}
}
@-webkit-keyframes tab_video_width_ani_faster {
	0%		 {height:0;}
	100%	{height: 100vw;}
}
@-moz-keyframes tab_video_width_ani_faster {
	0%		 {height:0;}
	100%	{height: 100vw;}
}
@-ms-keyframes tab_video_width_ani_faster {
	0%		 {height:0;}
	100%	{height: 100vw;}
}

@media only screen and (min-width:768px) {
	.inner_video {
		object-fit: cover;
		display:inline-flex;
		object-position:0% 50%;
		width: auto;
	}

	@keyframes other_tab_start_ani {
		0% {width:20%;}
		100% {width:12%;}
	}
	@-webkit-keyframes other_tab_start_ani {
		0% {width:20%;}
		100% {width:12%;}
	}
	@-moz-keyframes other_tab_start_ani {
		0% {width:20%;}
		100% {width:12%;}
	}
	@-ms-keyframes other_tab_start_ani {
		0% {width:20%;}
		100% {width:12%;}
	}

	@keyframes tab_video_width_ani {
		0%	{width:8%;}
		100%	{width:40%;}
	}
	@-webkit-keyframes tab_video_width_ani {
		0%	{width:8%;}
		100%	{width:40%;}
	}
	@-moz-keyframes tab_video_width_ani {
		0%	{width:8%;}
		100%	{width:40%;}
	}
	@-ms-keyframes tab_video_width_ani {
		0%	{width:8%;}
		100%	{width:40%;}
	}

	@keyframes delete_video_ani {
		0%	{width:40%;}
		100%	{width:0%;}
	}
	@-webkit-keyframes delete_video_ani {
		0%	{width:40%;}
		100%	{width:0%;}
	}
	@-moz-keyframes delete_video_ani {
		0%	{width:40%;}
		100%	{width:0%;}
	}
	@-ms-keyframes delete_video_ani {
		0%	{width:40%;}
		100%	{width:0%;}
	}

	@keyframes tab_video_width_ani_faster {
		0%	{width:0%;}
		100%	{width:40%;}
	}
	@-webkit-keyframes tab_video_width_ani_faster {
		0%	{width:0%;}
		100%	{width:40%;}
	}
	@-moz-keyframes tab_video_width_ani_faster {
		0%	{width:0%;}
		100%	{width:40%;}
	}
	@-ms-keyframes tab_video_width_ani_faster {
		0%	{width:0%;}
		100%	{width:40%;}
	}
}



.tabs:hover {
	background: linear-gradient(0deg, rgba(25,255,141,1) 0%, rgba(10,20,50,0) 100%);
	/* background: -moz-linear-gradient(0deg, rgba(25,255,141,1) 0%, rgba(10,20,50,0) 100%);
	background: -webkit-linear-gradient(0deg, rgba(25,255,141,1) 0%, rgba(10,20,50,0) 100%);
	background: linear-gradient(0deg, rgba(25,255,141,1) 0%, rgba(10,20,50,0) 100%); */
}
.tabs-click-after {
	background: linear-gradient(0deg, rgba(25,255,141,1) 0%, rgba(10,20,50,0) 100%);
}
.tabs-click-after h1, .tabs-click-after p {
	color:white !important;
	text-shadow: none !important;
}

.tabs:hover .social-links a:before {
	margin-left: -100px;
}

.tabs:hover .social-links a:after {
	margin-left: -5px;
}

.tabs .paragraph {
	display: flex;
    position: absolute;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	height: 100%;
    font-size: 1.8vw;
	padding: 1% 5% 0;    
	border-top: 1px solid #aaa;
}

.tabs .paragraph h1, .tabs .paragraph p {
	font-size: 2.5em;
	margin-bottom: 10px;
	color: var(--main-color);
	text-shadow:
		-1px -1px 0 #FFF,
		1px -1px 0 #FFF,
		-1px 1px 0 #FFF,
		1px 1px 0 #FFF;  
}

.tabs:hover .paragraph h1, .tabs:hover .paragraph p {
	color: white;
	text-shadow: none;
}

.tabs .paragraph p {
	display: inline-block;
}

li#video {
    width: 40%;
}

@media only screen and (min-width:768px) {
	.accordion {
		flex-direction: row;
		flex-wrap: nowrap;
		height: 39.6vw;
		font-size: 0;
	}
	.tabs {
		width: 20%;
		height: 100%;
		border-right: 1px solid #aaa;
	}
	.start_tab {
		width:12%;
	}
	.tabs .paragraph {
		position: absolute;
		display: inline-block;
		width: 34vw;
		height: auto;
		bottom: 18vw;    
		left: 38%;
		font-size: 0.8vw;
		padding: 0;
		border: none;
	}
	.rotate90 {
		-moz-transform-origin:0 50%;
		-moz-transform:rotate(-90deg) translate(-50%, 50%);
		-webkit-transform-origin:0 50%;
		-webkit-transform:rotate(-90deg) translate(-50%, 50%);
		-o-transform-origin:0 50%;
		-o-transform:rotate(-90deg) translate(-50%, 50%);
		-ms-transform-origin:0 50%;
		-ms-transform:rotate(-90deg) translate(-50%, 50%);
		transform-origin:0 50%;
		transform:rotate(-90deg) translate(-50%, 50%);
	}
	.tabs .paragraph h1{
		float: left;
	}
	.tabs .paragraph p {
		display: inline-block;
		float: right;
	}
}

/* Gallery */
.section__body--gallery{
	overflow: hidden;
	position: relative;
	height: 100vh;
}

.scrolling-container {
	
}

.scrolling-text{
	z-index: -999;
    white-space: nowrap;
}

#gallery .catch__desc{
	font-family: 'KLeagueDynamic';
	font-size: 20vh;
    color: var(--white);
	font-weight: 400;
}
#gallery .catch__desc:nth-child(odd){
	color: var(--main-color);
    text-shadow: 
		-1px -1px 0 #fff, 
		1px -1px 0 #fff, 
		-1px 1px 0 #fff, 
		1px 1px 0 #fff;
}

.gallery-image{   
    position: absolute;
    top: 29.1vh;
}

.gallery-image img, .gallery-image video {
    display: block;
    margin: 0 auto;
    width: 100%;
}

.gallery-image img:nth-child(2) , .gallery-image video:nth-child(2) {
	width: 80%;
	margin-left: 0;
	margin-top: 40%    
}

.gallery-image img:nth-child(3) , .gallery-image video:nth-child(3) {
	margin-right: 0;    
	margin-top: 20%
}

.gallery-image img:nth-child(4) , .gallery-image video:nth-child(4) {
	position: relative;
	left: 50%;
	width: 130%;
	transform: translateX(-50%);
	margin-right: 0;    
	margin-top: 15%
}

@media only screen and (min-width: 768px) {
	.gallery-image{   
		position: absolute;
		width: 90vw;
		top: 29.1vh;
		left: 5vw;
	}
	
	.gallery-image img, .gallery-image video {
		display: block;
		margin: 0 auto;
		width: 70%;
		margin-top: 0;
	}
	
	.gallery-image img:nth-child(2), .gallery-image video:nth-child(2) {
		width: 50%;
		margin-left: 0;
		margin-top: 10%;

	}
	
	.gallery-image img:nth-child(3), .gallery-image video:nth-child(3) {
		width: 50%;
		margin-right: 0;
		margin-top: 20%;

	}
	.gallery-image img:nth-child(4), .gallery-image video:nth-child(4) {
		left: 0;
		width: 70%;
		transform: none;
		margin-right: auto;
		margin-top: 30%;
	}
}

/* specs */

#specs{
	/*z-index:-1;*/
	height:100vh;
}

#specs_pc_bg{width: 100%; height: 100%; object-fit: cover;}

.spec__desc {
    position: absolute;
	width: 100vw;
	top: 21vh;
	color: var(--white);
    text-align: center;
}

.spec__desc h2{
    font-size: 4vh;
    font-weight: 400;
    padding-top: 5vh;
}

.spec__desc p{
    font-size: 7vh;
	font-weight: 400;    
}

.scrolling-spec2 {
	padding-top: 30vh;
}
.scrolling-spec2 p{
	font-size: 11vw;
	font-weight: 400;    
}

@media only screen and (min-width: 768px) {
	.scrolling-spec2 p{
		font-size: 11vh;
		font-weight: 400;    
	}
}

/* preview */

.section__body--preview{
	
}

.ly-toolbar-button{
	background-color: #23EEEF;
	padding: 15px;
}

.ly-preview-button{
	display: flex;
	justify-content: space-around;
	width: 100%;
	font-weight:400;
	text-align: center;
	font-size: 3rem;
	font-family: 'KLeagueBasic', sans-serif;
}

.pink_bg {
	font-family: 'KLeagueDynamic';
	background-color : #ff54a2 !important;
 }
 .pitch {
	font-family: 'KLeagueDynamic' !important;
 }

.character-grid .grid {
	margin-left: 0;
	margin-right: 0;
	padding-bottom: 0;
	width: calc(100%);
}

.character-grid .grid .character-set-category {
	display: flex;
	font-size: calc(80vw / 10);
	text-align: center;
	width: 100%;
	flex: 0 1 auto;
	flex-flow: row;
	flex-wrap: wrap;
}

.character-grid .grid .character-set-box.zoomed {
	background: rgba(255, 255,255, 0.9);
	box-shadow: 0 0;
	color: #000;
	display: none;
	font-size: calc(84vw / 6.8);
	height: 0;
	line-height: calc(84vw / 3);
	padding-top: 30%;
	pointer-events: none;
	position: absolute;
	text-align: center;
	transition: opacity 113ms cubic-bezier(.2,.2,.38,.9);
	width: 30%;
}

.character-grid .grid .character-set-box.zoomed span{
	color: #000;
}

.character-grid .grid #plex-character-zoomed {
	left: 0;
	position: absolute;
	top: 0;
	z-index: 10000;
}

.character-grid .grid .character-set-box {
	line-height: calc(100vw / 5);
	padding-top: 20%;
	position: relative;
	width: 20%;
}

.character-grid .grid .single-item.character-set-box {
	border: 0!important;
	box-shadow: 1px 0 0 0 #171717, 0 1px 0 0 #171717, 1px 1px 0 0 #171717, 1px 0 0 0 #171717 inset, 0 1px 0 0 #171717 inset;
	color: #FFF;
}

.character-grid .grid .single-item.character-set-box span{
	font-size: 1em;
}

.character-grid .grid .character-set-box span {
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
}

@media only screen and (min-width:768px) {
	.ly-preview-button{
		display: block;
		width: 100%;
		font-weight:400;
		text-align: center;
		font-size: 1rem;
	}
	.character-grid .grid .character-set-category {
		display: flex;
		font-size: calc(80vw / 32);
		text-align: center;
		width: 100%;
		flex: 0 1 auto;
		flex-flow: row;
		flex-wrap: wrap;
	}
	.character-grid .grid .character-set-box {
		line-height: calc(100vw / 10);
		padding-top: 10%;
		position: relative;
		width: 10%;
	}
	.character-grid .grid .single-item.character-set-box span{
		font-size: 1em;
		font-weight: 400;
		font-family: 'KLeagueBasic', sans-serif;
	}
	.pitch .character-grid .grid .single-item.character-set-box span{
		font-size: 1em;
		font-weight: 400;
		font-family: 'KLeagueDynamic', sans-serif;
	}
}
@media only screen and (min-width: 1920px) {
	.character-grid .grid .single-item.character-set-box {
		font-size: 48px;
	}
	.character-grid .grid .character-set-box.zoomed {
		font-size: 238px;
	}
}


/* tryit */

.section__body--tryit {
	display: flex;
	flex-wrap: wrap;
	background-color: #0A1432;
}

.section__body--tryit .title-box{position: relative; width: 100%;}
.section__body--tryit .title-box__text{
	background-color: #19FF8D;
	color:#000;
	padding: 15px;
	font-size: 3rem;
	text-align: center;
}


.edit_wrap{width: 100%;padding: 10vh 0; display: flex; align-items: center;}
#ly-editor{padding:0.5208333333333333VW;width:62.5VW;margin:0 auto;font-size:4rem;line-height:1.4;text-align:center;color:#fff; font-family: 'KLeagueBasic', sans-serif;}
#font_regular{font-weight: 400;width:10.46875VW;height:3.4375000000000004VW;font-size:1.25VW;border:0.052083333333333336VW solid #060001;background-color:#F8E588;border-radius:1.8229166666666667VW;box-shadow:0.3125VW 0.46875VW 0 rgb(181 181 181 / 50%);}
#font_bold{width:10.46875VW;height:3.4375000000000004VW;font-size:1.25VW;border:0.052083333333333336VW solid #060001;background-color:#EAEAEA;border-radius:1.8229166666666667VW;font-weight:400;box-shadow:0.3125VW 0.46875VW 0 rgb(181 181 181 / 50%);}

.ly-size-s {
	font-size: 3rem !important;
}
.ly-size-m {
	font-size: 4rem !important;
}
.ly-size-l {
	font-size: 5rem !important;
}
.ly-size-xl {
	font-size: 6rem !important;
}

.ly-color-b {
	background: #fff;
}
.ly-color-w {
	background: #0A1432;
}
.ly-color-b #ly-editor {
	color: #000 !important;
}

.ly-toolbar{
	display: flex;
	flex-wrap: wrap;
	order: 1;    
	width: 100%;
    text-align: center;
    color: #19FF8D;
    border-bottom: 1px solid;
    font-size: 0.6rem;
    font-weight: 400;
}

.ly-toolbar * {display:inline-block;}
.ly-toolbar > * {padding:0 3vw;}
.ly-font, .ly-size, .ly-color {
	display: flex;
	width: 100%;
}
.ly-line {
	display: flex;
	flex: 1;
	align-items: center;
}
.ly-line:before {
	content: "";
    display: block;
	margin: 0 20px;
    width: 100%;
    height: 1px;
    background: #19FF8D;
    /* left: 25%;
    top: 55%;
    position: absolute; */
}
.ly-button-frame {
	display: flex;
    align-items: center;
	font-size: 0;
}
.ly-label {	
	margin: 35px 0;
    text-align: center;
    color: #19FF8D;
    position: relative;
	font-size: 2rem;
	font-weight: 400;
}
/* .ly-label::before {
	content: "";
    display: block;
    width: 70%;
    height: 1px;
    background: #19FF8D;
    left: 25%;
    top: 55%;
    position: absolute;
  } */
  
.ly-toolbar input[type=radio] {display:none;}
.ly-toolbar label{
	font-size: 2rem;
	position: relative;
	color: #19FF8D;
	border: 1px solid #19FF8D;
	padding: 2.5vw 4vw;
	align-items: center;
	font-weight: 400;
}

.ly-toolbar input[type=radio]:checked + label {
	background-color: #19FF8D;
	color: var(--main-color);
}

@media only screen and (min-width:768px) {
	.section__body--tryit .title-box__text{
		background-color: #19FF8D;
		color:#000;
		padding: 15px;
		font-size: 1rem;
		text-align: center;
	}
	.ly-toolbar{
		justify-content: space-between;
		padding: 0 8%;
		order: 0;
	}
	.ly-toolbar > * {padding:0 1vw;}

	.ly-line {
		flex: auto;
		width: 10vw;
	}
	.ly-font, .ly-color {
		width: 25vw;
	}
	.ly-size {
		width: 30vw;
	}
	.ly-label {	
		margin: 35px 0;
		text-align: center;
		color: #19FF8D;
		position: relative;
		font-size: 0.6rem;
	}
	.ly-toolbar label{
		font-size: 0.6rem;
		position: relative;
		color: #19FF8D;
		border: 1px solid #19FF8D;
		padding: 10px 15px;
		align-items: center;
	}
}

/* download */

.section__body--download {
	height: 100vh;
}
.section__body--download .download-wrap {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
.section__body--download .title-box {
	text-align: center;
    width: 100%;
	margin-bottom: 5vw;
}
.section__body--download .title-box .title-box__text {
	padding-top:2vw;
	font-size: 2rem;	
	color:#19FF8D
}
.section__body--download .title-box__text--big {
	font-size: 2rem;
}

.section__body--download .download-box ul li{
	list-style-type: none;
	margin-bottom: 10vw;
}

.download-box a{
    color: #19FF8D;
    border: 1px solid #19FF8D;
	font-weight: 400;
    margin: 3px auto;
}

.download-box a:link,.download-box a:visited {
	display: block;
    background-color: #0A1432;
    width: 40vw;
    text-align: center;
    padding: 4vw;
    text-decoration: none;
	font-size: 4vw;
	font-weight: 400;
}

@media only screen and (min-width: 768px) {
	.section__body--download .title-box {
		text-align: center;
		width: 100%;
		margin-bottom: 1vw;
	}
	.section__body--download .title-box .title-box__text {
		padding-top:2vw;
		font-size: 1rem;	
		color:#19FF8D
	}
	.section__body--download .title-box__text--big {
		font-size: 1rem;
	}
	
	.section__body--download .download-box ul li{
		list-style-type: none;
		float: left;
		margin-bottom: 0;
	}
	
	.download-box a{
		color: #19FF8D;
		border: 1px solid #19FF8D;
		font-weight: 400;
		margin: 3px;
	}
	
	.download-box a:link,.download-box a:visited {
		display: block;
		background-color: #0A1432;
		width: 10vw;
		text-align: center;
		padding: 9px;
		text-decoration: none;
		font-size: 1.4583333333333333VW;
	}
}

/* Main layout */

/* * {
	transition: all .3s ease 0s;
} */

