@font-face {
    font-family: 'GMarketSans';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansLight.woff') format('woff');
    font-weight: 300;
    font-display: swap;
}

*{
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  background-repeat: no-repeat;
  user-select: none;
  font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
}
html, body {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  width: 100%;
  height: 100%;
}
ul, ol, li{
  list-style:none;
}
body {
  font-family: pretendard-std, -apple-system, BlinkMacSystemFont, system-ui, Roboto, 'Helvetica Neue', 'Segoe UI', 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', sans-serif;
  font-size: 24px;
  color: #fff;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #B6C9DF;
  margin: 0;
}
button{
  cursor:pointer;
  background:none;  border:none;
  background-repeat: no-repeat;
  background-size:cover;
}
img{
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
  transform: translateZ(0); /* GPU 가속 유도 */
  -webkit-font-smoothing: subpixel-antialiased;
}
audio {
	display: none;
}
.GangwonEduPower{
   font-family: 'GangwonEdu Power';
}
.container{
  position: relative;
  width: 1920px;
  height: 1080px;
  overflow: hidden;
  background-color:#fff;
}

.btn_grp{
  position: absolute;
  top:10px;
  right:10px;
}

.btn_grp > button{
  width:74px;
  height:74px;
  background-image:url('../img/btn/btn-close.png');
  cursor:pointer;
  text-indent: -9999em;
}
.btn_grp > button#btn_home{
  background-image:url('../img/btn/btn-home.png');
}
.btn_grp > button#btn_sound{
  background-image:url('../img/btn/btn-sound-mute.png');
}
.btn_grp > button#btn_sound.active{
  background-image:url('../img/btn/btn-sound.png');
}
.btn_grp > button#btn_close{
  background-image:url('../img/btn/btn-close.png');
}

#container.intro #btn_home{
  display:none;
}
#container.base button#btn_home{
  background-image:url('../img/btn/btn-base-home.png');
}
#container.base button#btn_sound{
  background-image:url('../img/btn/btn-base-sound-mute.png');
}
#container.base button#btn_sound.active{
  background-image:url('../img/btn/btn-base-sound.png');
}
#container.base button#btn_close{
  background-image:url('../img/btn/btn-base-close.png');
}


.btn_grp.left{
  left:10px;
  right:auto;
}
.btn_grp.left > button{
 text-indent: 0;
 background:none;
 background-color:#fff;
 color:#000;
 width:fit-content;
 height:auto;
 padding:.3rem;
 border:1px solid #000;
}


.scene{
  position: absolute;
  background-color:#fff;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.1s ease;
}
.scene.active{
  opacity: 1;
  pointer-events: auto;
}
#scene_loading{
  position:absolute;
  width:100%;
  height:100%;
  left:0;
  top:0;
  display:flex;
  justify-content: center;
  align-items: center;
  background: #000;
}
#scene_loading.hidden{
  display:none !important;
}
.app-toast{
  position: absolute;
  left: 50%;
  bottom: 40px;
  transform: translateX(-50%);
  z-index: 9999;
  background: rgba(0,0,0,0.75);
  color: #fff;
  padding: 14px 18px;
  border-radius: 12px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
  font-size: 22px;
  line-height: 1.3;
  max-width: 80%;
  text-align: center;
}
.app-toast.show{
  opacity: 1;
}
.scene > *{
  position: absolute;
}
.scene video{
  width:1920px;
  height:1080px;
  object-fit:cover;
  pointer-events: none;
  z-index: 0;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}


/* Secene : Intro */
@keyframes intro_sprite_ani {
  from { background-position: 0px; }
  to { background-position: -68263px; }
}
#intro_sprite{
  position:absolute;
  left:550px;
  top:370px;
  width:743px;
  height:629px;
  /* border:1px solid #f00; */
  overflow:hidden;
  background-image:url('../img/intro_spaceship.png');
  background-size: auto 100%;
  background-repeat: no-repeat;
  animation: intro_sprite_ani 2s steps(89) infinite;
  display:none;
}
#intro_sprite.active{
  display:block;
}

