.ham_bg {position: fixed !important;}

#portfolio .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; }
/* #portfolio .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;} */

#portfolio .about_top {font-size: 90px; padding-bottom: 30px; line-height: 105%; font-weight: 800;}
#portfolio .scroll_info {padding-bottom: 90px; text-decoration: underline; font-style: italic;}
#portfolio .about_top p {position: relative; bottom: -115px; z-index: -1; transition: all 0.7s;}
#portfolio .popol_wrap {display: flex; flex-wrap: wrap; justify-content: space-between; padding-bottom: 160px;}
#portfolio .popol_wrap .popol {flex: 50% 0 0; margin-bottom: 100px;}
#portfolio .popol_wrap .popol:nth-child(2n) {transform: translateY(100px);}
#portfolio .popol_wrap .popol_img {max-width: 516px; max-height: 424px; margin-bottom: 30px; cursor: pointer; perspective: 700px;}
#portfolio .popol_wrap .popol_img img {width: 100%; height: 100%; transition: all 0.3s; transform-origin: 0 100% 0;}
#portfolio .popol_wrap .popol_img img:hover {
  -webkit-transform: rotateY(15deg);
  transform: rotateY(15deg);
  box-shadow: 0 15px 25px rgba(0,0,0,0.15);
  backface-visibility: visible;
}
#portfolio .popol_wrap .popol_title {font-size: 24px; cursor: pointer; }

.popol_scroll {margin-bottom: 60px; height: 50px; position: relative;}
.popol_scroll span {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 30px;
  height: 50px;
  margin-left: -15px;
  border: 2px solid #222;
  border-radius: 50px;
  box-sizing: border-box;
}
.popol_scroll span::before {
  position: absolute;
  top: 10px;
  left: 50%;
  content: '';
  width: 6px;
  height: 6px;
  margin-left: -3px;
  background-color: #222;
  border-radius: 100%;
  -webkit-animation: sdb 2s infinite;
  animation: sdb 2s infinite;
  box-sizing: border-box;
}

.port.popup {position: relative; display: none; width: 100%; max-width: 75vw; height: 100%; max-height: 80vh; position: fixed; top: 50%; left: 50%; z-index: 1001; transform: translate(-50%, -50%);}

