/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:0;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}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}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform: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}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px}[type="search"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}

html {
  font-size:50px;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "PingFang SC", "Noto Sans", "Noto Sans CJK SC", "Microsoft YaHei", 微软雅黑, sans-serif;
  font-size:0.5rem;
  background:#000;
}

ul,li {
  margin:0;
  padding:0;
  list-style-type: none;
}

#topnav {
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:70px;
  background:#000;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index:999;
}

#topnav ul {
  width:1340px;
  margin:0 50px;
  height:25px;
  display: flex;
  flex-direction: row;
}

#topnav ul li {
  margin-right:75px;
  position: relative;
}

#topnav ul li:after {
  content:"";
  background:url(../images/nav_line.svg) no-repeat;
  position: absolute;
  top:0;
  height:25px;
  width:25px;
  right:-50px;
}

#topnav ul li:last-child:after {
  display:none;
}

#topnav li a {
  display:block;
}

#topnav li.story a { background:url(../images/gsgg.svg) no-repeat; height:25px; width:107px; }
#topnav li.story.current a { background:url(../images/gsgg2.svg) no-repeat; }
#topnav li.character a { background:url(../images/jsjs.svg) no-repeat; height:25px; width:107px; }
#topnav li.character.current a { background:url(../images/jsjs2.svg) no-repeat; }
#topnav li.genga a { background:url(../images/yhxs.svg) no-repeat; height:25px; width:107px; }
#topnav li.genga.current a { background:url(../images/yhxs2.svg) no-repeat; }
#topnav li.effect a { background:url(../images/yxyx.svg) no-repeat; height:25px; width:107px; }
#topnav li.effect.current a { background:url(../images/yxyx2.svg) no-repeat; }
#topnav li.get a { background:url(../images/hqyx.svg) no-repeat; height:25px; width:107px; }
#topnav li.get.current a { background:url(../images/hqyx2.svg) no-repeat; }

/* SECTION GLOBAL */
.sct {
  background-size: cover;
  min-width:1600px;
  overflow:hidden;
}

/* SECTION 1 */
.sct-1 {
  height:1080px;
  background:url(../images/bg.jpg) no-repeat center center;
  overflow: hidden;
}

.sct-1 .mainarea {
  width:1440px;
  height:100%;
  margin:0 auto;
  position: relative;
}

.sct-1 .intro {
  width:1506px;
  height:1506px;
  position: absolute;
  right:-612px;
  top:-460px;
}

.sct-1 .nexttit {
  position: absolute;
  width:907px;
  left:-95px;
  bottom:-551px;
}

/* SECTION 2 */
.sct-2 {
  height:550px;
  background:url(../images/story_bg.jpg) no-repeat top center;
  background-size: cover;
  overflow-x: hidden;
}

.sct-2 .mainarea {
  width:1440px;
  height:100%;
  margin:0 auto;
  position: relative;
}

.sct-2 .intro {
  position: absolute;
  bottom:0;
  width:907px;
  left:-95px;
}

.sct-2 .nexttit {
  width:798;
  height:798px;
  position: absolute;
  bottom:-553px;
  right:-478px;
  mix-blend-mode: overlay;
}

/* SECTION 3 */
.sct-3 {
  height:985px;
  overflow: hidden;
}

.sct-3 input { display:none; }

.sct-3 .mainarea {
  width:1600px;
  height:100%;
  margin:0 auto;
  position: relative;
  background:url(../images/chara_line.svg) no-repeat;
}

.sct-3 .title {
  width:798px;
  height:798px;
  background:url(../images/chara_title.svg) no-repeat;
  background-size: 100% 100%;
  position: absolute;
  right:-398px;
  top:-245px;
}

.sct-3 .nav {
  width:58px;
  height:300px;
  background:url(../images/chara_nav.svg) no-repeat;
  background-size: 100% 100%;
  margin-top:276px;
  margin-left:196px;
  position: absolute;
  z-index:2;
}

.sct-3 .nav label {
  width:42px;
  height:42px;
  background-size:100% 100%;
  position: absolute;
  left:8px;
  cursor: pointer;
  opacity: 0;
  transition:opacity 0.3s ease;
}

.sct-3 .nav .chlabel-1 { margin-top:12px; background:url(../images/chara_1.svg); }
.sct-3 .nav .chlabel-2 { top:59px; background:url(../images/chara_2.svg); }
.sct-3 .nav .chlabel-3 { top:106px; background:url(../images/chara_3.svg); }
.sct-3 .nav .chlabel-4 { top:152px; background:url(../images/chara_4.svg); }
.sct-3 .nav .chlabel-5 { top:199px; background:url(../images/chara_5.svg); }
.sct-3 .nav .chlabel-6 { top:246px; background:url(../images/chara_6.svg); }