button#btn_intro_side{
  position: absolute;
  width: 255px;
  height: 173px;
  top:496px;
  left:1170px;
  background-image:url('../img/btn/btn-intro-side.png');
  text-indent: -9999em;
  transform-origin: bottom left;
  /* animation: swing 2s ease-in-out infinite; */
}
button#btn_intro_start{
  position: absolute;
  width: 542px;
  height: 120px;
  top:828px;
  left:688px;
  background-image:url('../img/btn/btn-intro-start.png');
  text-indent: -9999em;
}
button#btn_explanation_start{
  position: absolute;
  width: 402px;
  height: 120px;
  top:788px;
  left:759px;
  background-image:url('../img/btn/btn_explanation_start.png');
  text-indent: -9999em;
}

#text-explanation{
  position:absolute;
  width:885px;
  left:699px;
  top:273px;
  display:flex;
  flex-direction: column;
  font-size:44px;
  font-weight:700;
  line-height:1.4;
  letter-spacing: -.1rem;
}
#text-explanation > dt{
  font-size:64px;
  font-weight:400;
  margin-bottom:1rem;
  background: linear-gradient(to bottom, #fff, #FAFDFE, #C9FCFF, #E2F6FF);
  background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
#text-explanation > dd{
  font-family: Pretendard;
  font-weight: 700;
  font-style: Bold;
  font-size: 44px;
  leading-trim: NONE;
  line-height: 140%;
  letter-spacing: 0%;
}

/* Space ship */
#grp_select_3{
  position:relative;
  width:max-content;
  text-align: center;
  margin:110px auto 0;
  font-size:33px !important;
  z-index: 3;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}
#grp_select_3 > h2{
  font-family: Pretendard;
  font-weight: 800;
  font-style: ExtraBold;
  font-size: 50px;
  leading-trim: NONE;
  line-height: 140%;
  letter-spacing: -2%;
  text-align: center;
}

#spaceship{
  position: absolute;
  width: 1827px;
  height: 431px;
  left: 44px;
  bottom: -50px;
  background-image: url('../img/ship/sel_spaceship.png');
  background-size: contain;
  z-index: 2;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}
#handle_leg{
  position: absolute;
  width: 280px;
  height: 693px;
  background-image: url('../img/ship/sel_handle_leg.png');
  background-size: contain;
  left: 776px;
  top: 70px;
}
#spaceship_handle{
  position: absolute;
  width: 576px;
  height: 550px;
  background-image: url('../img/ship/sel_handle.png');
  background-size: contain;
  left: 630px;
  top: -173px;
  transform-origin: center center;
}
#btn_spaceship_start{
  position: absolute;
  width: 200px;
  height: 200px;
  background-image: url('../img/ship/sel_start.png');
  background-size: contain;
  left: 184px;
  top: 172px;
  text-indent: -9999em;
}
#btn_spaceship_start.active{
  background-image: url('../img/ship/sel_start.ready.png');
}

/* btn_spaceship_category */
#btn_grp_select{
  position:relative;
  width:100%;
  height:302px;
  margin-top:1.5em;
}
.btn_spaceship_category{
  position:absolute;
  width: 302px;
  height: 100px;
  color: #fff;
  font-size: 33px !important;
  font-weight: 700;
  -webkit-appearance: none;
  appearance: none;
  border: 0;
  padding: 0;
  background-color: transparent;
  background-image:url('../img/btn/btn_user_cate_off.png');
  background-size:contain;
  background-repeat: no-repeat;
  background-position: center;
  transition: all 0.3s ease;
  top:0;
  left:0;
  display:flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
}
.btn_spaceship_category:hover,
.btn_spaceship_category.active{
  background-image:url('../img/btn/btn_user_cate_on.png') !important;
  color:#FFE46C;
}
.cate_character{
  display:none;
  width:80px;
  height:80px;
  margin-right:10px;
  background-size:contain;
  background-image:url('../img/character/span_boy.png');
}
.btn_spaceship_category:nth-child(2n) .cate_character{
  background-image:url('../img/character/span_girl.png');
}
.btn_spaceship_category:nth-child(3n) .cate_character{
  background-image:url('../img/character/span_cap.png');
}
.btn_spaceship_category:hover .cate_character,
.btn_spaceship_category.active .cate_character{
  display:inline-block;
}

