@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');
}

:root {
	--vh: 100%;
 }

html,
body {
    height: 100vh;
    height: var(--vh);
}

/* 초기화 */
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:120px;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: 1px;
	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:10px;right:210px;
}
.picture_slide_button.style_2 {
	right:30px;
}
.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:105px;height:105px;
	overflow: hidden;border-radius:50%;
}


.greeting-video-wrap {top:15px;right:345px;}


.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;
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	-webkit-transform: translate3d(0, 0, 0);
	-moz-transform: translate3d(0, 0, 0);
}
.video-btn {position:absolute;left:50%;transform:translateX(-50%);bottom:0rem;width:100%;height:100%;}
.greeting-video-wrap .video-wrap video {width:100%;}
.greeting-video-wrap button {border:0;background:transparent;font-size:3rem;color:#333;opacity: 0.8;z-index: 100;color:#fff;}
.greeting-video-wrap button i {position:absolute;width:100%;bottom:8px;left:0;}
.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");
}

.greeting-video-wrap3.j8 .video-wrap.paused::before {
	background-image: url("../j8/img/poster8.jpg");
}
.greeting-video-wrap3.j9 .video-wrap.paused::before {
	background-image: url("../j9/img/poster9.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;}


/* 플립북 */
.solid-container {
	width:100%;
	position:fixed;
	top:50%;left:50%;
	transform:translate(-50%,-50%);
	z-index: 100000;
	height: 89vh;
	display:none;
	background:rgba(0,0,0,0.5);
	transition:all 0.4s;
}
.solid-container.show {
	display:block;
}

.flip-book-close-btn {
	color:#fff;
	font-size:5rem;
	position:absolute;right:calc(5% + 50px);
	top:calc(5vh + 50px);
	z-index: 1000000;
	transition:all 0.4s;
	cursor:pointer;
	display:none;
}
.flip-book-close-btn.show {display:block;}
.flip-book-close-btn:hover {
	transform:scale(1.1);
}

/* 플립북아이콘 */

.book-icon-container {
	width:100px;
	aspect-ratio: 210/297;
	position:absolute;
	top:0;right:490px;
	z-index: 100;
	cursor:pointer;
	transition:all 0.4s;
}
.book-icon-container.hide {display:none;}
  .box-inner {
	/* display: none; */
	z-index: 99;
	display: flex;
	/* justify-content: space-between; */
	align-items: center;
	width:100%;height:100%;
	overflow: hidden;
  }
  
  .book {
	margin-top:1rem;
	width: 10rem;
	aspect-ratio: 210/297;
	background-color: rgb(62, 71, 152);
	transition: all 0.3s ease-in-out;
	transform-origin: left center 0px;
	transform-style: preserve-3d;
	border-top-right-radius: 5px;
	border-bottom-right-radius: 5px;
	-webkit-backface-visibility: hidden;
	overflow: hidden;
  }
  
  .box-out .book::after {
	content: " ";
	display: block;
	opacity: 0;
	width: 15rem;
	aspect-ratio: 210/297;
	position: relative;
	left: 8px;
	transition: all 0.3s ease;
  }
  
  .box-out .book::before {
	content: " ";
	z-index: 999;
	display: block;
	width: 20px;
	height: 100px;
	opacity: 0;
	position: absolute;
	top: -12px;
	right: 8px;
	transition: all 0.25s;
	background: url(../j5/img/book-thumb.jpg) no-repeat center/contain;
  }
  
  /*------ background-pic ------*/
  
  .books-1 {
	background: url(../j5/img/book-thumb.jpg) no-repeat center/contain;
  }
  
  
  .box-inner .book {
	position: relative;
  }
  
  /* ----- hover ----- */
  
  .book:hover {
	cursor: pointer;
	transform: rotateY(-28deg) rotateZ(-2deg) scale(1.02);
	-webkit-backface-visibility: hidden;
	box-shadow: 1px 3px 2px #353d85, 20px 8px 0 #525dc4;
	/* transform: scale(1.02); */
  }
  
  .book:hover::after {
	content: " ";
	display: block;
	opacity: 1;
	width: 172px;
	height: 255px;
	position: relative;
	left: 8px;
	background: linear-gradient(
	  -180deg,
	  rgba(255, 255, 255, 0.1) 0%,
	  rgba(255, 255, 255, 0) 60%
	);
  }
  
  .book:hover::before {
	transform: translateY(9px);
	opacity: 1;
  }
  
  .dr {
	position: absolute;
	bottom: 16px;
	right: 16px;
	width: 100px;
  }

  

@media screen and (max-width:1700px){
	html {font-size:60%}
}
@media screen and (max-width:1441px){
	html {font-size:52%}
	
	.greeting-video-wrap {width:90px;height:90px;}
	.greeting-video-wrap1, .greeting-video-wrap2, .greeting-video-wrap3 {right:320px !important}
	.book-icon-container {width:72px !important;right:440px;}
	.flip-book-close-btn {font-size:40px;right:25px !important;top:6% !important}
}


@media screen and (max-width:1281px){

	/* .greeting-video-wrap1, .greeting-video-wrap2, .greeting-video-wrap3 {right:320px !important} */
	.picture_slide_button {right:200px;} 
	
}
@media screen and (max-width:1181px){}
@media screen and (max-width:1025px){

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

	
	/* .picture_slide_button {right:25px;top:85px}
	.picture_slide_button.style_2 {right:10px;top:10px;} */
	

	#toggle-play {height:25px;}
	.bgm_player {left:30px;bottom:unset;top:129px;}

	.tutorial_icon {left:85px;bottom:unset;top:100px;}
	.tutorial_icon img {height:28px;}

	.youtube_wrap iframe {width:85% !important}

	
	.tutorial_cont {margin-top:8rem;}
	.tt-wrap {margin:4rem 0 0 0;width:33.333%;}
	
	/* .greeting-video-wrap1, .greeting-video-wrap2, .greeting-video-wrap3 {top:200px !important;right:30px !important}
	.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;right:10px !important;}


}
@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:55px;height:55px;}
	.greeting-video-wrap1, .greeting-video-wrap3 {top:130px !important;right:22px !important;}
	.greeting-video-wrap2 {top:130px !important;right:22px !important;}

	.bgm_player {top:42px;left:unset;right:195px;}
	.tutorial_icon {top:60px;left:20px;}
	.tutorial_icon img {height:20px;}

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

	.book-icon-container {width:50px !important;right:25px;top:190px}
	.flip-book-close-btn {font-size:30px;right:15px !important;top:15px !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%}
}