.ham_bg {position: fixed !important;}

#about {overflow-y: auto; overflow-x: hidden;}
#about .lt_slogun {position: fixed; font-size: 22px; width: max-content; top: 35%; left: 55px; writing-mode: vertical-lr; writing-mode: tb-lr; z-index: 95; }
/* #about .lt_slogun {position: fixed; font-size: 22px; width: max-content; top: 50%; left: 55px; writing-mode: vertical-lr; transform: rotate(180deg) translateY(50%); z-index: 95;} */
#about .about_top {font-size: 90px; line-height: 105%; font-weight: 800;}

#about .about_top p {position: relative; bottom: 0;}
#about .about_txt {margin-top: 70px;}
#about .ani3 .about_txt {margin-bottom: 80px;}
#about .about_txt .title {font-size: 30px; margin-bottom: 35px;}
#about .about_txt .desc {font-size: 17px;}
#about .ani7 .about_txt .desc {font-size: 17px; margin-bottom: 50px;}
#about .about_circle_wrap {display: flex; justify-content: space-between; padding-bottom: 90px; align-items: center; max-width: 75%;}
#about .about_circle {width: 220px; height: 220px; border: 1px solid #111; border-radius: 50%; display: flex; justify-content: center; align-items: center;}
#about .about_circle p {font-size: 30px; text-align: center;}
#about .plus {font-size: 50px;}
#about .about_key .key_flex {display: flex; position: relative;}
#about .about_key .key_img {position: absolute; right: 0; transform: translateX(-50%); z-index: 10; -webkit-animation-name: keyBounce; animation-name: keyBounce; animation-duration: 2.5s; animation-iteration-count: infinite; animation-fill-mode: forwards;}

#about .txt_ani_wrap.ani9, #about .txt_ani_wrap.ani10 {width: 100%;}
#about .about_txt .br_pc {display: none;}
#about .about_bt .br_pc {display: none;}

@keyframes keyBounce {
  0% {
    -webkit-transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
  }
  
  50% {
     -webkit-transform: translate(-50%, -20px);
    -ms-transform: translate(-50%, -20px);
    transform: translate(-50%, -20px);
  }
}

@keyframes keyBounce2 {
  0% {
    -webkit-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0);
  }
  
  50% {
     -webkit-transform: translate(0, -20px);
    -ms-transform: translate(0, -20px);
    transform: translate(0, -20px);
  }
}

#about .clef_rolling_wrap {
  height: 130px;
  line-height: 130px;
  width: 100%;
  background: #f2f2f2;
  border: 1px solid #e2e2e2;
  border-left: 0; border-right: 0;
  overflow: hidden;
  position: relative;
}
#about .clef_rolling_wrap {
  height: 100%;
  font-size: 100px; 
  letter-spacing: 1px; 
  font-weight: bold;
}

#about .clef1 {color: #e2e2e2; margin-right: 25%;}
#about .clef2 {
  color: #f2f2f2;
  text-shadow: 
  -1px -1px 0 #e2e2e2,
  1px -1px 0 #e2e2e2,
  -1px 1px 0 #e2e2e2,
  1px 1px 0 #e2e2e2;
}

.marquee {
  height: 130px;
  line-height: 130px;
  width: 100%;
  background: #f2f2f2;
  border: 1px solid #e2e2e2;
  border-left: 0; border-right: 0;
  overflow: hidden;
  position: relative;
}

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

.marquee > div > span {
  float: left;
  width: 25%;
  display: inline;
  text-align: center;
  height: 100%;
  font-size: 100px; 
  letter-spacing: 1px; 
  font-weight: bold;
}

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

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


#about .about_img_wrap {float: right; width: 80%;}
#about .about_img_wrap::after {content: ""; display: block; clear: both;}
#about .about_img_wrap .about_txt {margin: 65px 0 120px 0;}
#about .about_img {width: 100%;}
#about .about_img img {width: 100%;}
#about .about_bt {margin: 60px 0 200px 0; text-align: center; font-style: italic;}
#about .about_bt .core_bold {font-size: 33px; margin-bottom: 50px; line-height: 3rem;}
#about .about_bt .mont {font-size: 57px;}
#about .sub_rt.mt_160 {margin-top: 160px;}
#about .about_txt.mt_130 {margin-bottom: 130px;}