/* Character */
.character{
  overflow:hidden;
  position:absolute;
}
.character > img{
  position:absolute;
  width:auto;
  height:100%;
  left:0;
  top:0;
}
#char_explanation{
  width:621px;
  height:816.43px;
  left:60px;
  top:70px;
  position:relative;
}
.character #Intro_Captain_mouth{
  position: absolute;
  z-index:3;
  width: 74px;
  height: auto;
  top: 441px;
  left: 364px;
  display:none !important;
}
.character #Intro_Captain_mouth.active{
  display: block !important;
}
/* Scene : Base */
#base_stage{
  position:absolute;
  width:1460px;
  height:630px;
  left:230px;
  top:102px;
}
#base_stage_timeline{
  position: absolute;
  width:686px;height:54px;
  top:66px;
  left:calc(50% - 686px/2);
  text-align: center;
  background-image:url('../img/title/bg_timeline.png');
  background-size:contain;
}
#stage_timeline{
  color:#97D9FF;
  line-height:1.8;
  font-family: Gmarket Sans;
  font-weight: 400;
  font-size: 28px;
  letter-spacing: -2%;
  text-align: center;
}

#contents_title{
  font-size:64px;
  font-weight:400;
  margin-bottom:1rem;
  background: linear-gradient(to bottom, #fff, #FAFDFE, #C9FCFF, #E2F6FF);
  background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  position: absolute;
  width:100%;
  left: 0;
  top: 170px;
  text-align: center;
}
#contents_content{
  position: absolute;
  width:700px;
  left: calc(50% - 686px/2);
  top: 260px;
  display:flex;
}
#contents_content > p{
  font-family: Pretendard;
  font-weight: 600;
  font-size: 42px;
  line-height: 140%;
  letter-spacing: -3%;
  text-align: justify;
  word-break: keep-all;
}
#contents_content > .img_figure{
  position:absolute;
  width:auto;
  min-width:360px;
  height:auto;
  right:calc(686px + 50px);
  top:-80px;
}
#contents_content > .img_figure.landscape{
  top:10px;
}
#contents_content > .img_figure figcaption{
  text-align: center;
  font-size:14px;
  display:flex;
  justify-content: center;
  align-items: flex-start;
  font-family: Pretendard;
  font-weight: 400;
  font-size: 26px;
  line-height: 1.25;
  letter-spacing: -2%;

}
#contents_content > .img_figure figcaption img#icon_caption{
  width:21px;
  display:inline-block;
  max-width: none;
  margin:0;
  margin-right:0;
  border-radius: 0;
  margin-right:1rem;
}
#contents_content > .img_figure img{
  display:block;
  width:auto;
  height:auto;
  max-width:310px;
  max-height: 310px;
  margin:0 auto 0.5rem;
  border-radius: 10px;
}
#btn_grp_base{
  position:absolute;
  left:50%;
  margin-left:-50%;
  /* left:50%; */
  width:100%;
  height:302px;
  margin-top:116px;
  /* transform-origin: top center; */
}
#btn_grp_base .btn_spaceship_category{
  transition: all 0s ease;
}
#base_history{
  position: absolute;
  width: 100%;
  height: 281px;
  left: 0;
  bottom: 0;
  padding: 1rem;
  font-size: 24px;
  line-height: 1.4;
  overflow:hidden;
}
#base_history #swiper_history_block{
  width:100%;
  height:100%;
}
#base_history .swiper-wrapper{
  width:100%;
  height:100%;
}
#base_history dl.history-block-item{
  width:100%;
  height:100%;
}
#base_history .swiper-slide{
}
.swiper-scrollbar {
  width:1200px !important;
  height: 16px !important;
  background-image: url('../img/history/scrollbar_track.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  background:None !important;
  margin-top: 20px;
  position: absolute;
  top:700px !important;
  left:350px !important;
}

.swiper-scrollbar-drag {
  background:none;
  background-image: url('../img/btn/drag_thumb.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;

  cursor: grab;
  width:50px;
  height:35px;
  position:relative;
}

.swiper-scrollbar-drag:active {
  cursor: grabbing;
  opacity: 0.8;
}

#drag_Guide{
  position: absolute;
  font-size: 20px;
  font-weight: 600;
  padding-top: 13px;
  /* padding-left: 35px; */
  background-image: url('../img/btn/cloud_text_base_02.png');
  background-size: contain;
  width: 196px;
  height: 93px;
  left: calc(50% + 16px);
  top: -64px;
  color: #004084;
  font-family: Pretendard;
  font-weight: 700;
  font-style: Bold;
  font-size: 20px;
  leading-trim: NONE;
  line-height: 110.00000000000001%;
  letter-spacing: -2%;
  text-align: center;
    /* border: 1px solid #f00; */
}

.grp_history_items{
  display:flex;
  flex-wrap: wrap;
  justify-content:space-between;
  align-items: center;
  padding-top:30px;
}
span.cata_sub_item{
  display:flex;
  justify-content: center;
  align-items: center;
  width:210px;height:70px;
  background-image:url('../img/history/cata_sub_item_1.png');
  background-size:contain;
  opacity: 0;
}
span.cata_sub_item.view{
  opacity: 1;
  cursor:pointer;
  position:relative;
}
span.cata_sub_item > span.timeline{
  position:absolute;
  width:210px;
  top:-30px;
  left:0;
  color:#000;
  letter-spacing: 0;
  display:flex;
  justify-content: start;
  align-items: center;
  padding-left:1rem;
}
span.cata_sub_item.view.active > span:not(.timeline),
span.cata_sub_item.view:hover > span:not(.timeline){
  color:#FFE311;
}

/* Keep timeline visually fixed while parent item bobs */
span.cata_sub_item.view.active > span.timeline{
  animation: float 0.5s ease-in-out infinite;
  will-change: transform;
}


span.cata_sub_item > span.timeline > span{
  display:inline-block;
  background-image:url('../img/history/icon.timeline.png');
  background-size:contain;
  width:22px;height:24px;
  margin-right:0.5rem;
}
span.cata_sub_item.cata_sub_item_1{
  background-image:url('../img/history/cata_sub_item_1.png');
}
span.cata_sub_item.cata_sub_item_3{
  background-image:url('../img/history/cata_sub_item_2.png');
}
span.cata_sub_item.cata_sub_item_2{
  background-image:url('../img/history/cata_sub_item_2.png');
}
span.cata_sub_item.cata_sub_item_2.human{
  background-image:url('../img/history/cata_sub_item_3.png');
}
span.cata_sub_item.cata_sub_item_3.human{
  background-image:url('../img/history/cata_sub_item_3.png');
}
span.cata_sub_item.active.cata_sub_item_1{
  background-image:url('../img/history/cata_sub_item_1.on.png');
}
span.cata_sub_item.active.cata_sub_item_3{
  background-image:url('../img/history/cata_sub_item_2.on.png');
}
span.cata_sub_item.active.cata_sub_item_2{
  background-image:url('../img/history/cata_sub_item_2.on.png');
}

span.cata_sub_item.active.cata_sub_item_3.human{
  background-image:url('../img/history/cata_sub_item_3.on.png');
}
span.cata_sub_item.active.cata_sub_item_2.human{
  background-image:url('../img/history/cata_sub_item_3.on.png');
}



#base_title{
  position: absolute;
  left: 52px;
  top: 14px;
  width: 230px;
  height: 70px;
}

