.customer_number {
  position:fixed; z-index:9999;
  left:0; right:0; bottom:0;
  border-radius:20px 20px 0 0;
  background-color:#222;
  color:#fff; text-align:center; padding:15px 0;
  font-size:1.2rem;

  -webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-o-user-select: none;
	user-select: none;
}
.customer_number:hover {
  color:#fff;
}
.web-container {
  width:100%;
  min-height:calc(100vh);
  box-sizing: border-box;
  padding:50px 30px 120px 30px;
  position:relative;
}
.main {
  position:relative;
}
.main-container {
  position:relative;
  height:100vh;
}

.main-bg-container {
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  position:absolute;
  left:0; right:0; top:0; bottom:0;
  z-index:1;
  opacity:0.5;
}

.menu-container > nav {
  position:relative;
}
.menu-container.relativeList {
  position:absolute;
  left:50%; top:50%;
  transform: translate(-50%, -50%);
  z-index:2;
}
.pg-content-box.ab {
  position:absolute;
  left:50%; top:50%;
  transform: translate(-50%, -50%);
  z-index:2;
  min-width:280px; max-width:350px; margin:0 auto;
}
.pg-content-box.re {
  position:relative;
  z-index:2;
  min-width:260px; max-width:350px; margin:0 auto;
}
.pg-content-box > p {
  font-weight:300;
  color:#222; #text-align:center;
}
.menu-container li {
  -webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-o-user-select: none;
	user-select: none;
}
.menu-container li:hover {
  animation-name: fill-in-bg;
  animation-duration: 1.5s;
  animation-fill-mode: forwards;
  animation-iteration-count: 1;
}
.menu-container.relativeList ul > li {
  text-align:center;
  padding:10px 20px;
  border:1px solid #fff;
  border-radius:35px;
  margin:15px;
  overflow:hidden;
  position:relative;
  opacity:0.8;
  cursor:pointer;
}
.menu-container.absoluteList {
  position:fixed;
  left:0px; right:0px; top:0; height:50px;
  background-color:#fff;
  z-index:3;
  box-shadow: 1px 0px 3px rgba(0, 0, 0, 0.2);

  animation-name: move-in;
  animation-duration: 0.6s;
  animation-fill-mode: forwards;
  animation-iteration-count: 1;
}
@keyframes move-in {
  from {
    top:-50px;
  }
  to {
    top:0px;
  }
}
.menu-container.absoluteList ul {
  display:flex;
}
.menu-container.absoluteList ul > li {
  #width:calc(100% / 3);
  text-align:center;
  line-height:50px;
  margin:0 15px;
  border-radius:35px;
  overflow:hidden;
  cursor:pointer;
  color:#222;
}
.menu-bar {
  display:none;
  position:absolute;
  left:0px; bottom:0px; height:3px;
  background-color:#d30000;
  z-index:3;
}
.social-icons {
  text-align:center;
  font-size:1.3rem;
}
.social-icons > i {
  margin:0 3px;
  cursor:pointer;
  opacity:0.8;

  -webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-o-user-select: none;
	user-select: none;
}
.social-icons > i:hover {
  animation-name: fill-in-bg;
  animation-duration: 1.5s;
  animation-fill-mode: forwards;
  animation-iteration-count: 1;
}
@keyframes fill-in-bg {
  from {
    opacity:0;
  }
  to {
    opacity:0.8;
  }
}

.main-container {
  background-color:#000;
}
.portfolio {
  background-color:#99cccc;
}
.profile {
  background-color:#faefe4;
}
.contact {
  background-color:#e0f3ff;
}
.portfolio h1 {
  margin-bottom: 15px;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
  -webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-o-user-select: none;
	user-select: none;
}
.portfolio .ui-cateogy-list {
  display:flex;
  background-color:#fff;
}
.portfolio .ui-cateogy-list > li {
  padding:3px 5px;
  font-size:1.05rem; color:#aaa;
  cursor:pointer;
}
.portfolio .ui-cateogy-list > li.selected { color:var(--inblu-color); }
.portfolio .ui-cateogy-list > li:first-child {
  padding-left:10px;
}
.portfolio .ui-list-box {
  display:grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  gap: 1px;
  background-color:#fff;
  padding:1px;
  overflow:hidden;
}
.portfolio .ui-list-box > li {
  cursor:pointer;
}
.portfolio .ui-list-box > li:nth-child(n+43) {
  display:none;
}
.copyright {
  font-size:0.88rem; text-align:center; color:#f4f4f4;
}

.image-box {
  position:relative;
  width:100%; padding-bottom:100%; overflow:hidden;
}
.image-box > div:first-child {
  position:absolute;
  left:0; top:0;
  width:100%; height:100%;
}
.image-box > div:first-child > img {
  width:100%; height:100%; object-fit: cover;
}

