
.adspecial_type1 h1, .adspecial_type1 h2, .adspecial_type1 h3, .adspecial_type1 h4, .adspecial_type1 h5, .adspecial_type1 h6 {
display:block;
}
.adspecial_type1 {
  margin: 20px auto;
  max-width: none !important;
}

body {
    background-image: repeating-radial-gradient(ellipse at center, rgba(204,204,204,.5) 0%,rgba(204,204,204,.5) 49%,rgba(204,204,204,0) 49%,rgba(204,204,204,0) 100%);
    background-size: 3px 3px;
    background-position: top left;
}


#adspecial_commscope_202104.adspecial_type1 .frame_col_left #block_story.article_body {
position: relative;
width: 800px;
margin: 0 auto 80px;
  padding: 48px 24px;
  border: 1px solid #eee;
  background: #fff;
}
#adspecial_commscope_202104.adspecial_type1 .frame_col_left #block_story.article_body::before {
  content: "";
  display: block;
  width: 100%;
  height: 8px;
  position: absolute;
  top: 0;
  left: 0;
    background-image: linear-gradient(to right, #ef6623 0%,#ffc012 100%);
}


footer {margin: 0;}


.adspecial_type1 {
  margin-top: 0;
  padding-top: 20px;
}





#adspecial_commscope_202104 {
  padding: 0;
}


.adspecial_type1 .frame_header {
  position: relative;
  margin-bottom: 160px;
  text-align: left;
  height: 400px;
    background-image: linear-gradient(to right, #ef6623 0%,#ffc012 100%);
}
.adspecial_type1 .frame_header::before {
  content: "";
  display: block;
  width: 600px;
  height: 100%;
  position: absolute;
  z-index: 3;
  right: 24px;
  background: url(/extra/commscope_202104/media/head_title3.jpg) no-repeat center center;
  background-size: cover;
  animation: fadeup .6s linear .8s 1 forwards, shadow .6s ease-out 1.2s 1 forwards;
  opacity: 0; 
  top: 120px;
  box-shadow: 0 0 0 rgba(255,192,18,0);
}

@keyframes fadeup {
  0% {opacity: 0; top: 120px;}
  100% {opacity: 1; top: 80px; }
}
@keyframes shadow {
  0% {box-shadow: 0 0 0 rgba(255,192,18,0);}
  100% {box-shadow: -32px 32px 0 rgba(255,192,18,1);}
}


.adspecial_type1 .frame_header::after {
  content: "";
  display: block;
  width: 48px;
  height: 130%;
  position: absolute;
  top: 0;
  right: 5%;
  transform: skewX(-60deg);
  transform-origin: top right;
    background-image: repeating-radial-gradient(ellipse at center, #ffc012 0%,#ffc012 49%,transparent 49%,transparent 100%);
    background-size: 3px 3px;
    background-position: top left;
    box-shadow: -120px -80px 0 rgba(255,192,18, .3) , -240px -160px 0 rgba(255,255,255, .1) , -900px -360px 0 rgba(255,255,255, .1) ;

}

#adspecial_commscope_202104.adspecial_type1 h1.adspecial {
  position: relative;
  z-index: 5;
  display: flex;
  align-items: center;
  height: 100%;
  margin-left: 5%;
  color: #fff;
  font-size: 2.5rem;
  line-height: 1.3;
  font-feature-settings: "palt" 1;
  text-shadow: 0 0 5px #ef6623;
  animation: slide .4s linear .5s 1 forwards;
  opacity: 0; 
  left: -50px;
}

@keyframes slide {
  0% {opacity: 0; left: -50px;}
  100% {opacity: 1; left: 0;}
}


#adspecial_commscope_202104.adspecial_type1 h2.adspecial {
position: relative;
padding: 16px 16px 8px 48px;
color: #444;
}
#adspecial_commscope_202104.adspecial_type1 h2.adspecial::before {
  content: "";
  display: block;
  width: 100%;
  height: 8px;
  position: absolute;
  top: 0;
  left: 0;
    background-image: linear-gradient(to right, #ef6623 0%,#ffc012 100%);
}
#adspecial_commscope_202104.adspecial_type1 h2.adspecial::after {
  content: "";
  position: absolute;
  top: 0;
  left: 24px;
  display: block;
  width: 16px;
  height: 50%;
  background-image: linear-gradient(to bottom, #ef6623 0%,#ffc012 100%);
  box-shadow: -24px -16px 0 #ffc012;
  transform: skewX(-60deg);
}