span.cata_sub_item > span{
  display:block;
  width:132px;
  font-weight:600;
  letter-spacing: -2px;
  text-align: center;

  font-family: Pretendard;
  /* font-weight: 700; */
  /* font-style: Bold; */
  font-size: 20px;
  leading-trim: NONE;
  line-height: 110.00000000000001%;
  letter-spacing: -2%;
  text-align: center;

}


#container_contents_title{
  width:100%;
  text-align: center;
  margin-top:10px;
  color:#004084;
  font-size:54px;
}

#base_contents_title{
  cursor:pointer;
  display:inline-block;
  color:#004084;
  font-size:54px;
  background-image:url('../img/btn/base_contents_title.png');
  background-size:auto 74px;
  background-position:center right;
  padding-right:1.5em;
  position:relative;
}
#base_contents_title.active{
  background-image:url('../img/btn/base_contents_title_active.png');
}
#base_contents_title > span{
  position:absolute;
  font-size:20px;
  font-weight:600;
  padding-top:0.5em;
  padding-left:1em;
  background-image:url('../img/btn/cloud_text_base_01.png');
  background-size: contain;
  width:190px;
  height:69px;
  left:100%;

  font-family: Pretendard;
  font-weight: 700;
  font-style: Bold;
  font-size: 20px;
  leading-trim: NONE;
  line-height: 110.00000000000001%;
  letter-spacing: -2%;
  text-align: center;

}



