@charset "utf-8";


@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.6/dist/web/variable/pretendardvariable-dynamic-subset.css");

* {
	--color-bg-overlay: #000;
    --violet :  rgba(61, 78, 254, 0.55);
}
@font-face {
    font-family:'GmarketSans';
    font-weight: 300;
    font-style: normal;
    src: url('../font/GmarketSansLight.woff');
} 

@font-face {
    font-family:'GmarketSans';
    font-weight: 500;
    font-style: normal;
    src: url('../font/GmarketSansMedium.woff');
} 

@font-face {
    font-family:'GmarketSans';
    font-weight: 700;
    font-style: normal;
    src: url('../font/GmarketSansBold.woff');
} 

@font-face {
    font-family: 'PyeongChangPeace';
    font-weight: 300;
    font-style: normal;
    src: url('../font/PyeongChangPeace-Light.woff');
} 

@font-face {
    font-family: 'SBAggro';
    font-weight: 700;
    font-style: normal;
    src: url('../font/SBAggroBold.woff');
}

/* 초기화 */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
html {font-size:62.5%;width:100%;height:100%;overflow: hidden;font-family:'Pretendard Variable', 'GmarketSans', 'PyeongChangPeace',  dotum, sans-serif;}
body {
	line-height: 1;
	font-family:'Pretendard Variable', 'GmarketSans', 'PyeongChangPeace',  dotum, sans-serif;width:100%;height:100%;overflow: hidden;
}
h1, h2, h3, h4, h5, h6, input, button, textarea, select {font-family:'Pretendard Variable', 'GmarketSans', 'PyeongChangPeace',  dotum, sans-serif;}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* 기본스타일 */
.mainLayout {}
.fullLayout {width:92%;margin:0 auto;}

#my_css_id>div {
	margin-top:-5px;
}

#my_css_id>div>div {
	opacity:0.9 !important;
    border-radius:10px !important;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    border:1px solid #ccc !important;
}

.j2-body #my_css_id>div>div {
	opacity: 1 !important;
}



#thumbs_icon {position:relative;}
/* #thumbs_icon::before {
    content:'';
    width:17.3rem;
    height:6.3rem;
    background:url(../j1/img/popup.png) no-repeat center/contain;
    position:absolute;
    top:-6rem;left:-7.5rem;
    opacity:1;
    animation: motion 0.5s linear 0s infinite alternate;
} */

@keyframes motion {
	0% {margin-top: -5px;}
	100% {margin-top: 5px;}
}


/* 유튜브모달팝업 */


.movie-wrap {
	display:none;
	width:100%;height:100%;
	position:absolute;
	top:0;left:0;
	z-index: 9999999999;
  }
  .mask {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background:rgba(0,0,0,0.7);
	z-index: 999999998;
  }

  .close-btn{
	position:absolute;
	right:5%;
	top:5%;
	color:#fff;
	z-index: 9999999999;
	font-size:3rem;
  }

  #player {
	position:absolute;
	left:50%;
	top:50%;
	aspect-ratio: 16/9;
	transform:translate(-50%,-50%);
	z-index: 999999999;
  }

  .picture-wrap {
	display:none;
	width:100%;height:100%;
	position:absolute;
	top:0;left:0;
	z-index: 9999999999;
  }

  .pic-wrap {
	position:absolute;
	left:50%;
	top:50%;
	transform:translate(-50%,-50%);
	z-index: 999999999;
  }
  .pic-wrap img {
	max-width:100%;
  }
  


/* bgm */
.bgm_player {position:absolute;left:125px;bottom:14px;z-index: 1;}

#visualizer{
	height: 3rem;
	width: 14rem;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1.5px;
	margin-left:4rem;
	display:none;
}

.track{
	width: 2%;
	height: 25%;
	background: var(--violet);
	transition: .01s;
}

.j2-body .track {
	background:#3878f4;
	opacity: 0.7;
}

.track:nth-child(2n){
	height: 15%;
}

.track:nth-child(3n){
	height: 20%;
}

.track:nth-child(7n){
	height: 35%;
}

#toggle-play{
	border: none;
	background-color: transparent;
	height: 30px;
	position: absolute;
	bottom: 2px;
	left: 0;
}
#toggle-play img {
	opacity:0.7;
	height:100%;
}

#toggle-play:hover{
	cursor: pointer;
}

#control-bar {
}

.picture_slide_button {
	cursor:pointer;
	position:absolute;top:1rem;right:22rem;
}
.picture_slide_button.style_2 {
	right:3rem;
}
.picture_slide_button img {
	height:12rem;
}

