.ham_bg {position: fixed !important;}

#story {overflow-x: hidden;}
#story .story_top {
  background-attachment: fixed;
  background-image: url(/img/story_top.jpg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  height: 420px;
  width: 100%;
  z-index: -1;
}
#story .story_top img {display: none;}
#story .story_title {font-size: 55px;line-height: 5rem;}
#story .ani1:nth-child(1) .story_title {margin-top: 80px;}
#story .ani1:nth-child(2) .story_title {margin-bottom: 50px;}
#story .top_p {font-size: 17px;}
#story .ani2_top_p {margin-bottom: 70px;}
#story .story_circle_wrap {display: flex; justify-content: space-between; margin-bottom: 150px;}
#story .story_circle {width: 220px; height: 220px; border: 1px solid #111; border-radius: 50%; display: flex; justify-content: center; align-items: center; position: relative;  transform-style: preserve-3d; transition: all 0.7s; background: #f2f2f2;}
/* #story .story_circle:hover {transform: rotateY(180deg);} */
#story .story_circle .circle {position: relative; background: #f2f2f2; width: 100%; height: 100%; border-radius: 50%; display: flex; justify-content: center; align-items: center;}
/* #story .story_circle .circle {position: absolute; background: #f2f2f2; width: 100%; height: 100%; border-radius: 50%; display: flex; justify-content: center; align-items: center;} */
#story .story_circle .circle p {opacity: 0; position: absolute; bottom: -30px; left: 50%; transform: translate(-50%, -10px); color: #fff; transition: all 0.3s;}
#story .story_circle .circle:hover {background: #111;}
#story .story_circle .circle:hover p {opacity: 1; bottom: 15%;}
#story .story_circle .circle:hover img.org {opacity: 0;}
#story .story_circle .circle:hover img.hover {opacity: 1; top: 40%; transform: scale(0.9) translate(-55%, -50%);}
#story .story_circle img {width: auto; transition: all 0.3s; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
#story .story_circle img.hover {opacity: 0;}
/* #story .story_circle .circle.circle_front {z-index: 1; transform: rotateY(180deg); background: #111; color: #fff;}
#story .story_circle .circle_back {z-index: 2; transform: rotateY(0deg);} */
#story .work_rolling .work1 {color: #fff; margin-right: 25%;}
#story .work_rolling .work2 {
  color: #5535bf;
  text-shadow:
  -1px -1px 0 #fff,
  1px -1px 0 #fff,
  -1px 1px 0 #fff,
  1px 1px 0 #fff;
}
#story .work_style {padding: 100px 0 60px 0; display: inline-flex; flex-wrap: wrap; width: 100%;}
#story .work_style .work {margin-bottom: 120px; flex: 25% 0 0; position: relative;}
#story .work_style .work img {width: 100%;}
#story .work_style .work4 img {position: absolute; width: auto; right: 0; top: -45px;}
#story .work_style .work5 img {position: absolute; width: auto; left: -100px; top: -70px;}
#story .work_style .work9 {display: none;}
#story .work_style .work .mont {font-size: 22px; margin-bottom: 30px;}
#story .work_style .work .core {font-size: 17px;}
#story .talent_wrap {width: 100%; display: inline-flex; justify-content: space-between; align-items: center;}
#story .talent_wrap .talent {border-radius: 50%; border: 1px solid #111; width: 300px; height: 300px; display: inline-flex; justify-content: center; align-items: center; text-align: center; line-height: 3rem;}
#story .talent_wrap .talent.line {height: 80px; width: 1px; background: #111; transform: rotate(35deg);display: inline-block;}
#story .talent_wrap .talent p {font-size: 30px; font-weight: bold;}
#story .talent_p {font-size: 24px; margin-top: 60px; margin-bottom: 250px;}
#story .ani5 .story_title {margin-bottom: 50px;}