#contents_relative{
  position: absolute;
  height: 220px;
  right: 180px;
  top: 259px;
  display:flex;
  flex-wrap: wrap;
  flex-direction: column;
  align-content: flex-end;
}
.icon-relative{
  display:inline-block;
  width:80px;height:70px;
  background-image:url('../img/btn/icon-type-1.png');
  background-size:contain;
  cursor:pointer;
  position:relative;
  z-index:3;
}
.icon-relative:nth-child(4){
  position: absolute;
  top:34px;
  left:55px;
}
.icon-relative:nth-child(5){
  position: absolute;
  top:103px;
  left:55px;
}
.icon-relative:nth-child(6){
  position: absolute;
  top:173px;
  left:55px;
}
.icon-relative.icon-type-1{
  background-image:url('../img/btn/icon-type-1.png');
}
.icon-relative.icon-type-1:hover{
  background-image:url('../img/btn/icon-type-1.on.png');
}
.icon-relative.icon-type-2{
  background-image:url('../img/btn/icon-type-2.png');
}
.icon-relative.icon-type-2:hover{
  background-image:url('../img/btn/icon-type-2.on.png');
}
.icon-relative.icon-type-3{
  background-image:url('../img/btn/icon-type-3.png');
}
.icon-relative.icon-type-3:hover{
  background-image:url('../img/btn/icon-type-3.on.png');
}
.icon-relative.icon-type-4{
  background-image:url('../img/btn/icon-type-4.png');
}
.icon-relative.icon-type-4:hover{
  background-image:url('../img/btn/icon-type-4.on.png');
}
.icon-relative.icon-type-5{
  background-image:url('../img/btn/icon-type-5.png');
}
.icon-relative.icon-type-5:hover{
  background-image:url('../img/btn/icon-type-5.on.png');
}
.icon-relative.icon-type-6{
  background-image:url('../img/btn/icon-type-6.png');
}
.icon-relative.icon-type-6:hover{
  background-image:url('../img/btn/icon-type-6.on.png');
}
span.span_hover{
  font-size: 20px;
  line-height: 2.8;
  font-weight:600;
  text-shadow: #000 0px 0px 2px;
  position: absolute;
  top: 3px;
  left: 51px;
  width: 217px;
  height: 62px;

  text-align: center;
  background-image: url('../img/btn/span_hover.png');
  background-size: contain;
  display:none;
  /* display:block; */
}
span.span_hover_text{
  display:inline-block;
  width:75%;
  white-space: nowrap;         /* 줄바꿈 방지 */
  overflow: hidden;            /* 넘치는 텍스트 숨김 */
  text-overflow: ellipsis;     /* 말줄임표(...) 표시 */
  margin:0 auto;
}
.icon-relative:hover{
  z-index: 99;
}
.icon-relative:hover > span.span_hover{
  display:block;
}


#cont_02_example{
  position:absolute;
  top:590px;
  left:710px;
  width:auto;
  display:flex;
}
.cont_02_example{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 210px;
  height: 70px;
  background-size: contain;
  margin-right:10px;
}
#cont_02_example_1{background-image: url('../img/history/cata_sub_item_1.png');}
#cont_02_example_2{background-image: url('../img/history/cata_sub_item_3.png');}
#cont_02_example_3{background-image: url('../img/history/cata_sub_item_2.png');}

.cont_02_character{
  position: absolute;
  width: 252px;
  height: 190px;
  left: 1431px;
  bottom: 169px;
  transform-origin: bottom center;
}
.character_02{
  position: absolute;
  left:0;
  top:0;
  width:100px;
  height:146px;
  background-size: auto 100%;
}
#chr_02_1{
  background-image:url('../img/character/02_sub_boy_sprite_v2.png');
}
#chr_02_2{
  left:50px;
  background-image:url('../img/character/02_sub_gril_sprite_v2.png');
}

.cont_03_character{
  position: absolute;
  width: 512px;
  height: 460px;
  left: 1295px;
  bottom: 144px;
}
.cont_03_character .character_03{
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0px;
  top: 0px;
  /* background-image:url('../img/character/03_captain_sprite_v3.png'); */
  background-image:url('../img/character/03_captain_sprite_v4.png');
  background-size:auto 100%;
  background-position:0px 0px;
}
.cont_04_character{
  position: absolute;
  width: 118px;
  height: 178px;
  left: -220px;
  top: 494px;
  /* border:1px solid #f00; */
}
.cont_04_character.character_04_right{
  left: 1566px;
}
.cont_04_character .character_04{
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0px;
  top: 0px;
  background-image:url('../img/character/04_sub_boy_sprite_v2.png');
  background-size:auto 100%;
  background-position:0px 0px;
}
.cont_04_character.character_04_right .character_04{
  background-image:url('../img/character/04_sub_girl_sprite_v2.png');
  background-position:0px 0px;
}