.profile .user-name {
  margin:10px 0 0 0; text-align:center;
  font-size:1.2rem;
  color:rgb(34, 34, 34);
  cursor:pointer;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0);

  -webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-o-user-select: none;
	user-select: none;
}
.profile .profile-icon {
  text-align:center; margin:0 auto;
}
.profile .profile-info {
  text-align:center; color:#222;
  font-weight:300;
}
.profile .profile-social-icons {
  text-align:center;
  margin:30px 0;

  -webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-o-user-select: none;
	user-select: none;
}
.profile .profile-social-icons > i:hover {
  animation-name: fill-in-bg;
  animation-duration: 1.5s;
  animation-fill-mode: forwards;
  animation-iteration-count: 1;
}
.profile .profile-social-icons > i {
  color:var(--inblu-color); #opacity:0.8;
  font-size:1.7rem;
  margin:0 5px;
  cursor:pointer;
}
.profile .profile-social-icons > i:nth-child(2) {
  font-size:1.86rem;
}
.profile .profile-social-icons > i:nth-child(3) {
  font-size:1.67rem;
}
.profile .profile-tip {
  margin-top:20px;
  font-size:1rem;
  font-weight:300;
  color:#222;
  background-color:#fdf8f3;
  padding:15px;
  border-radius: 5px;
  letter-spacing: -0.05rem;
  word-spacing: -0.05rem;
}
.profile .profile-box li:hover {
  animation-name: box-size-up;
  animation-duration: 0.4s;
  animation-fill-mode: forwards;
  animation-iteration-count: 1;
}
@keyframes box-size-up {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(1.02);
  }
}
.profile .profile-box li {
  height:40px;
  box-shadow: 1px 2px 5px rgba(203, 151, 100, 0.2);
  border-radius:30px; overflow:hidden;
  padding:5px;
  background-color:#fdf8f3;
  color:#222; text-align:center;
  margin:10px 0;
  display:flex;
  cursor:pointer;

  -webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-o-user-select: none;
	user-select: none;
}
.profile .profile-box li > div:first-child {
  width:40px;
}
.profile .profile-box li > div:last-child {
  width:calc(100% - 40px);
  line-height:38px;
  font-weight:400; color:#555;
}
.profile .inputBox {
  margin:5px 0;
}



.contact .inputBox {
  margin:5px 0;
}
.contact h1 {
  margin:0px; color:#fff; text-align:center;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
  -webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-o-user-select: none;
	user-select: none;
}
.contact p {
  color:#999;
}

.profile h1 {
  margin-top:30px;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
  -webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-o-user-select: none;
	user-select: none;
}
.profile .service-box > li {
  #border:5px solid #fff;
  box-shadow: 1px 2px 5px rgba(203, 151, 100, 0.2);
  background-color:#fff;
  padding:10px;
  color:#222; font-weight:300;
  font-size:0.9rem;
  position:relative;
}
.profile .service-box > li:not(:last-child) {
  margin-bottom:35px;
}
.profile .service-item li::before {
  content:'•';
  margin-right:5px;
}
.profile .price {
  position:absolute;
  right:5px; top:0px;
  background-color:var(--inblu-color); color:#fff;
  border-radius:20px; padding:0px 10px; height:30px; line-height:28px;
  transform: translate(0%, -50%);
  font-family: 'Oswald', sans-serif;
  letter-spacing: 1px;
  font-size:1.2rem;
  box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.3);

  -webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-o-user-select: none;
	user-select: none;
}

.profile .ani {
  font-weight:500;

  animation-name: font-moving;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-direction: alternate-reverse;
}

@keyframes font-moving {
  from {
    margin-left:0px;
  }
  to {
    margin-left:10px;
  }
}

.mySwiper-youtube {
  padding-bottom:30px;
}
.mySwiper-youtube .swiper-slide .video-box {
  position:relative; width:100%; padding-bottom:56.25%; overflow:hidden;
}
.mySwiper-youtube .swiper-slide .video-box .video {
  position:absolute; width:100%; height:100%;
}
.mySwiper-youtube .swiper-slide .vertical-video-box .yt-video {
  position:absolute; width:100%; height:100%;
  aspect-ratio: 9 / 16;
}
.mySwiper-youtube .outer-swiper-pagination {
  margin-top:5px;
}
.mySwiper-youtube .swiper-pagination-bullet {
  width:22px; height:22px; background-color: rgba(0,0,0,0.8);
  font-size:0.9rem;
}
.mySwiper-youtube .swiper-pagination-bullet-active {
  color:#222;
}
.youtube-shorts {
  overflow:auto; padding-bottom:15px;
}
.youtube-shorts > ul {
  display:flex;
}
.youtube-shorts li:not(:last-child) {
  margin-right:5px;
}

.media {
  margin:0px;
}


@media ( max-width: 799px ) {
  .portfolio .ui-list-box {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
  }
  .portfolio .ui-list-box > li:nth-child(n+37) {
    display:none;
  }
}
@media ( max-width: 499px ) {
  .copyright {
    font-size:0.72rem; text-align:center; color:#f4f4f4;
  }
  .profile .price {
    font-size:1rem;
  }
  .portfolio .ui-list-box {
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }
  .portfolio .ui-list-box > li:nth-child(n+29) {
    display:none;
  }
}