@media screen and (max-width: 1420px) {
  #about .about_top {font-size: 70px;}
  #about .about_circle_wrap {max-width: 100%;}
  #about .about_key .key_img {transform: none; animation-name: keyBounce2; -webkit-animation-name: keyBounce2; right: -100px; top: 65px;}
  #about .about_key .key_img img {max-width: 300px;}
  #about .about_txt.mt_130 {margin-bottom: 80px;}
}

@media screen and (max-width: 1024px) {
  #about .lt_slogun {font-size: 14px;}
  #about .about_circle {width: 180px; height: 180px;}
  #about .about_circle p {font-size: 26px;}
  .marquee {height: 100px; line-height: 100px; width: 200%;}
  .marquee div {height: 100px;}
  .marquee > div > span {font-size: 80px;}
  #about .sub_rt.mt_160 {margin-top: 130px;}
  #about .about_bt .core_bold {font-size: 23px; margin-bottom: 30px; line-height: 2.5rem;}
  #about .about_bt .mont {font-size: 38px;}
}

@media screen and (max-width: 768px) {
  #about .about_top {font-size: 50px;}
  #about .about_txt {margin-top: 30px;}
  #about .ani3 .about_txt {margin-bottom: 40px;}
  #about .about_txt .title {font-size: 24px; margin-bottom: 10px;}
  #about .about_txt .desc {font-size: 14px;}
  #about .about_txt .desc br {display: none;}
  #about .about_circle_wrap {padding-bottom: 60px;}
  #about .about_circle {width: 150px; height: 150px;}
  #about .about_circle p {font-size: 16px;}
  #about .about_key .key_img {position: static; text-align: right;}
  #about .about_key .key_flex {flex-direction: column;}
  #about .about_key .key_img img {max-width: 200px;}
  #about .about_txt.mt_130 {margin-bottom: 20px;}
  .marquee {height: 80px; line-height: 80px; transform: translateY(-80px);}
  .marquee > div > span {font-size: 45px;}
  #about .clef_rolling {height: 80px; line-height: 80px;}
  #about .sub_rt.mt_160 {margin-top: 20px;}
  #about .about_bt .core_bold {font-size: 22px; margin-bottom: 35px; line-height: 2rem;}
  #about .about_bt .mont {font-size: 35px; line-height: 1.875rem;}
  #about .about_bt {margin: 30px 0 120px 0;}
  #about .about_img_wrap {width: 100%; margin-bottom: 50px;}
  #about .about_img_wrap .about_txt {margin: 30px 35px 60px 35px;}
}

@media screen and (max-width: 560px) {
  #about .about_top {font-size: 40px;}
  #about .about_txt {margin: 20px 0 10px 0;}
  #about .ani3 .about_txt {margin-bottom: 20px;}
  #about .about_txt .br_pc {display: block;}
  #about .about_bt .br_pc {display: block;}
  #about .ani7 .about_txt .desc {font-size: 12px; margin-bottom: 20px;}
  #about .about_txt .title {font-size: 18px; margin-bottom: 10px;}
  #about .about_circle {width: 85px; height: 85px;}
  #about .about_circle p {font-size: 12px; line-height: 1.25rem;}
  #about .about_txt.mt_130 {margin-bottom: 0;}
  #about .about_circle_wrap {padding-bottom: 40px;}
  #about .about_key .key_img img {max-width: 150px;}
  .marquee > div > span {font-size: 35px;}
  #about .about_img_wrap .about_txt {margin: 17px 35px 30px 35px;}
  #about .about_bt {margin: 10px 0 100px 0;}
  #about .about_bt .core_bold {font-size: 14px; line-height: 1.75rem; margin-bottom: 15px;}
  #about .about_bt .mont {font-size: 24px;}
  #about .ani7 .about_txt .desc {font-size: 13px;}
  
}

@media screen and (max-width: 400px) {
  #about .about_txt .title {font-size: 15px;}
  #about .about_circle {width: 80px; height: 80px;}
  #about .about_circle p {font-size: 11px; line-height: 1rem;}
  #about .plus {font-size: 24px;}
  #about .about_circle_wrap {padding-bottom: 80px;}
  #about .about_bt .core_bold {font-size: 14px;}
  #about .about_bt .mont {font-size: 28px;}
}