.marquee {
  height: 100px;
  line-height: 100px;
  width: 100%;
  background: #5535bf;

  overflow: hidden;
  position: relative;
}

.marquee > div {
  display: block;
  width: 200%;
  position: absolute;
  overflow: hidden;
  animation: marquee 4s linear infinite;
}

.marquee > div > span {
  float: left;
  width: 50%;
  font-size: 40px;
  display: inline;
  letter-spacing: 1px;
  text-align: center;
}

.marquee > div > span > span {
  text-align: center;
}

@keyframes marquee {
  0% { left: 0; }
  100% { left: -100%; }
}


@media screen and (max-width: 1620px) {
  #story .work_style .work4 img {width: 100%;}
  #story .work_style .work5 img {width: 100%;}
}

@media screen and (max-width: 1420px) {
  #story .talent_wrap .talent {width: 180px; height: 180px;}
  #story .story_title {font-size: 50px; line-height: 4.5rem; margin: 60px 0 40px 0;}
  #story .ani1:nth-child(1) .story_title {margin-top: 60px; margin-bottom: 0;}
  #story .ani1:nth-child(2) .story_title {margin-bottom: 50px; margin-top: 0;}
  #story .story_circle {width: 160px; height: 160px;}
  #story .story_circle > div {width: 160px; height: 160px;}
  #story .story_circle_wrap {margin-bottom: 120px;}
  .marquee {height: 80px; line-height: 80px;}
  .marquee .work_rolling {height: 80px; line-height: 80px;}
  .marquee > div > span {font-size: 35px;}
  #story .work_style {padding: 100px 0 0 0;}
  #story .work_style .work {margin-bottom: 80px;}
  #story .work_style .work .mont {font-size: 18px; margin-bottom: 20px;}
  #story .work_style .work .core {font-size: 13px; line-height: 1.75rem;}
  #story .work_style .work4 img {top: 0;}
  #story .work_style .work5 img {top: 0; left: -50px;}
  #story .talent_wrap .talent p {font-size: 22px; line-height: 2rem;}
  #story .talent_p {font-size: 18px; margin-top: 50px; margin-bottom: 150px;}
}

@media screen and (max-width: 1024px) {
  #story .story_top {height: 350px;}
  #story .story_title {font-size: 35px; margin: 40px 0 20px 0; line-height: 3.5rem;}
  #story .ani1:nth-child(1) .story_title {margin-top: 40px; margin-bottom: 0;}
  #story .ani1:nth-child(2) .story_title {margin-bottom: 20px; margin-top: 0;}
  #story .story_circle {width: 110px; height: 110px;}
  #story .story_circle > div {width: 110px; height: 110px;}
  #story .story_circle .circle p {font-size: 12px;}
  #story .story_circle .circle img {max-width: 50px;}
  #story .story_circle .circle:hover p {bottom: 5px;}
  #story .story_circle .circle:hover img.hover {top: 40%; transform: scale(0.8) translate(-55%, -50%);}
  #story .story_circle_wrap {margin-bottom: 80px;}
  .marquee {height: 60px; line-height: 60px;}
  .marquee > div > span {font-size: 30px;}
  .marquee .work_rolling {height: 60px; line-height: 60px;}
  #story .work_style {padding: 80px 0 0 0;}
  #story .work_style .work {flex: 33.3333% 0 0; margin-bottom: 40px;}
  #story .work_style .work .mont {margin-bottom: 12px;}
  #story .work_style .work4 img {height: 100%; right: auto; left: 0;}
  #story .work_style .work5 img {height: 100%; left: 0;}
  #story .talent_wrap .talent {width: 130px; height: 130px;}
  #story .talent_wrap .talent.line {height: 40px;}
  #story .talent_p {font-size: 16px; margin: 30px 0 100px 0;}
  #story .talent_wrap .talent p {font-size: 18px; line-height: 1.75rem;}
}

