@import url("reset.css");
@import url("slick.css");
body {
	background-color:#EDEBE7; 
}

.intro {
    width: 100%;
    height: 100vh;
    overflow-x:hidden;
    overflow-y:hidden;
}

.video-container {
    position: relative;
    width:100%;
    height:auto;
    padding-top:50%;
}

.video-container video {
    position:absolute;
    min-width:100vw;
    min-height:100vh;
    top:0;
    left:0;
}

.intro-bg {
    position: relative;
    left:50%;
    transform: translate(-50%, 0px);
    width: 100%;
    min-width: 1920px;
}

.intro .intro-box {
    position: absolute;
    width: 22%;
    min-width:428px;
    height: fit-content;
    top: 424px;
    left:315px;
    z-index: 10;
}

.intro .intro-txt {
	position:absolute;
	float: left; 
	font: normal normal 300 20px/29px Noto Sans KR;
	color:#555555;
	letter-spacing: 0px;
}

.intro .intro-btn {
	margin-top:40px;
	width:100%;
	z-index: 10;
}

.intro .intro-btn img {
	float: left;
	display: inline-block;
	width:48%;
	z-index: 10;
}

.intro .intro-btn .btn-store {
	margin-left:3%;
	z-index: 10;
}

.filter-color1 {
    filter: invert(80%) sepia(25%) saturate(874%) hue-rotate(168deg) brightness(105%) contrast(104%)
}

.filter-color2 {
	filter: invert(73%) sepia(9%) saturate(6407%) hue-rotate(188deg) brightness(97%) contrast(99%)
}

.filter-color3 {
	filter: invert(41%) sepia(72%) saturate(839%) hue-rotate(220deg) brightness(97%) contrast(90%)
}

.filter-color4 {
	filter: invert(72%) sepia(44%) saturate(5700%) hue-rotate(318deg) brightness(101%) contrast(96%)
}

.filter-color5 {
	filter: invert(84%) sepia(100%) saturate(1002%) hue-rotate(309deg) brightness(102%) contrast(95%)
}

.filter-color6 {
	filter: invert(97%) sepia(55%) saturate(5795%) hue-rotate(321deg) brightness(108%) contrast(97%)
}

.filter-color7 {
	filter: invert(27%) sepia(0%) saturate(3283%) hue-rotate(316deg) brightness(92%) contrast(69%)
}

.filter-color8 {
	filter: invert(88%) sepia(11%) saturate(1190%) hue-rotate(48deg) brightness(105%) contrast(99%)
}


.popup_wrap {
	position:fixed; 
	left:0; 
	top:0; 
	bottom:0; 
	z-index:0;
	display:none;
}

.popup .inner {
	position:relative; 
	padding:0 0px; 
	vertical-align:middle; 
	background-color: #F2EEED;
	display: grid;
    grid-template-columns: 82px 82px 193px;
}
.popup .inner p {
    font: normal normal 500 18px/24px Noto Sans KR;
    margin-top: 25px;
}
.popup .inner iframe{width:670px; height:368px; }

.popup {
	position:fixed;
	right:-40%; 
	top:100px; 
	bottom:0; 
	width:370px;
    height:160px;  
	text-align:center; 
	box-sizing:border-box; 
	display:table; 
}

.popup_close {
	position:absolute; 
	left:0px; 
	bottom:-30px; 
	z-index: 0;
}

.popup_close img{
	width:20px;
	height:20px;
	filter: invert(100%);
}
.ces2021 {
	width: 80px;
	grid-column-start: 1;
	grid-column-end: 1;
	grid-row-start: 1;
	grid-row-end: 1;
}
.ces2021-btn {
	cursor: pointer;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 80px;
	height: 20px;
	border-radius: 100px;
	background-color: #fff;
	box-shadow: 2px 3px 4px rgb(0 0 0 / 25%);
	color: #000;
	font-size: 10px;
	line-height: 8px;
	margin-top: 5px;

	grid-column-start: 1;
	grid-column-end: 1;
	grid-row-start: 2;
	grid-row-end: 3;
}

.ces2022 {
	width: 80px;
	grid-column-start: 2;
	grid-column-end: 2;
	grid-row-start: 1;
	grid-row-end: 1;
}

.ces2022-btn {
	cursor: pointer;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 80px;
	height: 20px;
	border-radius: 100px;
	background-color: #fff;
	box-shadow: 2px 3px 4px rgb(0 0 0 / 25%);
	color: #000;
	font-size: 10px;
	line-height: 10px;
	margin-top: 5px;

	grid-column-start: 2;
	grid-column-end: 2;
	grid-row-start: 2;
	grid-row-end: 3;
}