.sct-3 .chbox {
  position: absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  opacity:0;
  transition:opacity 0.3s ease;
}

.sct-3 .chbox img {
  position: absolute;
  top:0;
  left:0;
  transition:transform 0.5s ease;
}

.sct-3 .chbox .chimg { transform:translateX(-40px); }
.sct-3 .chbox .chtxt { transform:translateX(-80px); }

#chset-1:checked~.title .chlabel-1,
#chset-2:checked~.title .chlabel-2,
#chset-3:checked~.title .chlabel-3,
#chset-4:checked~.title .chlabel-4,
#chset-5:checked~.title .chlabel-5,
#chset-6:checked~.title .chlabel-6,
#chset-1:checked~.chbox-1,
#chset-2:checked~.chbox-2,
#chset-3:checked~.chbox-3,
#chset-4:checked~.chbox-4,
#chset-5:checked~.chbox-5,
#chset-6:checked~.chbox-6 { opacity:1; }

#chset-1:checked~.chbox-1 .chimg, #chset-1:checked~.chbox-1 .chtxt,
#chset-2:checked~.chbox-2 .chimg, #chset-2:checked~.chbox-2 .chtxt,
#chset-3:checked~.chbox-3 .chimg, #chset-3:checked~.chbox-3 .chtxt,
#chset-4:checked~.chbox-4 .chimg, #chset-4:checked~.chbox-4 .chtxt,
#chset-5:checked~.chbox-5 .chimg, #chset-5:checked~.chbox-5 .chtxt,
#chset-6:checked~.chbox-6 .chimg, #chset-6:checked~.chbox-6 .chtxt { z-index:1; transform:translateX(0); }

.sct-3 .nexttit {
  width:798px;
  height:798px;
  background:url(../images/illus_title.svg) no-repeat;
  background-size:100% 100%;
  position: absolute;
  left:-373px;
  bottom:-589px;
}

/* SECTION 4 */
.sct-4 {
  height: 920px;
  position: relative;
}

.sct-4:after {
  content:"";
  position:absolute;
  bottom:0;
  width:100%;
  height:189px;
  background-image:linear-gradient(rgba(0,0,0,0), rgba(0,0,0,1));
}

.sct-4 input { display: none; }

.sct-4 .mainarea {
  width:1440px;
  height:100%;
  margin:0 auto;
  position: relative;
}

.sct-4 .title {
  width:798px;
  height:798px;
  background:url(../images/illus_title.svg) no-repeat;
  background-size: 100% 100%;
  position: absolute;
  left:-453px;
  top:-209px;
  z-index:2;
}

.sct-4 .title label {
  width:82px;
  height:82px;
  background-size:100% 100%;
  position: absolute;
  cursor: pointer;
  opacity:0;
  transition: opacity 0.1s ease;
}

.sct-4 .title .pictype-1 {
  background:url(../images/btn_cg.svg) no-repeat;
  top:314px;
  left:614px;
}

.sct-4 .title .pictype-2 {
  background:url(../images/btn_bg.svg) no-repeat;
  top:402px;
  left:614px;
}

.sct-4 input.pscg:checked~.title .pictype-1,
.sct-4 input.psbg:checked~.title .pictype-2 {
  opacity:1;
}

.sct-4 .picbox {
  display:flex;
  justify-content: center;
}

.sct-4 .bgpic,
.sct-4 .cgpic {
  position: absolute;
  left:50%;
  transform:translateX(-50%);
  top:20px;
  opacity:0;
  transition:opacity 0.3s ease;
}

.sct-4 .picnav .icon {
  position: absolute;
  background-size:100% 100%;
  bottom:100px;
  z-index:2;
}

.sct-4 .picnav .icon.slash { background:url(../images/illus_nav_line.svg) no-repeat; width:20px; height:20px; left:720px; }
.sct-4 .picnav .icon.cg { background:url(../images/CG_nav.svg) no-repeat; width:28px; height:16px; left:670px; }
.sct-4 .picnav .icon.bg { background:url(../images/BG_nav.svg) no-repeat; width:29px; height:16px; left:760px; }

