*,*:after,*:before{margin:0;padding:0;box-sizing:inherit}body,html{height:100%}html{font-size:16px}body{line-height:1;font-size:16px;font-family:Arial, Helvetica;font-smoothing:antialiased;text-rendering:optimizeLegibility;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;text-size-adjust:none;}body.no-touch{overflow:visible}h1,h2,h3,h4,h5,h6{margin:0}ol li,ul li{list-style:none}a{text-decoration:none}img{max-width:100%}#main{width:100%;height:100%}.section{position:relative;width:100%;height:100%;padding:16px;box-sizing:border-box;overflow:hidden;display:table}.container{display:table-cell;vertical-align:middle;text-align:center}.container a{color:#FFF}.slide-navigation{position:fixed;top:50%;bottom:0;right:32px;text-align:center}.slide-navigation>li{position:relative;display:block;margin-bottom:12px}.slide-navigation>li>a{display:block;height:13px;width:13px;border:3px solid #FFF;border-radius:50%;background:transparent;z-index:1;-webkit-transition:all 0.4s ease;transition:all 0.4s ease}.slide-navigation>li>a.is-active{background:#FFF}

body{background: #F7323F}

.single-content-area,.single-content-area-exhibit,.single-content,.photo-alumb-wrap{transition: all .8s cubic-bezier(0.65, 0, 0.35, 1);}
.popup-outter,.popup-wrap,.logo,header{transition: all 1.4s cubic-bezier(0.65, 0, 0.35, 1);}

#main{opacity: 0}

/* popup */
.popup-wrap{position: fixed;width: 100vw;height: 100vh;background: rgba(0,0,0,.8);top:0;left: 0;z-index: 999;transform: translateY(100%);opacity: 0}
.popup-wrap.active{transform: translateY(0%);opacity:1}
.popup-inner{padding: 60px;width: 40vw;position: absolute;transform: translate(-50%,-50%);left: 50%;top:50%}
.more-btn{position: relative;padding: 4px 20px;background: #F79421;margin-right: 20px;border-radius:  20px;cursor: pointer
}
.more-btn {color: #000 }


/* header */

.logo{position: fixed;left: 30px;top:30px;width: 240px;z-index: 99;transform: translateY(-200%)}
.logo.active{transform: translateY(0)}
.menu-list li{ float: left;margin:0 15px  }
.menu-list li h4{line-height: 1;font-weight: bold}
header{position: fixed;bottom:0;left: 0;padding:15px 20px;z-index: 97;width: 100%;background: #FFF}
.menu-list li{cursor: pointer}
.close-btn{position: fixed;right: 30px;top:30px;width: 30px;height: 30px;background: url(img/close-btn.svg) center center no-repeat ;background-size: 70%;border-radius: 100%;border: 3px solid #FFF ;z-index: 99;cursor: pointer}
.ss-list{position: absolute;right: 120px;bottom: 6px}
.ss-list li{float: left;margin-right: 15px;position: relative}
.ss-list li span{width: 30px;height: 30px;background: #F79421;position: relative;display: inline-block;border-radius: 100%}
.ss-list li:nth-child(1) span{background: #F79421 url(img/btn_wb.svg) center center no-repeat;background-size: 30px;}
.ss-list li:nth-child(2) span{background: #F79421 url(img/btn_fb.svg) center center no-repeat;background-size: 30px;}
.ss-list li:nth-child(3) span{background: #F79421 url(img/btn_ig.svg) center center no-repeat;background-size: 30px;}

.pan-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: opacity 0.4s cubic-bezier(0.65, 0, 0.35, 1);

}

.tran-wrapper,.landing-wrapper{position: fixed;width: 100%;height: 100%;top:0;left: 0;  transform: scale(2); transition: all 4s cubic-bezier(0.65, 0, 0.35, 1);opacity: 0;pointer-events: none}
.active.tran-wrapper,.landing-wrapper.active{ transform: scale(1);opacity: 1;pointer-events: auto}

.pan-wrapper.active{opacity: 1}
.menu-btn{display: none}

@media screen and (min-aspect-ratio: 1920/1281) {
  .image-wrapper {
    width: 180vw;
    height: calc(180vw * 1281 / 1920);
  }
}
@media screen and (max-aspect-ratio: 1920/1281) {
  .image-wrapper {
    height: 180vw;
    width: calc(180vh * 1920 / 1281);
  }
}

.landing-inner{position: relative;width: 100%;height: 100vh}

.lockup1,.lockup2,.lockup3{position: absolute;bottom: 100px;transition: all 4s linear;}
.landing-logo-1,.landing-logo-2,.landing-logo-3{position: absolute;bottom: 6vw;transition: all 4s linear;height: 78vh}
.lockup1{width: calc(33.333% - 30px);float: left;left: 30px}
.lockup2{width: calc(33.333% - 30px);float: left;left: calc(33.33% + 15px)}
.lockup3{width: calc(33.333% - 30px);float: left;left: 66.66%}
.landing-logo-1{width:calc(33.333% - 30px);float: left;left:30px}
.landing-logo-2{width: calc(33.333% - 30px);float: left;left: calc(33.33% + 15px)}
.landing-logo-3{width: calc(33.333% - 30px);float: left;left: 66.66%}

.avg{
  width: 200px;
  height: 200px;
  background-color: coral;
  animation: squareToCircle 2s 1s infinite alternate;
}

@-webkit-keyframes squareToCircle {
    0% {
      border-radius: 0 0 0 0;
      background: coral;
      transform: rotate(0deg);
    }
    25% {
      border-radius: 50% 0 0 0;
      background: darksalmon;
      transform: rotate(45deg);
    }
    50% {
      border-radius: 50% 50% 0 0;
      background: indianred;
      transform: rotate(90deg);
    }
    75% {
      border-radius: 50% 50% 50% 0;
      background: lightcoral;
      transform: rotate(135deg);
    }
    100% {
      border-radius: 50% 50% 50% 50%;
      background: darksalmon;
      transform: rotate(180deg);
    }
}
/* landing */


.single-block-inner{position: relative;width: 24vw;height: 30vw}
.single-block-inner img{margin: 0 auto;position: absolute;bottom: 3vw;max-width: none !important;}
.single-block path {fill:#F79421 !important}
.icon-ball{position: absolute;width: 5.5vw;height: 5.5vw;background: #FFF;top:6.5vw;left: -2vw;border-radius: 100%;z-index: 9}
.single-block h4,.photo-block h4{text-align: center;margin-top: 10px;font-weight: bold;position: absolute;top: 27vw;width: 100%;font-size: 1.1em}
.single-block-gra{width: 100%;height: 20vw;position: absolute;bottom:3vw;z-index: -1;overflow: hidden}
.single-block-gra1{width: 70%;height: 17.5vw;background: #FFF;position: absolute;top:23%;z-index: -2;left:15%}
.single-block-gra2{width: 100%;height: 17.3vw;background: #FFF;position: absolute;bottom:3vw;z-index: -1;overflow: hidden}
.side-item{position: absolute;;top:0;left: 0;width: 60px}
.side-item-1{top:57%;left: 6%;width: 24vw}
.side-item-2{top:24%;left: 33%;width: 18vw}
.side-item-3{top:68%;left: 41%;width: 8vw}
.side-item-4{top:40%;left: 60%;width: 16vw}
.side-item-5{top:12%;left: 28%;width: 12vw}
.side-item-6{top:12%;left: 76%;width: 20vw}
.side-item-7{top:60%;left: 76%;width: 8vw}

.lang-btn {background: #333;position: absolute;right: 40px;height: 100%;width: 60px;top:0;text-align: center}
.lang-btn h5{color: #F79421;line-height: 40px}

.single-block-loc-1{width: 24vw;height: 30vw;z-index: 9;position: absolute;top:calc(30% - 10vw);left: calc(16% - 10vw);}
.single-block-loc-2{width: 24vw;height: 30vw;z-index: 9;position: absolute;top:calc(18.5% - 10vw);left: calc(61.5% - 10vw);}
.single-block-loc-3{width: 24vw;height: 30vw;z-index: 9;position: absolute;top:calc(37% - 10vw);right: calc(18% - 10vw);}
.single-block-loc-4{width: 24vw;height: 30vw;z-index: 9;position: absolute;top:calc(43% - 10vw);left: calc(47% - 10vw);}
.single-block-loc-5{width: 24vw;height: 30vw;z-index: 9;position: absolute;top:calc(64% - 10vw);left: calc(27.5% - 10vw);}
.single-block-loc-6{width: 24vw;height: 30vw;z-index: 9;position: absolute;top:calc(68% - 10vw);right: calc(36.5% - 10vw);}
.single-block-loc-7{width: 24vw;height: 30vw;z-index: 9;position: absolute;top:calc(74% - 10vw);right: calc(12.5% - 10vw);}

/* single */

.single-content,.single-exhibit{position: fixed;top:0;width: 100%;height: 100%;background: rgba(255,255,255,.9);z-index: 98;opacity: 0;pointer-events: none;transition: all .8s cubic-bezier(0.65, 0, 0.35, 1);pointer-events: none }
.single-content.active,.single-exhibit.active{opacity: 1;pointer-events: auto}
.single-content-area,.single-content-area-exhibit{width: calc(50% - 60px);position: absolute;right: 0;top:0;height: calc(100% - 60px);background: #333;z-index: 9;transform: translateX(100%);padding: 30px  ;overflow-x: hidden;overflow-y: scroll}


.single-content-area.active,.single-content-area-exhibit.active{transform: translateX(0%)}
.single-content-area-exhibit.open{width: calc( 100% - 60px)}
.single-content-area-exhibit.open .photo-thum-list{display: none}
.single-exhibit .close-btn{display: none}
.single-exhibit.open .close-btn{display: block}

.tag-icon{width: 90px;height: 90px;background: #333;margin-bottom: 20px}
.single-title-wrap{position: absolute;left: 30px;top:150px;width: 40%}
.single-ill-wrap{position: absolute;left: 30px;bottom: 0;width: 22%;pointer-events: none}
.youtube-player{width: 100%;height: 22vw;margin-bottom: 40px}
.single-ill-wrap .single-block-gra{bottom: 0;height: 19vw}
.back-btn{width: 40px;height: 40px;background: #333;border-radius: 100%;position: relative}
.back-btn img{position: absolute;top:50%;left: 50%;transform: translate(-50%,-50%);width: 60%}

.single-ill-wrap h4,.single-ill-wrap .single-block-gra1,.single-ill-wrap .single-block-gra2,.single-ill-wrap .icon-ball{display: none}
.content-block-wrap{margin-bottom: 60px}
.content-block-wrap iframe{width: 100%}
.content-block-wrap p{margin-bottom: 10px}
.content-block-wrap p.margin-20-bottom{margin-bottom: 20px}
.intro-wrap{padding: 2px 10px;background: #FFF;border-radius: 18px;display: inline-block;margin-bottom: 20px}
.cha-list li{margin-bottom: 10px;position: relative}
.cha-icon{width: 50px;height: 50px;background: #FFF;border-radius: 100%}
.cha-list li p{position: absolute;left: 70px;top:10px}
.single-content-icon{width: 80px;height: 80px;background: #333;margin-bottom: 20px;border-radius: 100%}
.storybook-wrap img{border: 2px solid #FFF}

.sc1{background: #FFF url(img/ssw_character/ssw_character-01.png) center center no-repeat;background-size: contain}
.sc2{background: #FFF url(img/ssw_character/ssw_character-02.png) center center no-repeat;background-size: contain}
.sc3{background: #FFF url(img/ssw_character/ssw_character-03.png) center center no-repeat;background-size: contain}
.sc4{background: #FFF url(img/ssw_character/ssw_character-04.png) center center no-repeat;background-size: contain}
.sc5{background: #FFF url(img/ssw_character/ssw_character-05.png) center center no-repeat;background-size: contain}
.sc6{background: #FFF url(img/ssw_character/ssw_character-06.png) center center no-repeat;background-size: contain}
.sc7{background: #FFF url(img/ssw_character/ssw_character-07.png) center center no-repeat;background-size: contain}
.sc8{background: #FFF url(img/ssw_character/ssw_character-08.png) center center no-repeat;background-size: contain}

/* about */
.popup-about{position: fixed;width: 100vw;height: 100vh;background: rgba(255,255,255,.95);top:0;left: 0;z-index: 96;transform: translateY(100%);opacity: 0}
.popup-about.active{transform: translateY(0%);opacity:1}
.popup-about .popup-inner{padding: 30px;width: 50%;position: absolute;right: 0;top:0;transform: translate(0);height: calc(100% - 60px);overflow: scroll;left: auto}
.how-to-use-list>li{padding: 5px 0;margin-bottom: 20px}
.about-icon{position: absolute;left: 60px;bottom: 60px;width: 10vw}
.sub-list li p{color: #333;}
.sub-list li {list-style: disc;margin-left: 16px;border-bottom: 0}
.popup-about .close-btn{background: url(img/close-btn-b.svg) center center no-repeat ;background-size: 70%;border: 3px solid #000 }

/* resources */
.popup-resources{position: fixed;width: 100vw;height: 100vh;background: rgba(99,99,99,.95);top:0;left: 0;z-index: 96;transform: translateY(100%);opacity: 0}
.popup-resources.active{transform: translateY(0%);opacity:1}
.popup-resources .popup-inner{padding:120px 30px;width: 100%;position: absolute;left: 0;top:0;transform: translate(0);height: calc(100% - 240px);overflow: scroll;left: auto;padding-top:120px}
.popup-resources .popup-inner .right-block{width: 50%;padding:0 60px;float: right}
.popup-resources .popup-inner .left-block{width:40%;position: absolute;left: 30px;top:120px}


/* contact */
.popup-contact{position: fixed;width: 100vw;height: 100vh;background: rgba(247,148,33,.95);top:0;left: 0;z-index: 96;transform: translateY(100%);opacity: 0}
.popup-contact.active{transform: translateY(0%);opacity:1}
.popup-contact .popup-inner{padding: 30px;width: 58%;position: absolute;right: 50%;top:50%;}

/* exhibition */
.photo-thum-list{overflow: hidden}
.photo-thum-list li{width: calc(50% - 60px);float: left;margin-bottom: 20px;padding-right: 60px}
.photo-thum{width: 100%;height: 12vw;background: #333;margin-bottom: 20px}
.photo-alumb-wrap{position: absolute;width: 100%;height: 100%;top:0;left: 0;opacity: 0;pointer-events: none;top:0}
.photo-alumb-wrap.active{opacity: 1;pointer-events: auto}

.flexslider{border: none;margin-bottom: 0 !important;background: none}
.flexslider-wrap{position: relative;cursor: pointer;width: 80%;top:50%;transform: translateY(-50%);margin: 0 auto}

.flex-control-nav{display: none}
.flex-direction-nav a{font-size: 1px;width: 40px;height: 40px;background: #FFF;border-radius: 100%;border: 1px  solid #A22237}
.flex-direction-nav .flex-next{right: -20px !important;background: #FFF  url(../images/btn_next.svg) center center no-repeat;background-size: 30px}
.flex-direction-nav .flex-next:hover{background: #A22237  url(../images/btn_next_r.svg) center center no-repeat;background-size: 30px}
.flex-direction-nav .flex-prev{left: -20px !important;background: #FFF  url(../images/btn_prev.svg) center center no-repeat;background-size: 30px}
.flex-direction-nav .flex-prev:hover{background: #A22237  url(../images/btn_prev_r.svg) center center no-repeat;background-size: 30px}

.flex-direction-nav .flex-next,.flex-direction-nav .flex-prev{opacity: 1 !important;z-index: 9}

.photo-slides{margin-top: 120px;margin-bottom: 60px}
.photo-slides li{margin-bottom: 40px;text-align: center}
.photo-slides li .flex-inner-image{position: relative;margin: 0 auto}
.photo-slides li p{width: 60% !important;position: relative;margin: 0 auto;margin-top: 10px ;}
.photo-thum-list{width: 50vw;}

/* resource */
.break-line{width: 100%;height: 3px ;background: #FFF;border-radius: 3px;margin: 20px 0}
.down-mat{overflow: hidden;margin-top: 10px;margin-bottom: 40px}
.down-mat li{width: 30%;float: left;margin-right: 3%;overflow: hidden}
.down-mat .cover-re{width: 100%;height: 18vw;background: #EEE;border-radius: 10px}