AsiaMoma/assets/stylesheets/template/layout/content.scss

@charset "utf-8";

@import "../initial";
.homelayout-content{
  background: linear-gradient( 338deg, transparent 150px, #fff 0);
  -pie-background: linear-gradient( 338deg, transparent 150px, #fff 0);
  behavior: url("/assets/ie_support/PIE2/PIE.htc");
  filter: drop-shadow(0 5px 12px #00000080);
  @media(max-width:$screen-xs){
      background: #fff;
    }
     @media screen and (min-width:$screen-xs) and (max-width:769px){
      background: linear-gradient(
      338deg
      , transparent 76px, #fff 0);
          -pie-background: linear-gradient(338deg, transparent 150px, #fff 0);
      }
}
.layout-content {
  min-height: 37.5em;
  padding-top: 2em;
  margin-top: -1em;

  .container {
    @extend .response-container;
  }
}
.bigbg{
    min-height: 400px;
    color: #555;
    @media(max-width:$screen-xs){
      padding-bottom: 4em;
    }
}
.triangle3{
    border-color: transparent #fff #fff transparent;
    border-style: solid solid solid solid;
    filter: drop-shadow(0 5px 12px #00000080);
    border-width: 58px 164px;
    height: 0px;
    width: 0px;
    z-index: -1;
    border-width: 64px 190px;
    float: right;
    position: relative;
    margin-top: -2em;
    @media(max-width:$screen-xs){
      display: none;
    }
}
.w-event_news__widget-title{
    margin: 0.5em 0;
    font-size: 1rem;
}
.w-event_news__list{
  padding: 0;
  li{
    margin-bottom: 1.875em;
    border-bottom: 1px dashed #0000004d;
  }
}
.w-event_news__img-wrap{
      height: 200px;
      width: 200px;
      @media(max-width: $screen-xs){
        width: 300px;
        height: 300px;
        margin: auto;
      }
      margin: 0 0 1em 0;
      &:hover{

        .captiondetail{
          visibility: visible;
          opacity: 1;
          transition: opacity .5s ease-out;
        }
        .w-event_news__img{
              transform: scale(1.5,1.5);
              transition: all .5s;
        }
      }
}
.w-event_news__img{
  width: 200px!important;
  height: 200px!important;
  @media(max-width: $screen-xs){
    width: 300px!important;
    height: 300px!important;
  }
}
.w-event_news__img-wrap::before{
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  display: block;
  width: 1px;
  content: "";
  border-color: #fff transparent transparent transparent;
  border-style: solid;
  border-width: 40px 40px 0 0;
}
.captiondetail{
      width: 200px;
      height: 200px;
      position: absolute;
      left: 0;
      opacity: 0;
      background: #000000a6 url(/assets/hover.png) center center no-repeat;
      @media(max-width: $screen-xs){
        width: 300px;
        height: 300px;
      }
}
.index-event_news-5{
  img{
    width: 100%;
  }
  .captionshadow{
    overflow: hidden;
    box-sizing: border-box;
    padding: 30px;
    position: absolute;
    left: 0;
    background: #000000a6;
    opacity: 0;
    top: 0;
    .i-event_news__subtitle{
      color: #fff;
    }
  }
  .i-event_news__img-wrap{
    padding: 0;
    overflow: hidden;
    &:hover{
      .i-event_news__img{
            transform: scale(1.5,1.5);
            transition: all .5s;
                    height: 100%;
      }
      .captionshadow{
        visibility: visible;
        opacity: 1;
        transition: opacity .5s ease-out;
        width: 100%;
        height: 100%;
      }
    }
    @media(min-width:$screen-xs){
      height: 300px;
    }
    @media(max-width:$screen-xs){
      margin-bottom: 1em;
    }
  }
  .i-event_news__item{
        margin-bottom: 6em;
        @media(max-width:$screen-xs){
            margin-bottom: 6em;
          }
  }
  .i-event_news__list{
    padding: 0;
  }
}
.pagebk{
  top: 0%;
  z-index: 0!important;
  background: linear-gradient(338deg, transparent 142px, #fff 0);
  -pie-background: linear-gradient( 338deg, transparent 150px, #fff 0);
  // behavior: url("/assets/ie_support/PIE2/PIE.htc");
  filter: drop-shadow(0 5px 12px #00000080);
  height: 1124px;
  width: 100%;
  left: 0;
  bottom: 0;
  position: absolute;
  @media(min-width:1900px){
           height: 1112px;
        }
       @media screen and (min-width:1400px) and (max-width:1899px){
         height: 1040px;
       }
       @media screen and (min-width:1025px) and (max-width:1400px){
       height: 983px;
       background: linear-gradient(338deg, transparent 140px, #fff 0);
       -pie-background: linear-gradient(338deg, transparent 140px, #fff 0);
       behavior: url("/assets/ie_support/PIE2/PIE.htc");
       }
       @media screen and (min-width:769px) and (max-width:1025px){
       height: 901px;
       }
       @media screen and (min-width:$screen-xs) and (max-width:769px){
         height: 967px;
         background: linear-gradient(338deg, transparent 84px, #fff 0);
         -pie-background: linear-gradient(338deg, transparent 84px, #fff 0);
         behavior: url("/assets/ie_support/PIE2/PIE.htc");
       }
       @media screen and (max-width:$screen-xs){
         height: 1112px;
       }
       @media(max-width:$screen-xs){
           background: #fff;
         }
}
.pagebk2{
  top: 0%;
  z-index: 0!important;
  background: linear-gradient(338deg, transparent 142px, #fff 0);
  -pie-background: linear-gradient( 338deg, transparent 150px, #fff 0);
  // behavior: url("/assets/ie_support/PIE2/PIE.htc");
  filter: drop-shadow(0 5px 12px #00000080);
  height: 1124px;
  width: 100%;
  left: 0;
  bottom: 0;
  position: absolute;
  @media(min-width:1900px){
           height: 1300px;
        }
       @media screen and (min-width:1400px) and (max-width:1899px){
         height: 1300px;
       }
       @media screen and (min-width:1025px) and (max-width:1400px){
       height: 1250px;
       background: linear-gradient(338deg, transparent 140px, #fff 0);
       -pie-background: linear-gradient(338deg, transparent 140px, #fff 0);
       behavior: url("/assets/ie_support/PIE2/PIE.htc");
       }
       @media screen and (min-width:769px) and (max-width:1025px){
       height: 1200px;
       }
       @media screen and (min-width:$screen-xs) and (max-width:769px){
         height: 1200px;
         background: linear-gradient(338deg, transparent 84px, #fff 0);
         -pie-background: linear-gradient(338deg, transparent 84px, #fff 0);
         behavior: url("/assets/ie_support/PIE2/PIE.htc");
       }
       @media screen and (max-width:$screen-xs){
         height: 2000px;
       }
       @media(max-width:$screen-xs){
           background: #fff;
         }
}
.pagebk3{
  top:229%;
  z-index: 0!important;
  background: #fff;
  height: 4932px;
  width: 100%;
  left: 0;
  bottom: 0;
  position: absolute;
  @media(min-width:1900px){
           height: 5012px;
           top: 180%;
        }
       @media screen and (min-width:1400px) and (max-width:1899px){
             height: 4915px;
             top: 268%;
       }
       @media screen and (min-width:1025px) and (max-width:1400px){
       height: 4935px;
       top: 164%;
       }
       @media screen and (min-width:769px) and (max-width:1025px){
       height: 1200px;
       top: 168%;
       }
       @media screen and (min-width:$screen-xs) and (max-width:769px){
         top: 196%;
             height: 4030px;
       }
       @media(max-width:$screen-xs){
           background: #fff;
            height:12000px;
           top: 276%;
         }
}
.pagebk4{
  top: 0%;
  z-index: 0!important;
  background: linear-gradient(338deg, transparent 142px, #fff 0);
  -pie-background: linear-gradient( 338deg, transparent 150px, #fff 0);
  // behavior: url("/assets/ie_support/PIE2/PIE.htc");
  filter: drop-shadow(0 5px 12px #00000080);
  height: 1124px;
  width: 100%;
  left: 0;
  bottom: 0;
  position: absolute;
  @media(min-width:1900px){
           height: 1480px;
        }
       @media screen and (min-width:1400px) and (max-width:1899px){
         height: 1400px;
       }
       @media screen and (min-width:1025px) and (max-width:1400px){
       height: 1323px;
       background: linear-gradient(338deg, transparent 140px, #fff 0);
       -pie-background: linear-gradient(338deg, transparent 140px, #fff 0);
       behavior: url("/assets/ie_support/PIE2/PIE.htc");
       }
       @media screen and (min-width:769px) and (max-width:1025px){
       height:1315px;
       background: linear-gradient(
338deg
, transparent 83px, #fff 0);
-pie-background: linear-gradient(338deg, transparent 150px, #fff 0);
       }
       @media screen and (min-width:$screen-xs) and (max-width:769px){
         height: 1415px;
background: linear-gradient(
338deg
, transparent 44px, #fff 0);
       }
       @media screen and (max-width:$screen-xs){
         height:1672px;
       }
       @media(max-width:$screen-xs){
           background: #fff;
         }
}
.pagebk5{
  top: 0%;
  z-index: 0!important;
  background: linear-gradient(338deg, transparent 142px, #fff 0);
  -pie-background: linear-gradient( 338deg, transparent 150px, #fff 0);
  // behavior: url("/assets/ie_support/PIE2/PIE.htc");
  filter: drop-shadow(0 5px 12px #00000080);
  height: 1124px;
  width: 100%;
  left: 0;
  bottom: 0;
  position: absolute;
  @media(min-width:1900px){
           height:957px;
        }
       @media screen and (min-width:1400px) and (max-width:1899px){
         height:880px;
       }
       @media screen and (min-width:1025px) and (max-width:1400px){
       height:826px;
       background: linear-gradient(338deg, transparent 140px, #fff 0);
       -pie-background: linear-gradient(338deg, transparent 140px, #fff 0);
       behavior: url("/assets/ie_support/PIE2/PIE.htc");
       }
       @media screen and (min-width:769px) and (max-width:1025px){
       height:742px;
       }
       @media screen and (min-width:$screen-xs) and (max-width:769px){
         height: 802px;
         background: linear-gradient(338deg, transparent 84px, #fff 0);
         -pie-background: linear-gradient(338deg, transparent 84px, #fff 0);
         behavior: url("/assets/ie_support/PIE2/PIE.htc");
       }
       @media screen and (max-width:$screen-xs){
         height: 1200px;
       }
       @media(max-width:$screen-xs){
           background: #fff;
         }
}
.pagebk6{
  top:229%;
  z-index: 0!important;
  background: linear-gradient(338deg, transparent 142px, #fff 0);
  -pie-background: linear-gradient( 338deg, transparent 150px, #fff 0);
  height: 4932px;
  width: 100%;
  left: 0;
  bottom: 0;
  position: absolute;
  @media(min-width:1900px){
           height: 983px;
           top: 180%;
        }
       @media screen and (min-width:1400px) and (max-width:1899px){
             height: 992px;
             top: 172%;
       }
       @media screen and (min-width:1025px) and (max-width:1400px){
       height: 1025px;
       top: 164%;
       background: linear-gradient(
338deg
, transparent 63px, #fff 0);
       }
       @media screen and (min-width:769px) and (max-width:1025px){
       height: 990px;
       top: 168%;
       }
       @media screen and (min-width:$screen-xs) and (max-width:769px){
         top: 186%;
             height: 10405px;
             background: linear-gradient(
338deg
, transparent 38px, #fff 0);
       }
       @media(max-width:$screen-xs){
         height: 2131px;
         top: 260%;
         background: #fff;
         }
}
.triangle5{
  border-color: transparent #fff #fff transparent;
  border-style: solid solid solid solid;
  height: 0px;
  width: 0px;
  z-index: -1;
  border-width: 64px 190px;
  float: right;
  position: relative;
  margin-top: -8em;
  @media screen and (min-width:769px) and (max-width:1024px){
        border-width: 42px 108px;
        margin-top: -4em;
  }
  @media screen and (min-width:$screen-xs) and (max-width:769px){

  }
  @media(max-width:$screen-xs){
    display: none;
  }
}
.triangle4{
    border-color: transparent #fff #fff transparent;
    border-style: solid solid solid solid;
    filter: drop-shadow(0 5px 12px #00000080);
    border-width: 58px 164px;
    height: 0px;
    width: 0px;
    z-index: -1;
    border-width: 64px 190px;
    float: right;
    position: relative;
    margin-top: -8em;
    @media(max-width:$screen-xs){
      display: none;
    }
}
.w-event_news__more-wrap{
  float: left;
}
.main-content{
  .show-annc{
      display: flex;
      flex-wrap: wrap;
  }
}
.s-annc__show-title{
  width: 100%;
}
.s-annc__meta-wrap{
  width: 35%;
  @media(max-width: $screen-xs){
    width: 100%;
  }
}
.s-annc__post-wrap{
      width: 65%;
      @media(max-width: $screen-xs){
        width: 100%;
      }
}
.s-annc__show-title{
      font-size: 1.6rem!important;
}
.s-annc__show-title::before{
    margin: 0 15px 0 0;
    border-left: 4px solid rgba(0,0,0,1);
    content: "";
}
.page-module-title{
      text-align: center;
      clear: both;
}
.page-module-title::after{
  position: absolute;
left: 50%;
width: 36px;
height: 38px;
margin: 0px 0px 0px -18px;
border-bottom: 1px solid #000000;
content: "";
}
.wrapvisit{
  position: relative;
  padding: 0;
  width: 100%;
  @media(max-width: $screen-xs){
    .col-sm-3{
      padding: 0!important;
    }
    .col-sm-9{
      padding-right : 0!important;
      padding-left: 0!important;
      padding-top: 1em;
    }
    .col-sm-0{
      padding: 0!important;
    }
    .col-sm-12{
      padding: 0!important;
    }
    .col-sm-2{
      padding: 0!important;
    }
    .col-sm-8{
      padding: 0!important;
    }
  }
  .font_gray{
        padding: 7px 15px;
  }

}
.type{
  span::before{
    margin: 0px 15px 0px 0px;
    border-left: 4px solid #000000;
    content: "";
  }
}
.page-content-inner{
  padding-bottom: 3em;
}
.p_0{
  span::before{
    margin: 0 15px 0 0;
    border-left: 4px solid rgba(0,0,0,1);
    content: "";
  }
}