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

516 lines
13 KiB
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;
padding: 0;
margin: 0 0 1em 0;
@media(max-width: $screen-sm){
width: 90%;
height: auto;
margin: auto;
}
.w-event_news__img {
transition: all .5s ease-in-out;
position: relative !important;
transform: none !important;
max-width: none !important;
width: 100% !important;
height: 100% !important;
}
&:hover{
.w-event_news__img{
transform: scale(1.5) !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;
}
.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-sm){
height: 300px;
}
@media(max-width:$screen-sm){
margin-bottom: 1em;
}
}
.i-event_news__item{
margin-bottom: 6em;
@media(max-width:$screen-sm){
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: "";
}
}