.port.popup .popol_photo {width: 45vw; max-width: 765px; max-height: 735px; overflow-y: scroll; position: absolute; left: 0; top: 47%; transform: translateY(-50%); box-shadow: 10px 10px 10px rgba(0,0,0,0.2); z-index: 101;}
.port.popup .popol_photo img {width: 100%;}
.port.popup .popol_desc {position: absolute; padding: 60px 40px 100px 11%; background: #fff; box-shadow: 10px 10px 10px rgba(0,0,0,0.2); top: 60%; left: 50%; width: 45vw; max-width: 700px; height: 600px; transform: translateY(-50%); display: flex; flex-direction: column; justify-content: center;}
.port.popup .popol_desc .desc_top .title {margin-bottom: 30px; font-size: 30px; font-weight: 700;}
.port.popup .popol_desc .desc_top .tag {font-size: 14px; color: #5137c4; margin-bottom: 30px;}
.port.popup .popol_desc .desc_bt {max-height: calc(100% - 124px); overflow-y: scroll; padding-right: 10px;}
.port.popup .popol_desc .desc_bt::-webkit-scrollbar{width: 7px;}
.port.popup .popol_desc .desc_bt::-webkit-scrollbar-track {background-color:#f3f3f3;}
.port.popup .popol_desc .desc_bt::-webkit-scrollbar-thumb {background:linear-gradient(to bottom, #5151cf, #47089a); border-radius: 10px;}
.port.popup .popol_desc .desc_bt::-webkit-scrollbar-thumb:hover {background: linear-gradient(to bottom, #5151cf, #47089a);}
.port.popup .popol_desc .desc_bt::-webkit-scrollbar-button:start:decrement,
.port.popup .popol_desc .desc_bt::-webkit-scrollbar-button:end:increment {display: none;} 
.port.popup .popol_desc .desc_bt .title {margin-bottom: 10px; font-size: 16px;}
.port.popup .popol_desc .desc_bt .desc {font-size: 16px;}
.port.popup .popol_desc .site_btn {
  position: absolute; bottom: 40px; right: 40px; width: 200px; height: 45px;
  border-radius: 50px; display: inline-flex; align-items: center; -ms-flex-align: center;
  background: linear-gradient(to left, #5151cf, #47089a); color: #fff; 
  display: flex; align-items: center; justify-content: center; font-size: 16px;
  transition: transform 0.3s;
}
.port.popup .popol_desc .site_btn:hover {background: linear-gradient(to right, #5151cf, #47089a); transform: translateX(-7px);}

.popol_photo::-webkit-scrollbar{width: 10px;}
.popol_photo::-webkit-scrollbar-track {background-color: #eee;}
.popol_photo::-webkit-scrollbar-thumb {background:linear-gradient(to bottom,#fa526a, #ee3c8f); border-radius: 10px;}
.popol_photo::-webkit-scrollbar-thumb:hover {background:linear-gradient(to bottom, #fa526bb7,  #ee3c8fb2);}
.popol_photo::-webkit-scrollbar-button:start:decrement,::-webkit-scrollbar-button:end:increment {
width:16px;height:16px;background:#f2f2f2;} 

@-webkit-keyframes sdb {
  0% {-webkit-transform: translate(0, 0); opacity: 0;}
  40% {opacity: 1;}
  80% {-webkit-transform: translate(0, 20px); opacity: 0;}
  100% {opacity: 0;}
}
@keyframes sdb {
  0% {transform: translate(0, 0) ;opacity: 0;}
  40% {opacity: 1;}
  80% {transform: translate(0, 20px); opacity: 0;}
  100% {opacity: 0;}
}

@media screen and (max-width: 1420px) {
  #portfolio .about_top {font-size: 70px;}
  #portfolio .scroll_info {padding-bottom: 80px;}
  #portfolio .popol_wrap .popol {flex: 48% 0 0; margin: 0 1% 80px 1%;}
  .port.popup .popol_photo {width: 42vw;}
  .port.popup .popol_desc .desc_top .title {font-size: 25px; margin-bottom: 15px;}
  .port.popup .popol_desc .desc_bt .title {margin-bottom: 15px;}
  .port.popup .popol_desc .desc_bt .desc {font-size: 14px;}
}

@media screen and (max-width: 1024px) {
  #portfolio .lt_slogun {font-size: 14px; left: -75px;}
  .port.popup .popol_desc > div br {display: none;}
  .port.popup .popol_desc .desc_top .title {font-size: 22px; margin-bottom: 10px;}
  .port.popup .popol_desc .desc_top .tag {font-size: 13px; line-height: 1.75rem;}
  .port.popup .popol_desc .desc_bt .title {margin-bottom: 10px;}
  .port.popup .popol_desc .desc_bt .desc {line-height: 1.875rem;}

}

@media screen and (max-width: 768px) {
  body {overflow-y: auto !important;}
  #portfolio .about_top {font-size: 50px;}
  #portfolio .scroll_info {padding-bottom: 40px;}
  #portfolio .popol_wrap {padding-bottom: 0; margin-bottom: 100px;}
  #portfolio .popol_wrap .popol {flex: 100% 0 0; margin: 0 0 45px 0;}
  #portfolio .popol_wrap .popol_img {margin: 0 auto 12px auto;}
  #portfolio .popol_wrap .popol_title {font-size: 18px;}
  #portfolio .popol_wrap .popol:nth-child(2n) {transform: none;}
  .popol_scroll {margin-bottom: 30px;}
  .port.popup {top: 100px; transform: translateX(-50%);}
  .port.popup .popol_photo {width: 100%; max-height: none; overflow-y: auto; left: 50%; top: 300px; transform: translateX(-50%);}
  .port.popup .popol_desc {width: 100%; max-width: none; transform: translateX(-50%); padding: 40px; right: auto; left: 50%; top: 0; height: 300px;}
  .port.popup {max-width: 85vw; max-height: 90vh; position: absolute;}
  .port.popup .popol_desc > div {width: 100%;}
  .pop.x_btn {font-size: 45px; top: 50px; right: 20px;}
  .port.popup .popol_desc .desc_top .tag {font-size: 12px; line-height: 1.25rem;}
  .port.popup .popol_desc .desc_bt .desc {font-size: 13px; line-height: 1.5rem;}
  .port.popup .popol_desc {padding: 30px 20px;}
  .port.popup .popol_desc .desc_bt {max-height: calc(100% - 72px - 54px); padding-right: 8px;}
  .port.popup .popol_desc .desc_bt::-webkit-scrollbar{width: 5px;}
  .port.popup .popol_desc .site_btn {width: 135px; height: 32px; font-size: 12px; position: static; margin-top: 20px; margin-left: auto;}
  .port.popup .popol_desc > div br {display: block;}
}

@media screen and (max-width: 560px) {
  #portfolio .about_top {font-size: 40px;}
  #portfolio .popol_wrap .popol {margin: 0 0 30px 0;}
  .port.popup .popol_desc .desc_top .tag {line-height: 1.5rem; font-size: 12px; margin-bottom: 10px;}
  .port.popup .popol_photo {top: 280px;}
  .port.popup .popol_desc {height: 280px;}
  .port.popup .popol_desc .desc_bt .desc {font-size: 12px;}
  .port.popup .popol_desc .desc_bt .title {margin-bottom: 5px;}
  #portfolio .scroll_info {font-size: 11px;}
  #portfolio .about_top {padding-bottom: 10px;}
}