#adspecial_commscope_202104.adspecial_type1 .frame_col_left #block_story p {
  line-height: 1.8em;
  text-indent: 1rem;
}

#adspecial_commscope_202104.adspecial_type1 .frame_col_left #block_story p {
  margin: 1em 10px;
  font-size: 16px;
}


.inquiry {
  position: relative;
  margin-top: 48px;
}
.inquiry::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 4px;
  background-image: linear-gradient(90deg,#272ba7 0%,#0071bb 100%);
}
.inquiry h3 {color: #0071bb;}
.inquiry li {margin-bottom: 8px !important;}


.wp-btm {
  padding: 80px 48px;
  background-image: linear-gradient(to right, #ef6623 0%,#ffc012 100%);
}
.wp-btm h3{
  margin-bottom: 24px;
  color: #fff;
  font-size: 2rem;
  text-align: center;
}

.wp-lineup {
  display: flex;
  flex-wrap: wrap;
  justify-content: center; 
}

.wp-item {
  width: calc(20% - 8px);
  margin: 0 4px 24px;
  background: #fff;
}
.wp-item:hover {
  box-shadow: 0 4px 8px #444;
}
.wp-thumb {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 172px;
  padding: 8px;
  background: #333;
}
.wp-thumb img {
  max-height: 160px;
  max-width: 100%;
  opacity: .7;
}
.wp-item:hover .wp-thumb img {opacity: 1;}
.wp-title {padding: 16px;}




#adspecial_commscope_202104.adspecial_type1 .block_sponsored {
  clear: both;
  border: 1px solid #ccc;
  padding: 5px 10px;
  text-align: center;
  background: #fff;
}



@media screen and (max-width: 960px) {
  #adspecial_commscope_202104.adspecial_type1,
  #adspecial_commscope_202104.adspecial_type1 .frame_col_right_container,
  #adspecial_commscope_202104.adspecial_type1 .frame_col_left_container,
  #adspecial_commscope_202104.adspecial_type1 .frame_col_left,
  #adspecial_commscope_202104.adspecial_type1 .frame_col_right {
    width: auto !important;
    float: none;
  }
  #adspecial_commscope_202104.adspecial_type1 .article_body .left,
  #adspecial_commscope_202104.adspecial_type1 .article_body .right,
  #adspecial_commscope_202104.adspecial_type1 .article_body .center {
    float: none;
    max-width: 100%;
    text-align: center;
  }
  #adspecial_commscope_202104.adspecial_type1 img {
    display: block;
    width: auto !important;
    max-width: 100% !important;
    height: auto;
    margin: 0 auto 10px;
  }

  #adspecial_commscope_202104.adspecial_type1 .frame_col_left #block_story.article_body {
  width: auto;
  margin: 0 16px 40px;
  padding: 24px 16px;
}

  .adspecial_type1 .frame_header::before {
    width: 480px;
    height: 320px;
    top: auto;
    right: 0;
    bottom: -48px;
    box-shadow: 0 0 0 rgba(255,192,18,0);
    animation: sp-fadeup .6s linear .8s 1 forwards, sp-shadow .6s ease-out 1.2s 1 forwards;
  }

@keyframes sp-fadeup {
  0% {opacity: 0; bottom: -48px;}
  100% {opacity: 1; bottom: -24px; }
}
@keyframes sp-shadow {
  0% {box-shadow: 0 0 0 rgba(255,192,18,0);}
  100% {box-shadow: -16px 16px 0 rgba(255,192,18,1);}
}

  #adspecial_commscope_202104.adspecial_type1 h1.adspecial {
    height: 6em;
  }
  .wp-btm {padding: 40px 16px;}
  .wp-item {
    width: calc(33.3% - 8px); 
 }
  .wp-thumb img {margin-bottom: 0 !important;}
}


@media screen and (max-width: 640px) {
  .adspecial_type1 .frame_header {margin-bottom: 80px;}
  #adspecial_commscope_202104.adspecial_type1 h1.adspecial {
    font-size: 2rem;
  }

  .wp-item {
    width: calc(50% - 8px); 
 }
}


@media screen and (max-width: 480px) {
  .adspecial_type1 .frame_header::before {
    width: 300px;
    height: 200px;
  }
  .wp-btm h3 {font-size: 1.25rem;}
  .wp-item {
    width: calc(100% - 8px); 
 }
}