.contents_arrow{
  position:absolute;
  top:460px;
  left:0;
  width:100%;
  height:1px;
}
.ctl_arrow{
  position:absolute;
  width:80px;
  height:140px;
  top:-70px;
  background-image:url('../img/btn/base.prev.png');
  background-size:contain;
  cursor:pointer;
}
.ctl_arrow.disable{
  opacity:0.25;
  cursor:default;
  pointer-events:none;
}
#ctl_arrow_left{
  left:30px;
}
#ctl_arrow_left:hover,
#ctl_arrow_left.active{
  background-image:url('../img/btn/base.prev.active.png');
}

#ctl_arrow_right{
  background-image:url('../img/btn/base.next.png');
  right:30px;
}
#ctl_arrow_right:hover,
#ctl_arrow_right.active{
  background-image:url('../img/btn/base.next.active.png');
}
.btn_grp.left{
  display:none;
}
#btn_grp_base{
  display:none;
}
#btn_grp_base.active{
  display:block;
}



#layer_out{
  position: absolute;
  z-index:99;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  /* filter: blur(15px); */
  backdrop-filter: blur(10px);         /* 뒤쪽 배경 블러 */
  -webkit-backdrop-filter: blur(10px); /* 사파리 브라우저 지원 */
  display:none;
  /* display: flex; */
  align-items: center;
  justify-content: center;
}
#layer_out_contents{
  width: 837px;
  height: 390px;
  background-image:url('../img/popup_close.png');
  background-size:contain;
  position:relative;
}
#layer_out_contents > button{
  position:absolute;
  opacity:0.5;
  left:0;
  top:0;
  width:100px;
  height:100px;
  text-indent:-9999em;
}
#layer_out_contents > button#btn_close_popup{
  left:724px;
  top:30px;
  width:57px;
  height:52px;
}
#layer_out_contents > button#btn_confirm_popup{
  left:450px;
  top:225px;
  width:133px;
  height:94px;
}
#layer_img_contents{
  /* width: 1295px;
  height: 750px; */
  width: 1090px;
  height: 700px;
  background-image:url('../img/img.contents.bg.png');
  background-size:contain;
  position:relative;
  display:flex;
  align-items: center;
  justify-content: center;
}
#layer_img_contents > button#btn_close_img{
    position: absolute;
    right: 68px;
    top: 46px;
    width: 57px;
    height: 52px;
    background-image: url('../img/img.contents.close.png');
    text-indent: -9999em;
}
#img_contents{
  width:80%;
  height:70%;
  display:flex;
  align-items: center;
  justify-content: center;
}
#img_contents > img{
  width:auto;
  height:100%;
  border-radius: 20px;
}
#contenst_img{
  cursor:pointer;
}
#layer_warning_contents{
  display:none;
  position:relative;
  background-image: url('../img/warning.png');
}

#layer_warning_contents{
  width: 837px;
  height: 390px;
  background-image:url('../img/warning.png');
  background-size:contain;
  position:relative;
}
#layer_warning_contents > button{
  position:absolute;
  text-indent:-9999em;
}
#layer_warning_contents > button#btn_close_warning{
  width:62px;height:62px;
  left:724px;
  top:30px;

}
#layer_warning_contents > button#btn_confirm_warning{
  width:133px;height:94px;
  left:450px;
  top:225px;
}


.btn_base_cate.active > .cate_character{
  animation: float 2s ease-in-out infinite;
}
.cata_sub_item.active{
  animation: float2 0.5s ease-in-out infinite;
}

@keyframes float {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-4px); }
  100% { transform: translateY(0); }
}
@keyframes float2 {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(4px); }
  100% { transform: translateY(0); }
}

