@charset "UTF-8";

.seo-content {
  padding: 3rem;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 10px;
  box-shadow: 2px 3px 6px 0px rgb(0 0 0 / 13%);
  -webkit-box-shadow: 2px 3px 6px 0px rgb(0 0 0 / 13%);
  -moz-box-shadow: 2px 3px 6px 0px rgb(0 0 0 / 13%);
}
.seo-main-box h1 {font-size: 2rem; font-weight: bold; text-align: center; margin: 4rem 0 1.5rem;}
.seo-main-box h2 {font-size: 2rem; font-weight: bold; text-align: center; margin: 4rem 0 1.5rem;}
.seo-main-box h3 {font-size: 20px; font-weight: bold; margin: 1rem 0 0.5rem;}
.seo-top-p {margin-bottom: 1rem; padding-bottom: 1rem; width: 69%;}
.seo-main-box p {background: #eee; border-radius: 5px; padding: 1rem;}


.seo-content-top {position: relative; overflow: hidden;}
.seo-top-textbox, .seo-sub-textbox {position: relative; z-index: 2;}

.seo-content-top img {position: absolute; top:0; left: 0; width: 100%; height: 100%; z-index: 1;}

.seo-top-textbox p {background: linear-gradient(230deg, #d5d5d5b0, #ffffff);}

.seo-content-sub2 {position: relative; z-index: 2;}
.sub_2_img {position: absolute; top:-82px; right: -28px; z-index: 1; max-width: 34%;}
.sub_3_img {position: absolute; top:-130px; right: 0; z-index: 1; opacity: 0.4;}
.sub_4_img {position: absolute; top:-119px; right: 52px; z-index: 1; width: 18%;}
.sub_5_img {position: absolute; top: 0; left: 0; width: 100%; opacity: 0.5;}


@media all and (max-width:767px) {
  .seo-content {padding: 1.3rem; overflow: hidden;}
  .seo-main-box h2 {font-size: 1.1rem;}
  .seo-main-box h3 {font-size: 1rem;}
  .seo-top-p {width: 100%;}
  .seo-main-box p {background: #eeeeee7a;}
  .seo-content-top img {height: unset; width: unset;}
  .sub_2_img {top:0;right:0; opacity: 0.4;}
  .sub_3_img { top: 0; width: 50%;}
  .sub_4_img {opacity: 0.3; width: 40%; top: 0; right: 0;}
  .sub_5_img {width: unset; left: -50%; opacity: 0.4}
}

@media all and (max-width:480px) {
  .seo-content-top {background: #e7eff2;}
  .seo-content-top img {height: unset; width: unset; top:4%; left: -100%;}
}