.picture_slide {
	display:none;
	width:100%;height:100%;position:fixed;
	top:0;left:0;z-index: 99999;


}
.picture_slide .bg {width:100%;height:100%;background:rgba(0,0,0,0.9);position:absolute;}
.picture_slide.show {display:block;}



.picture_slide .swiper-container {
	height: 100%;
	padding:7% 0;
	box-sizing: border-box;
  }
  
  .picture_slide .swiper-slide {
	overflow: hidden;
  }
  
  .picture_slide .slide-inner {
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
  }

  .swiper-button-next, .swiper-container-rtl .swiper-button-prev {right:30px !important;}
  .swiper-button-prev, .swiper-container-rtl .swiper-button-next {left:30px !important}
  .swiper-button-next, .swiper-button-prev {width:2.7rem !important;height:4.4rem !important}

  .picture_slide .close {font-size:0;z-index:999999;cursor:pointer;color:#fff;font-weight:300;letter-spacing: -0.04em;position:absolute;top:6%;right:6%;padding:5px 15px 5px;border-radius:50px;}
  .picture_slide .close i {font-size:3.5rem;}

  .swiper-pagination {bottom:18% !important;}
  .swiper-pagination-bullet {background:rgba(255,255,255,1) !important;width:12px !important;height:12px !important;}
  .swiper-pagination-bullet-active {background:rgba(255,255,255,1) !important}


  .viewDataWrap {position:absolute;background:#fff;  bottom:0;right:0;font-size:1.8rem;}

.greeting-video-wrap {
	position:absolute;
	width:10.5rem;height:10.5rem;
	overflow: hidden;border-radius:50%;
}


.greeting-video-wrap1 {top:17px;right:350px;}
.greeting-video-wrap2 {top:17px;right:470px;}
.greeting-video-wrap3 {top:17px;right:350px;}


.greeting-video-wrap.style_2.greeting-video-wrap1 {
	right:150px;	
}
.greeting-video-wrap.style_2.greeting-video-wrap2 {
	right:270px;	
}

.greeting-video-wrap .video-wrap {width:100%;aspect-ratio: 1/1;overflow: hidden;border-radius:50%; box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;background:#94cdf8;}
.video-btn-1, .video-btn-2 {position:absolute;left:50%;transform:translateX(-50%);bottom:0rem;}
.greeting-video-wrap .video-wrap video {width:100%;}
.greeting-video-wrap button {border:0;background:transparent;font-size:2.8rem;color:#333;opacity: 0.8;z-index: 100;}
.greeting-video-wrap2 button {color:#fff;}
.greeting-video-wrap3 button {color:#fff;}
.greeting-video-wrap1 .video-wrap.paused::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-image: url("../j4/img/poster.jpg");
	background-size: cover;
	background-position: center;
	opacity: 1;
	transition: opacity .2s ease-in-out;
	z-index: 1;
  }

.greeting-video-wrap2 .video-wrap.paused::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-image: url("../j4/img/ai.jpg");
	background-size: cover;
	background-position: center;
	opacity: 1;
	transition: opacity .2s ease-in-out;
	z-index: 1;
  }

.greeting-video-wrap3 .video-wrap.paused::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-image: url("../j1/img/poster1.jpg");
	background-size: cover;
	background-position: center;
	opacity: 1;
	transition: opacity .2s ease-in-out;
	z-index: 1;
  }

.greeting-video-wrap3.j2 .video-wrap.paused::before {
	background-image: url("../j2/img/poster2.jpg");
}

.greeting-video-wrap3.j3 .video-wrap.paused::before {
	background-image: url("../j3/img/poster3.jpg");
}

.greeting-video-wrap3.j5 .video-wrap.paused::before {
	background-image: url("../j5/img/poster5.jpg");
}

.greeting-video-wrap3.j6 .video-wrap.paused::before {
	background-image: url("../j6/img/poster6.jpg");
}

.greeting-video-wrap3.j7 .video-wrap.paused::before {
	background-image: url("../j7/img/poster7.jpg");
}
  
  .video-wrap.paused video {
	opacity: 0;
  }


  /* 튜토리얼 팝업 */

  .tutorial_wrap {width:100%;height:100%;}
  	.tutorial_icon {position:absolute;left:190px;bottom:13px;z-index: 1;cursor:pointer;}
  	.tutorial_icon img {height:32px;opacity:0.7;}

	.tutorial {display:none;
		width:100%;height:100%;position:fixed;z-index: 99999999999;top:0;left:0;
	}
	.tutorial.show {display:block;}
	.tutorial .popup-bg {width:100%;height:100%;position:fixed;background:rgba(0, 0, 0, 0.6);}
	.popup-content-wrap {box-sizing:border-box;box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;background:rgba(255,255,255,0.18);color:#fff;border-radius:4rem;padding:7rem 5rem;width:94%;max-width:1235px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;}
	.tutorial_title h3 {font-size:1.8rem;font-family:'PyeongChangPeace';margin-bottom:2rem;}
	.tutorial_title h4 {font-size:6rem;font-family:'PyeongChangPeace';}
	.tutorial_title button {position:absolute;right:5rem;top:5rem;background:transparent;color:#fff;border:0;font-size:3rem;cursor:pointer;}
	.tutorial_cont {display:flex;flex-wrap:wrap;justify-content:center;margin-top:13rem;}
	.tt-wrap {margin:0 4rem;}
	.tt-wrap .icon-img-wrap {height:3rem;}
	.tt-wrap .icon-img-wrap img{max-height:100%;}
	.tt-wrap h5 {font-size:1.7rem;font-weight:500;letter-spacing: -0.02em;margin-top:2rem;}

@media screen and (max-width:1700px){
	html {font-size:60%}
}
@media screen and (max-width:1441px){
}
@media screen and (max-width:1281px){
	html {font-size:54%}
	.picture_slide_button {right:10px;top:60px}
	.picture_slide_button.style_2 {right:10px;top:10px;}
	.greeting-video-wrap {width:7rem;height:7rem;}
	.greeting-video-wrap1, .greeting-video-wrap3 {top:125px;right:20px;}
	.greeting-video-wrap2 {top:125px;right:90px;}
	#toggle-play {height:22px;}
	.bgm_player {left:10px;bottom:unset;top:107px;}
	.tutorial_icon {left:140px;bottom:unset;top:80px;}
	.tutorial_icon img {height:28px;}
	.youtube_wrap iframe {width:85% !important}

	.greeting-video-wrap1, .greeting-video-wrap2, .greeting-video-wrap3 {top:180px !important;}

	.tutorial_cont {margin-top:8rem;}
	.tt-wrap {margin:4rem 0 0 0;width:33.333%;}

	.greeting-video-wrap1.style_2 {top:130px !important;right:20px !important;}
	.greeting-video-wrap2.style_2 {top:200px !important;right:20px !important;}

	.picture_slide .close {top:20px;}
}
@media screen and (max-width:1181px){}
@media screen and (max-width:1025px){

}
@media screen and (max-width:961px){
	html {font-size:53%}
}
@media screen and (max-width:821px){
	html {font-size:52%}
}
@media screen and (max-width:641px){
	html {font-size:50%}


	.picture_slide_button {top:6rem}
	
	.picture_slide_button img {height:7rem}
	#toggle-play {height:17px;bottom:0}
	.swiper-button-next, .swiper-button-prev {transform:scale(0.6)}
	.swiper-button-next, .swiper-container-rtl .swiper-button-prev {right:0 !important}
	.swiper-button-prev, .swiper-container-rtl .swiper-button-next {left:0 !important}
	.youtube_wrap iframe {width:94% !important}

	.greeting-video-wrap {width:5.5rem;height:5.5rem;}
	.greeting-video-wrap1, .greeting-video-wrap3 {top:125px !important;right:20px;}
	.greeting-video-wrap2 {top:180px !important;right:20px;}
	.bgm_player {top:75px;}
	.tutorial_icon {top:57px;left:60px;}
	.tutorial_icon img {height:20px;}

	.greeting-video-wrap1.style_2 {top:80px !important;right:10px !important;}
	.greeting-video-wrap2.style_2 {top:135px !important;right:10px !important;}

	.greeting-video-wrap button  {font-size:2rem;}

	.tt-wrap .icon-img-wrap {height:2rem;}
	.popup-content-wrap {padding:6rem 3rem;}
	.tutorial_title button {right:1rem;top:3rem;}
	.tutorial_cont {margin-top:5rem;}
	.tt-wrap h5 {font-size:1.5rem;}
}
@media screen and (max-width:516px){
	html {font-size:48%}
}
@media screen and (max-width:415px){
	html {font-size:46%}

}
@media screen and (max-width:376px){
	html {font-size:44%}
}