@charset "UTF-8";

  /* -----움직이는로고----- */
  
  @keyframes -logo {
    0% {transform:translateY(10%) rotate(-5deg);}
    100% {transform:translateY(0) rotate(10deg);}
  }

  header .logo {
    margin:150px;
    width:300px;
    height:auto;
    filter:drop-shadow(5px 5px 5px rgba(36, 31, 31, 0.356));
    animation:-logo 2s 0.5s alternate infinite ease;
  }



/* -------시리즈소개 title------ */

  #top {
    display:flex;
    flex-direction: column;
    align-items: center;
    width:100%;
    height:1420px;
    background-color:#78BBDF;
  }
  .top_title {
    position: relative;
    width:1150px;
    height:380px;
  }
  .top_title h1 {
    display: inline-block;
    position: absolute;
    top:50px;
    left:150px;
    font-family: 'CookieRun-Regular';
    font-size:80px;
    font-weight:100;
    text-shadow:5px 2px 2px #4c97be;

  }
  .top_title .buzz1 {
    position:absolute;
    bottom:-10px;
    width:172px;
  }
  .top_title .woody1 {
    position:absolute;
    right:0px;
    bottom:-42px;
    width:330px;
  }
  .top_title .logobtn{
    position:absolute;
    right:270px;
    bottom:40px;
    display: flex;
    justify-content:space-between;
    width:675px;
    height:150px;
    }
  .top_title .logobtn button {
    width:150px;
    height:150px;
    border:none;
    border-radius:100%;
    cursor: pointer;
    opacity:0.5;
    filter:drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.356));
    position: relative;
  }
  .top_title .logobtn img {
    width:100%;
    height:100%;
    position: absolute;
    top: 0;
    left:0;
  }
  .active {
    position: absolute;
    top: -15px;
    opacity: 1!important;
  }

  .top_title .logobtn button:hover{
    transform:translateY(-15px);
    transition:all 1s ease;
    opacity:1;
  }


/* -------시리즈소개 box------ */
  #series2, #series3, #series4 {
    display:none;
  }

  .top_box_1 {
    display:flex;
    flex-wrap: nowrap;
    justify-content: space-evenly;
    align-items: center;
    width:1150px;
    height:380px;
    background-color: white;
    border-radius:50px 50px 0 0;
  }
  .top_box_1>img {
    width:200px;
    height:auto;
    box-shadow:5px 5px 2px rgba(0, 0, 0, 0.356);
  }
  .top_box_1text {
    width:680px;
    height:250px;
  }
  .top_box_1title h2 {
    font-family: 'CookieRun-Regular';
    font-weight:100;
    font-size:45px;
    margin-bottom:5%;
  }
  .top_box_1title h2>span {
    font-size:16px;
    color:#555;
  }
  .top_box_1text p{
    display:inline-block;
    line-height:40px;
    font-size:22px;
  }
  .top_box_1text p:nth-of-type(1){
    width:335px;
  }

  .top_box_2 {
    display:flex;
    justify-content: center;
    align-items: center;
    margin-top:20px;
    width:1150px;
    height:425px;
    border-radius:0 0 50px 50px;
    background:url(../img/series1.png) no-repeat;
    background-size:cover;
  }
  .top_box_2 img {
    width:100%;
  }
  .top_box_2 p {
    text-align: center;
    color: white;
    font-size:20px;
  }

/* ------poster------ */
  #middle {
    display: flex;
    flex-direction: column;
    justify-content:space-evenly;
    align-items: center;
    width:100%;
    height:690px;
    background-color:black;
  }

  h1 {
    font-family: 'CookieRun-Regular';
    font-weight:100;
    font-size:35px;
    color:white;
  }
  .middle_box {
    width:1150px;
    padding:20px;
  }
  .gellertlist>ul {
    display:flex;
    flex-wrap: wrap;
    align-items: center;
    flex-shrink: 1;
    justify-content:space-around;
    font-size: 0;
  }
  .gellertlist>ul li {
    display:inline-block;
    vertical-align:top;
    width:23%;
  }
  .gellertlist>ul li a {
    display:block;
    width:auto;
    text-decoration:none;
  }
  a .screen {
    position:relative;
    overflow: hidden;
  }
  .screen .poster_logo {
    position: absolute;
    bottom:150%;
    left:30px;
    z-index:2;
    width:180px;
    transition:all .5s;
  }
  .screen .poster_text {
    position:absolute;
    top:150%;
    left:50px;
    z-index:2;
    color:#fff;
    font-size:20px;
    text-align: center;
    transition:all .5s;
  }
  .poster_img {
    width:100%;
    height:350px;
  }
  ul>li>a:hover .poster_logo {bottom:52%;}
  ul>li>a:hover .poster_text {top:52%;}
  ul>li>a .screen::after {
    content:'';
    display:block;
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(0, 0, 0, 0.651);
    z-index:1;
    opacity:0;
    transition:all 0.5s;
  }
  ul>li>a:hover .screen::after {
    opacity:1;
  }

/* -----배너----- */
  #banner {
    width:100%;
    height:600px;
    background:url(../img/banner.jpg) fixed;
    background-position:center;
    background-size: cover;
  }

  /* -----이미지슬라이드----- */
  #bottom {
    display:flex;
    flex-direction: column;
    justify-content:space-evenly;
    align-items: center;
    width:100%;
    height:1150px;
    background:url(../img/bottomback.jpg)no-repeat;
    background-size:100%;
  }
  #bottom>h1 {
    color:black;
    font-size:55px;
  }
  #bottomslide {
    width:1150px;
    height:650px;
    position: relative;
    overflow: hidden;
  }
  .slide {
    width:5750px;
    display: flex;
  }
  .slide li {
    width:1150px;
    height:100%;
    float:left;
  }
  .slide li img {
    width:100%;
    height:100%;
  }
  .prev, .next {
    position: absolute;
    top:50%;
    display: block;
    font-size:38px;
    color:white;
    line-height:40px;
    background:black;
    height:50px;
    transform:translateY(-50%);
    cursor: pointer;
  }
  .prev:hover, .next:hover{
    background: rgba(255, 255, 255, 0.712);
    color:black;
  }
  .prev {
    left:0;
    border-radius: 0 10px 10px 0px;
    padding:7px 10px 0 5px;
    }
  .next {
    right:0;
    border-radius: 10px 0px 0px 10px;
    padding:7px 5px 0 10px;
  }