.sct-4 .picnav label {
  bottom:100px;
  position: absolute;
  width:20px;
  height:20px;
  background:url(../images/illus_nav.svg) no-repeat top center;
  background-size:100% 100%;
  cursor: pointer;
  z-index:4;
}

.sct-4 .piclabel-1 { left:277px; }
.sct-4 .piclabel-2 { left:312px; }
.sct-4 .piclabel-3 { left:347px; }
.sct-4 .piclabel-4 { left:382px; }
.sct-4 .piclabel-5 { left:417px; }
.sct-4 .piclabel-6 { left:452px; }
.sct-4 .piclabel-7 { left:487px; }
.sct-4 .piclabel-8 { left:522px; }
.sct-4 .piclabel-9 { left:557px; }
.sct-4 .piclabel-10 { left:592px; }
.sct-4 .piclabel-11 { left:627px; }

.sct-4 .piclabel-12 { left:814px; }
.sct-4 .piclabel-13 { left:849px; }
.sct-4 .piclabel-14 { left:884px; }
.sct-4 .piclabel-15 { left:919px; }
.sct-4 .piclabel-16 { left:954px; }
.sct-4 .piclabel-17 { left:989px; }
.sct-4 .piclabel-18 { left:1024px; }
.sct-4 .piclabel-19 { left:1059px; }
.sct-4 .piclabel-20 { left:1094px; }
.sct-4 .piclabel-21 { left:1129px; }
.sct-4 .piclabel-22 { left:1164px; }

#picset-1:checked~.pic-1,
#picset-2:checked~.pic-2,
#picset-3:checked~.pic-3,
#picset-4:checked~.pic-4,
#picset-5:checked~.pic-5,
#picset-6:checked~.pic-6,
#picset-7:checked~.pic-7,
#picset-8:checked~.pic-8,
#picset-9:checked~.pic-9,
#picset-10:checked~.pic-10,
#picset-11:checked~.pic-11,
#picset-12:checked~.pic-12,
#picset-13:checked~.pic-13,
#picset-14:checked~.pic-14,
#picset-15:checked~.pic-15,
#picset-16:checked~.pic-16,
#picset-17:checked~.pic-17,
#picset-18:checked~.pic-18,
#picset-19:checked~.pic-19,
#picset-20:checked~.pic-20,
#picset-21:checked~.pic-21,
#picset-22:checked~.pic-22 { opacity:1; }

#picset-1:checked~.picnav .piclabel-1,
#picset-2:checked~.picnav .piclabel-2,
#picset-3:checked~.picnav .piclabel-3,
#picset-4:checked~.picnav .piclabel-4,
#picset-5:checked~.picnav .piclabel-5,
#picset-6:checked~.picnav .piclabel-6,
#picset-7:checked~.picnav .piclabel-7,
#picset-8:checked~.picnav .piclabel-8,
#picset-9:checked~.picnav .piclabel-9,
#picset-10:checked~.picnav .piclabel-10,
#picset-11:checked~.picnav .piclabel-11,
#picset-12:checked~.picnav .piclabel-12,
#picset-13:checked~.picnav .piclabel-13,
#picset-14:checked~.picnav .piclabel-14,
#picset-15:checked~.picnav .piclabel-15,
#picset-16:checked~.picnav .piclabel-16,
#picset-17:checked~.picnav .piclabel-17,
#picset-18:checked~.picnav .piclabel-18,
#picset-19:checked~.picnav .piclabel-19,
#picset-20:checked~.picnav .piclabel-20,
#picset-21:checked~.picnav .piclabel-21,
#picset-22:checked~.picnav .piclabel-22 { background-image:url(../images/illus_nav2.svg); }

.sct-4 .nexttit {
  width:798px;
  height:798px;
  background:url(../images/video_title.svg) no-repeat;
  background-size:100% 100%;
  position: absolute;
  right:-455px;
  bottom:-677px;
  z-index:3;
}

/* SECTION 5 */
.sct-5 {
  height: 810px;
  position: relative;
}

.sct-5:before {
  content:"";
  position:absolute;
  top:0;
  width:100%;
  height:50%;
  background-image:linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0));
  z-index:1;
}

.sct-5:after {
  content:"";
  position:absolute;
  bottom:0;
  width:100%;
  height:50%;
  background-image:linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.8));
}

.sct-5  input { display: none; }

.sct-5 .mainarea {
  width:1440px;
  height:100%;
  margin:0 auto;
  position: relative;
}

.sct-5 .title {
  width:798px;
  height:798px;
  background:url(../images/video_title.svg) no-repeat;
  background-size: 100% 100%;
  position: absolute;
  right:-455px;
  top:-121px;
  z-index:2;
}