@media screen and (max-width: 768px) {
  .br_mo {display: block;}
  #story .story_top {background-position: 30% center; height: 400px;}
  #story .story_title {font-size: 30px; margin: 30px 0 15px 0; line-height: 2.75rem;}
  #story .ani1:nth-child(1) .story_title {margin-top: 30px; margin-bottom: 0;}
  #story .ani1:nth-child(2) .story_title {margin-bottom: 15px; margin-top: 0;}
  #story .story_circle_wrap {margin-bottom: 60px;}
  #story .story_circle {width: 90px; height: 90px;}
  #story .story_circle > div {width: 90px; height: 90px;}
  #story .story_circle .circle p {font-size: 11px;}
  #story .story_circle .circle img {max-width: 40px;}
  #story .story_circle .circle:hover p {bottom: 0;}
  .marquee {height: 55px; line-height: 55px; width: 200%;}
  .marquee .work_rolling {height: 55px; line-height: 55px;}
  .marquee > div > span {font-size: 24px;}
  #story .work_style .work4 img {right: auto; left: 0;}
  #story .work_style .work5 img {left: 0;}
  #story .talent_wrap .talent {width: 100px; height: 100px;}
  #story .talent_wrap .talent p {font-size: 12px; line-height: 1.25rem;}
  #story .talent_p {font-size: 14px; margin: 20px 0 60px 0; line-height: 1.75rem;}
}

@media screen and (max-width: 560px) {
  #story .story_top {background: unset; height: auto;}
  #story .story_top img {display: block; width: 100%;}
  #story .ani5 .story_title {margin-bottom: 20px;}
  #story .story_title {font-size: 24px; line-height: 2.25rem; margin: 15px 0 5px 0;}
  #story .ani1:nth-child(1) .story_title {margin-top: 15px; margin-bottom: 0;}
  #story .ani1:nth-child(2) .story_title {margin-bottom: 20px; margin-top: 0;}
  #story .top_p {font-size: 14px; line-height: 1.325rem;}
  #story .ani2_top_p {margin-bottom: 30px;}
  #story .work_style {padding: 100px 0;}
  #story .work_style .work {flex: 48% 0 0; margin: 0 1% 25px 1%;}
  #story .work_style .work .mont {font-size: 16px; margin-bottom: 7px;}
  #story .work_style .work .core {font-size: 11px; line-height: 1.5rem;}
  #story .work_style .work4, #story .work_style .work5 {display: none;}
  #story .work_style .work9 {display: block; flex: 100% 0 0 !important; margin: 0 0 30px 0 !important;}
  #story .story_circle_wrap {flex-wrap: wrap;}
  #story .story_circle {width: 130px; height: 130px; margin: 0 5% 6% 5%;}
  #story .story_circle .circle.circle_front {font-size: 12px;}
  #story .story_circle .circle img {max-width: 50px;}
  #story .story_circle .circle p {font-size: 14px;}
  #story .story_circle .circle:hover p {bottom: 9%;}
  #story .story_circle .circle:hover img.hover {top: 37%; transform: scale(0.8) translate(-60%, -50%);}
}

@media screen and (max-width: 450px) {
  #story .story_title {font-size: 20px; line-height: 2rem;}
  #story .top_p {font-size: 13px;}
  .marquee {height: 45px; line-height: 45px;}
  .marquee .work_rolling {height: 45px; line-height: 45px;}
  .marquee > div > span {font-size: 20px;}
  #story .talent_wrap .talent {width: 80px; height: 80px;}
  #story .talent_wrap .talent.line {height: 16px;}
  #story .talent_p {font-size: 13px; margin: 20px 0 100px 0; line-height: 1.5rem;}
}

@media screen and (max-width: 414px) {
  #story .story_circle .circle img {max-width: 40px;}
}

@media screen and (max-width: 375px) {
  #story .story_circle {width: 120px; height: 120px; margin: 0 2% 6% 2%;}
}