#intro-title{
  position: absolute;
  width: 964px;
  height: auto;
  left: calc(50% - 964px/2);
  top: 100px;
}
#intro_char_ani_container{
  position: absolute;
  width: 652px;
  height: 573px;
  left: 638px;
  top: 393px;
}
#intro_char_ani{
    position: absolute;
    width: 652px;
    height: 573px;
    left: 0;
    top: 0;
    background-image: url('../img/intro/ship.png');
    background-size: contain;
    transform-origin: 50% 60%;
    /* animation: spin-ship 2s infinite linear; */
}
#intro_char_ani > img{
  position: absolute;
  top:0;
  left:0;
}
#intro_char_ani #ship-front{
  width: 719px;
  height: auto;
  left: auto;
  right: -44px;
  top: auto;
  bottom: -75px;
}
#intro_char_ani #boy-head{
    left: 141px;
    top: 50px;
    width: 183px;
    transform-origin: bottom center;
    /* animation: spin-boy-head 1.3s infinite linear; */
}
#intro_char_ani #girl-head{
    left: 372px;
    top: 104px;
    width: 196px;
    transform-origin: 40%  80%;
    /* animation: spin-girl-head 1.5s infinite linear; */
}
#intro_char_ani #girl-arm{
    left: 403px;
    top: 212px;
    width: 187px;
    transform-origin: 10%  40%;
    /* animation: spin-girl-arm 1.5s infinite linear; */
}
#intro_char_ani #cap-head{
    left: 225px;
    top: -5px;
    width: 277px;
    transform-origin: 50%  80%;
    /* animation: spin-cap-head 1.7s infinite linear; */
}
#intro_char_ani #cap-arm{
    left: 299px;
    top: 229px;
    width: 96px;
    transform-origin: 100%  20%;
    /* animation: spin-cap-arm 1.3s infinite linear; */
}
#intro_char_ani #cap-handle{
    left: 187px;
    top: 204px;
    width: 122px;
    transform-origin: 40%  80%;
    /* animation: spin-cap-handle 1s infinite linear; */
}

#intro_char_ani.active{
   animation: spin-ship 2s infinite linear;
}
#intro_char_ani.active #boy-head{
   animation: spin-boy-head 1.3s infinite linear;
}
#intro_char_ani.active #girl-head{
   animation: spin-girl-head 1.5s infinite linear;
}
#intro_char_ani.active #girl-arm{
   animation: spin-girl-arm 1.5s infinite linear;
}
#intro_char_ani.active #cap-head{
   animation: spin-cap-head 1.7s infinite linear;
}
#intro_char_ani.active #cap-arm{
   animation: spin-cap-arm 1.5s infinite linear;
}
#intro_char_ani.active #cap-handle{
   animation: spin-cap-handle 1.0s infinite linear;
}

@keyframes spin-ship {
    0%{transform:rotate(-15deg);}
    25%{transform:rotate(0deg);}
    50%{transform:rotate(10deg);}
    75%{transform:rotate(0deg);}
    100%{transform:rotate(-15deg);}
}

@keyframes spin-boy-head {
    0%{transform:rotate(-10deg);}
    25%{transform:rotate(0deg);}
    50%{transform:rotate(15deg);}
    75%{transform:rotate(0deg);}
    100%{transform:rotate(-10deg);}
}
@keyframes spin-girl-head {
    0%{transform:rotate(-10deg);}
    25%{transform:rotate(0deg);}
    50%{transform:rotate(15deg);}
    75%{transform:rotate(0deg);}
    100%{transform:rotate(-10deg);}
}
@keyframes spin-girl-arm {
    0%{transform:rotate(10deg);}
    25%{transform:rotate(0deg);}
    50%{transform:rotate(0deg);}
    75%{transform:rotate(0deg);}
    100%{transform:rotate(10deg);}
}
@keyframes spin-cap-head {
    0%{transform:rotate(10deg);}
    25%{transform:rotate(0deg);}
    50%{transform:rotate(-15deg);}
    75%{transform:rotate(0deg);}
    100%{transform:rotate(10deg);}
}
@keyframes spin-cap-arm {
    0%{transform:rotate(-10deg);}
    25%{transform:rotate(0deg);}
    50%{transform:rotate(15deg);}
    75%{transform:rotate(0deg);}
    100%{transform:rotate(-10deg);}
}
@keyframes spin-cap-handle {
    0%{transform:rotate(10deg);}
    25%{transform:rotate(0deg);}
    50%{transform:rotate(-10deg);}
    75%{transform:rotate(0deg);}
    100%{transform:rotate(10deg);}
}