.sct-5 .title label {
  width:60px;
  height:60px;
  background-size:100% 100%;
  position: absolute;
  cursor: pointer;
  transition: opacity 0.1s ease;
  opacity:0;
}

.sct-5 .title .vidlabel-1 { background:url(../images/video_1.svg) no-repeat; left:130px; top:303px; }
.sct-5 .title .vidlabel-2 { background:url(../images/video_2.svg) no-repeat; left:130px; top:370px; }
.sct-5 .title .vidlabel-3 { background:url(../images/video_3.svg) no-repeat; left:130px; top:437px; }

.sct-5 video {
  position: absolute;
  top:0;
  left:0;
  width:100%;
  opacity:0;
  transition:opacity 0.3s ease;
}

#vidset-1:checked~.title .vidlabel-1,
#vidset-2:checked~.title .vidlabel-2,
#vidset-3:checked~.title .vidlabel-3,
#vidset-1:checked~#video-1,
#vidset-2:checked~#video-2,
#vidset-3:checked~#video-3 { opacity:1; }

.sct-5 .videocopy {
  width:818px;
  height:49px;
  position: absolute;
  bottom:19px;
  left:39px;
  z-index:5;
}

/* SECTION 6 */
.sct-6 {
  background:url(../images/shop_bg.svg) no-repeat top center;
  background-size:100% 100%;
  position: relative;
  background-size: cover;
}

.sct-6:before {
  content:"";
  position:absolute;
  top:0;
  left:50%;
  transform:translateX(-50%);
  width:800px;
  height:260px;
  background-image:linear-gradient(rgba(0,0,0,1), rgba(0,0,0,0));
}

.sct-6 .title {
  position: absolute;
  width:90px;
  height:364px;
  background:url(../images/shop_title.svg) no-repeat;
  background-size:100% 100%;
  top:113px;
  left:39px;
}

.sct-6 .mainarea {
  width:1440px;
  margin:0 auto;
  position: relative;
}

.sct-6 .prod-1 {
  height:504px;
  position: relative;
  overflow:hidden;
}

.sct-6 .shopbtn {
  display: block;
  position: absolute;
  left:154px;
  top:163px;
  width:264px;
  height:264px;
  background:url(../images/shop_btn.svg) no-repeat;
  background-size: 100% 100%;
  transition:background 0.1s ease;
}

.sct-6 .shopbtn:hover { background-image: url(../images/shop_btn2.svg); }

.sct-6 .shopimg-1 {
  width:436px;
  height:276px;
  position: absolute;
  left:50%;
  transform:translateX(-52%);
  top:145px;
}

.sct-6 .price {
  width:206px;
  height:95px;
  position: absolute;
  left:940px;
  top:320px;
}

.sct-6 .cngallogo {
  width:154px;
  height:140px;
  position: absolute;
  right:39px;
  top:142px;
}

.sct-6 .shopcopy-1 {
  width:670px;
  height:33px;
  position: absolute;
  left:50%;
  transform:translateX(-50%);
  top:452px;
}

.sct-6 .shopdetails-1 {
  display: block;
  position: absolute;
  width:285px;
  height:23px;
  top:462px;
  left:710px;
  background:url(../images/shop_link1_1.svg) no-repeat;
  background-size:100% 100%;
  transition:background 0.1s ease;
}

.sct-6 .shopdetails-1:hover { background-image: url(../images/shop_link1_2.svg); }

.sct-6 .prod-2 {
  text-align: center;
}

.sct-6 .prod-2 .goodstext {
  margin-top:50px;
  height:1200px;
}

.sct-6 .prod-3 {
  height:120px;
  position: relative;
}

.sct-6 .coming {
  position: absolute;
  top:32px;
  left:410px;
  width:394px;
  height:33px;
}

.sct-6 .shopdetails-2 {
  position: absolute;
  width:213px;
  height:23px;
  left:825px;
  top:39px;
  background:url(../images/shop_link2_1.svg) no-repeat;
  background-size:100% 100%;
  transition:background 0.1s ease;
}

.sct-6 .shopdetails-2:hover {
  background-image: url(../images/shop_link2_2.svg);
}

.sct-6 .footer {
  background:#000;
  height:70px;
  bottom:0;
  width:100%;
  position: relative;
}

.sct-6 .copyright {
  position: absolute;
  width:365px;
  height:13px;
  left:50%;
  top:30px;
  transform: translateX(-50%);
}