@keyframes scrollbar { 0% { height: 0; }
  15% { height: 0; }
  30% { height: 0; }
  75% { height: 100%; }
  100% { height: 100%; } }
@keyframes scrollbar2 { 0% { height: 100%; }
  15% { height: 0%; }
  50% { height: 0%; }
  100% { height: 0%; } }
@keyframes extend { 0% { transform: scaleY(0); }
  100% { transform: scaleY(1); } }
@keyframes hidden { 0% { transform: scaleY(1); }
  100% { transform: scaleY(0); } }
#container01 { background-color: #f8f8f8; height: 100vh; /*NEW_TOPICS Slider*/ }
#container01 .flickity-enabled { position: relative; }
#container01 .flickity-enabled:focus { outline: none; }
#container01 .flickity-enabled .flickity-viewport { overflow: hidden; position: relative; height: 100%; }
#container01 .flickity-enabled .flickity-viewport .flickity-slider { position: absolute; width: 100%; height: 100%; }
#container01 .flickity-enabled .flickity-viewport .flickity-slider li { width: 100%; }
#container01 .flickity-enabled .flickity-button { position: absolute; top: 50%; border: none; }
#container01 .flickity-enabled .flickity-button svg { display: none; }

#container02 .works_pickup::after { content: ""; display: block; background: url("../images/top/works_figure_frame.png"); background-size: 100% auto; position: absolute; left: 0; z-index: 2; }
#container02 .worksimg_wrap { position: relative; overflow: hidden; text-align: left; z-index: 1; }
#container02 .worksimg_wrap img { position: absolute; top: 0; left: 0; }

@media screen and (min-width: 568px) { #container01 .main_catch { width: 526.5px; position: absolute; left: 5%; bottom: 190px; z-index: 1; }
  #container01 .sub_catch { width: 457.5px; position: absolute; left: 5.5%; bottom: 140px; z-index: 1; }
  #container01 figure { width: 45.34375%; min-width: 725.5px; position: absolute; right: 6.84375%; top: 145px; z-index: 0; }
  #container01 .newtopics { position: absolute; left: 0; bottom: 0; padding: 22.5px 100px 22.5px 40px; width: 1000px; line-height: 1; display: flex; }
  #container01 .newtopics h3 { width: 80.5px; margin-right: 39.5px; }
  #container01 .newtopics ul { width: 740px; }
  #container01 .newtopics ul dl { display: flex; }
  #container01 .newtopics ul dl dt { margin-right: 15px; padding-right: 15px; position: relative; }
  #container01 .newtopics ul dl dt::after { content: ""; width: 1px; display: block; background: #fff; position: absolute; bottom: 0; top: 0; right: 0; }
  #container01 .newtopics .flickity-prev-next-button { width: 11.5px; height: 18px; margin-top: -9px; }
  #container01 .newtopics .flickity-prev-next-button:hover { opacity: 0.5; }
  #container01 .newtopics .flickity-prev-next-button.previous { right: -36.5px; background: url("../images/top/newtopics_prev.png") no-repeat; background-size: 11.5px auto; }
  #container01 .newtopics .flickity-prev-next-button.next { right: -78px; background: url("../images/top/newtopics_next.png") no-repeat; background-size: 11.5px auto; }
  #container02 { padding: 11.469vw 0 11.688vw; display: flex; }
  #container02 .works_pickup::after { width: 64.813vw; min-width: 764.788px; height: 42.281vw; min-height: 498.919px; top: 9.375vw; }
  #container02 .worksimg_wrap { width: 63.813vw; min-width: 752.988px; height: 35.625vw; min-height: 420.375px; }
  #container02 .txt_container { width: 36.188vw; min-width: 427.013px; padding-top: 15.875vw; }
  #container02 .txt_container h2, #container02 .txt_container p, #container02 .txt_container div { width: 300px; margin: 0 auto; }
  #container02 .txt_container h2 { padding-right: 53.5px; }
  #container02 .txt_container p { padding: 37.5px 0; }
  #container03 figure { width: 712.5px; position: absolute; left: 50%; margin-left: -42.5px; top: 150px; }
  #container03 .inner { padding: 150px 0 150px 40px; }
  #container03 .inner h2 { width: 418.5px; }
  #container03 .inner p { width: 550px; padding: 50px 0 85px; } }
@media screen and (max-width: 567px) { #container01 .main_catch { width: 75.5vw; position: absolute; left: 5%; bottom: 43vw; z-index: 1; }
  #container01 .sub_catch { width: 74.4vw; position: absolute; left: 5.5%; bottom: 35vw; z-index: 1; }
  #container01 figure { width: 87vw; position: absolute; right: 8vw; top: 50%; margin-top: -58vw; z-index: 0; }
  #container01 .newtopics { position: absolute; left: 0; bottom: 0; padding: 4vw; width: 81.2vw; height: 15vw; }
  #container01 .newtopics h3 { display: none; }
  #container01 .newtopics ul dl { font-size: 2.8vw; line-height: 1.2; }
  #container01 .newtopics ul dl dt { width: 19.5vw; float: left; font-weight: bold; position: relative; margin-right: 2vw; }
  #container01 .newtopics ul dl dt::after { content: ""; width: 1px; display: block; background: #fff; position: absolute; bottom: 0; top: 0; right: 0; }
  #container01 .newtopics .flickity-prev-next-button { width: 7vw; height: 15vw; margin-top: -7.3vw; }
  #container01 .newtopics .flickity-prev-next-button.previous { right: -11.4vw; background: #161719 url("../images/top/newtopics_prev.png") no-repeat; background-size: 2.3vw auto; background-position: center center; }
  #container01 .newtopics .flickity-prev-next-button.next { right: -18.8vw; background: #161719 url("../images/top/newtopics_next.png") no-repeat; background-size: 2.3vw auto; background-position: center center; }
  #container02 { padding: 33.4vw 0 30vw; }
  #container02 .works_pickup::after { width: 96.2vw; height: 62.8vw; top: 30.2vw; }
  #container02 .worksimg_wrap { width: 94.5vw; height: 52.7vw; }
  #container02 .txt_container { width: 84vw; margin: 0 auto; padding-top: 19vw; }
  #container02 .txt_container h2 { width: 49.3vw; }
  #container02 .txt_container p { padding: 7.5vw 0; }
  #container03 { padding: 0 0 30vw; }
  #container03 figure { width: 94.7vw; margin: 8vw auto 7vw; }
  #container03 .inner { width: 84vw; margin: 0 auto; }
  #container03 .inner h2 { width: 83.7vw; }
  #container03 .inner p { padding: 7.5vw 0; } }