862 lines
16 KiB
SCSS
862 lines
16 KiB
SCSS
@charset "utf-8";
|
||
|
||
@import "../initial";
|
||
|
||
//
|
||
// Widget
|
||
//
|
||
|
||
// Widget
|
||
// ## gerenral styles
|
||
.ba-banner-widget-youtube{
|
||
overflow: hidden;
|
||
height: auto !important;
|
||
.banner-overlay{
|
||
@media(max-width:768px){
|
||
position: relative;
|
||
}
|
||
}
|
||
}
|
||
.w-ba-banner {
|
||
position: relative;
|
||
.banner-overlay{
|
||
color: #fff;
|
||
// background-color: rgba($theme-color-second, 0.8);
|
||
text-shadow: 2px 3px 2px #000000;
|
||
background-image: linear-gradient(
|
||
180deg,
|
||
rgba($theme-color-second, 0) 0,
|
||
rgba($theme-color-second, 0.6) 40%,
|
||
rgba($theme-color-second, 1)
|
||
);
|
||
@media(max-width:768px){
|
||
background-color:$theme-color-second;
|
||
background-image:unset;
|
||
}
|
||
}
|
||
}
|
||
.w-ba-banner .controlplay .resume-slide.active i {
|
||
color: $theme-color-second!important;
|
||
}
|
||
.w-ba-banner__caption h3 {
|
||
font-size: 2em;
|
||
@media(max-width:768px){
|
||
font-size: 1.8em;
|
||
}
|
||
}
|
||
ul.button-mid{
|
||
.prev-button{
|
||
height: 2em !important;
|
||
width: 2em !important;
|
||
font-size: 1em !important;
|
||
line-height: 2rem !important;
|
||
border-radius: 1em;
|
||
&:hover {
|
||
background: rgba(0,0,0,0.1);
|
||
}
|
||
}
|
||
.next-button{
|
||
height: 2em !important;
|
||
width: 2em !important;
|
||
font-size: 1em !important;
|
||
line-height: 2rem !important;
|
||
border-radius: 1em;
|
||
&:hover {
|
||
background: rgba(0,0,0,0.1);
|
||
}
|
||
}
|
||
}
|
||
ul.button-mid{
|
||
margin:0;
|
||
}
|
||
.banner-pager .active-slide button{
|
||
background: $theme-color-second!important;
|
||
}
|
||
.button-mid {
|
||
position: absolute;
|
||
width: 100%;
|
||
height: 0;
|
||
top: 50%;
|
||
z-index: 201;
|
||
}
|
||
.next-button, .prev-button {
|
||
cursor: pointer;
|
||
}
|
||
iframe{
|
||
border: none;
|
||
}
|
||
.jp-video{
|
||
border:0;
|
||
}
|
||
.w-ba-banner {
|
||
position: relative;
|
||
width: 100%;
|
||
.cursor {
|
||
cursor: pointer;
|
||
}
|
||
.w-ad-banner__caption{
|
||
@media(max-width:768px){
|
||
h3{
|
||
margin-top: 0;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.w-ba-banner__wrap {
|
||
width: 100%;
|
||
max-width: 100%;
|
||
height: auto;
|
||
}
|
||
|
||
.w-ba-banner__slide {
|
||
width: 100%;
|
||
}
|
||
.ad-overlay {
|
||
font-family: $main-font;
|
||
width: 100%;
|
||
bottom: 0;
|
||
@media(max-width: $screen-sm) {
|
||
padding: 0.5em 1em;
|
||
}
|
||
}
|
||
|
||
.banner-pager {
|
||
@include list-reset;
|
||
position: absolute;
|
||
bottom: 0.5rem!important;
|
||
z-index: 100;
|
||
text-align:center;
|
||
width: 100%;
|
||
li {
|
||
|
||
// height: 3px;
|
||
// width: 4%;
|
||
// margin: 0 2px;
|
||
cursor: pointer;
|
||
display: inline-block;
|
||
width:auto!important;
|
||
}
|
||
|
||
button {
|
||
background: #ccc !important;
|
||
display: inline-block;
|
||
margin-right: 0.25em;
|
||
width: 0.8em !important;
|
||
height: 0.8em !important;
|
||
border-radius: 50%;
|
||
opacity: .5;
|
||
cursor: pointer;
|
||
border: 0;
|
||
}
|
||
.active-slide button {
|
||
opacity: 1;
|
||
background: $theme-color-green;
|
||
}
|
||
a {
|
||
background: white;
|
||
display: inline-block;
|
||
margin-right: 0.25em;
|
||
width: 0.8em;
|
||
height: 0.8em;
|
||
border-radius: 50%;
|
||
//behavior: url("/assets/ie_support/PIE2/PIE.htc");
|
||
opacity: .5;
|
||
cursor:pointer;
|
||
border:0;
|
||
}
|
||
.active-slide a {
|
||
opacity: 1;
|
||
}
|
||
}
|
||
|
||
.controlplay{
|
||
position: absolute;
|
||
right: 1em;
|
||
top: 3%;
|
||
z-index:101;
|
||
a {
|
||
display: inline-block;
|
||
margin-right: 0.25em;
|
||
cursor: pointer;
|
||
padding: 5px 10px;
|
||
border: 1px solid rgba(255, 255, 255, 0.5);
|
||
background: rgba(0, 0, 0, 0.2);
|
||
|
||
i {
|
||
font-family: FontAwesome;
|
||
position: relative;
|
||
font-size: 1rem;
|
||
line-height: 1;
|
||
color: #FFF;
|
||
vertical-align: middle;
|
||
font-style: unset;
|
||
}
|
||
}
|
||
.resume-slide i::before{
|
||
content:"\f04b"
|
||
}
|
||
.pause-slide i::before{
|
||
content:"\f04c"
|
||
}
|
||
@media(max-width: $screen-sm) {
|
||
a { padding: 0 5px;}
|
||
a i { font-size: 0.75em; }
|
||
}
|
||
}
|
||
|
||
ul.button-mid{
|
||
.prev-button{
|
||
transition: 0.4s;
|
||
position: relative;
|
||
float:left;
|
||
left: 0.5rem;
|
||
width: 2.5rem;
|
||
height: 2.5rem;
|
||
font-size: 1.5rem;
|
||
border-radius: 1em;
|
||
color: #ffffff;
|
||
background: rgba(0,0,0,0.2);
|
||
text-align: center;
|
||
line-height: 2.5rem;
|
||
top: 50%;
|
||
position: absolute;
|
||
transform: translateY(-50%);
|
||
z-index: 200;
|
||
|
||
&:hover {
|
||
background: rgba(0,0,0,0.1);
|
||
}
|
||
}
|
||
.next-button{
|
||
float: right;
|
||
transition: 0.4s;
|
||
position: relative;
|
||
right: 0.5rem;
|
||
width: 2.5rem;
|
||
height: 2.5rem;
|
||
font-size: 1.5rem;
|
||
border-radius: 1em;
|
||
color: $theme-white;
|
||
background: rgba(0,0,0,0.2);
|
||
text-align: center;
|
||
line-height: 2.5rem;
|
||
top: 50%;
|
||
position: absolute;
|
||
transform: translateY(-50%);
|
||
z-index: 200;
|
||
&:hover {
|
||
background: rgba(0,0,0,0.1);
|
||
}
|
||
}
|
||
}
|
||
|
||
.banner-responsive {
|
||
width: 100%;
|
||
}
|
||
|
||
.background-overlay{
|
||
background-color: #F5F5F5;
|
||
opacity: 0.95;
|
||
transition: background 0.3s, border-radius 0.3s, opacity 0.3s;
|
||
height: 100%;
|
||
top: 0;
|
||
left: 0;
|
||
z-index: 100;
|
||
position: absolute;
|
||
width: 100%;
|
||
}
|
||
// Widget 0
|
||
.ba-banner-widget-0 {
|
||
height: 100vh !important;
|
||
z-index: 0;
|
||
.w-ba-banner__wrap{
|
||
height: 100vh !important;
|
||
}
|
||
.youtube, .cycle-youtube {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
object, embed {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
.banner-pager {
|
||
right: 1em;
|
||
top: -2em;
|
||
z-index: 100;
|
||
display: none;
|
||
}
|
||
.button-mid{
|
||
z-index: 101;
|
||
}
|
||
.ad-overlay{
|
||
text-align: center;
|
||
position: relative;
|
||
background: none;
|
||
color: #fff;
|
||
z-index: 100;
|
||
padding-left: 10%;
|
||
padding-right: 10%;
|
||
// p{
|
||
// background-color: rgba($theme-color-second, 0.8);
|
||
// border-radius: 1em;
|
||
// padding: 1em;
|
||
// }
|
||
// text-shadow: 1px 1px 1px #0000008c;
|
||
}
|
||
img{
|
||
position: fixed;
|
||
top:0;
|
||
left: 0;
|
||
@media(max-width: 1500px){
|
||
// width: auto;
|
||
max-width: unset;
|
||
// transform: translateX(-9%);
|
||
height: 100vh;
|
||
}
|
||
}
|
||
&,& .jp-jplayer{
|
||
@media(min-width:1801px){
|
||
.ad-overlay{
|
||
bottom: 50%;
|
||
position: absolute;
|
||
}
|
||
}
|
||
@media screen and (min-width:1451px) and (max-width:1800px){
|
||
.ad-overlay{
|
||
bottom: 50%;
|
||
position: absolute;
|
||
}
|
||
}
|
||
@media screen and (min-width:1281px) and (max-width:1450px){
|
||
.ad-overlay{
|
||
bottom: 50%;
|
||
position: absolute;
|
||
}
|
||
}
|
||
@media screen and (min-width:1026px) and (max-width:1280px){
|
||
.ad-overlay{
|
||
bottom: 40%;
|
||
position: absolute;
|
||
}
|
||
}
|
||
@media screen and (min-width:$screen-xs) and (max-width:1025px){
|
||
.ad-overlay{
|
||
bottom: 40%;
|
||
position: absolute;
|
||
}
|
||
}
|
||
@media(max-width: $screen-xs){
|
||
.ad-overlay{
|
||
top: 35%;
|
||
position: absolute;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
// Widget 1
|
||
.ad-banner-widget-1 {
|
||
.banner-overlay{
|
||
padding: 3.5em 5em;
|
||
position: absolute;
|
||
z-index: 100;
|
||
color: #fff;
|
||
}
|
||
.w-ba-banner__caption {
|
||
|
||
h2{
|
||
font-size: 2.2em;
|
||
}
|
||
h3{
|
||
font-size: 2em;
|
||
}
|
||
h4{
|
||
font-size: 1.5em;
|
||
}
|
||
|
||
p {
|
||
font-family: $main-font;
|
||
font-size: $w-caption-desc;
|
||
}
|
||
}
|
||
@media(max-width: $screen-sm) {
|
||
.ad-overlay {
|
||
padding:1em;
|
||
position: relative;
|
||
background: $theme-color-second!important;
|
||
}
|
||
.controlplay {
|
||
right: 0;
|
||
a { padding: 0 5px;}
|
||
a i { font-size: 0.75em; }
|
||
}
|
||
}
|
||
}
|
||
// Widget 11
|
||
.ad-banner-widget-11 {
|
||
overflow: hidden;
|
||
border-radius: 2em;
|
||
.prev-button,.next-button{
|
||
background-color: $theme-color-second!important;
|
||
&:hover{
|
||
background: rgba(0, 0, 0, 0.45) !important;
|
||
}
|
||
}
|
||
.banner-overlay{
|
||
padding: 3.5em 5em;
|
||
background-image: linear-gradient(
|
||
180deg,
|
||
rgba($theme-color-second, 0) 0,
|
||
rgba($theme-color-second, 0.6) 40%,
|
||
rgba($theme-color-second, 1)
|
||
) !important;
|
||
position: absolute;
|
||
z-index: 100;
|
||
color: #fff;
|
||
text-shadow: 2px 3px 2px #000000;
|
||
}
|
||
.w-ba-banner__caption {
|
||
|
||
h2{
|
||
font-size: 2.2em;
|
||
}
|
||
h3{
|
||
font-size: 2em;
|
||
}
|
||
h4{
|
||
font-size: 1.5em;
|
||
}
|
||
|
||
p {
|
||
font-family: $main-font;
|
||
font-size: $w-caption-desc;
|
||
}
|
||
}
|
||
@media(max-width: $screen-sm) {
|
||
.ad-overlay {
|
||
padding:1em;
|
||
position: relative;
|
||
background-color: $theme-color-second!important;
|
||
}
|
||
.controlplay {
|
||
right: 0;
|
||
a { padding: 0 5px;}
|
||
a i { font-size: 0.75em; }
|
||
}
|
||
}
|
||
}
|
||
// Widget 2
|
||
.ba-banner-widget-2 {
|
||
.w-ba-banner__image {
|
||
width: 100%;
|
||
height: auto;
|
||
}
|
||
|
||
.youtube, .cycle-youtube {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
object, embed {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
|
||
// Widget 3
|
||
.ba-banner-widget-3 {
|
||
.banner-pager .active-slide a {
|
||
background: $theme-color-second !important;
|
||
}
|
||
|
||
.w-ba-banner__wrap {
|
||
width: 100%;
|
||
}
|
||
|
||
.w-ba-banner__slide {
|
||
width: 100%;
|
||
position: relative;
|
||
}
|
||
|
||
.banner-pager {
|
||
right: 0;
|
||
bottom: 2em;
|
||
li { height: unset; width: unset; }
|
||
}
|
||
ul.button-mid { display: none; }
|
||
}
|
||
|
||
//Widget 4
|
||
.ba-banner-widget-4 {
|
||
.w-ba-banner__wrap {
|
||
text-align: center;
|
||
// img { margin-bottom: 0.5rem; }
|
||
}
|
||
|
||
}
|
||
|
||
|
||
|
||
//Widget 5
|
||
.ba-banner-widget-5 {
|
||
margin: 1em 0;
|
||
.w-ba-banner__wrap{
|
||
display: flex;
|
||
}
|
||
.slide-img {
|
||
padding: 0;
|
||
}
|
||
.slide-content {
|
||
z-index: 200;
|
||
font-family: $main-font;
|
||
padding: 1em 7em 1em 1em;
|
||
|
||
h3 {
|
||
font-size: 1rem;
|
||
margin: 0.5em 0;
|
||
color: #12517a;
|
||
}
|
||
|
||
div {
|
||
white-space: normal;
|
||
word-break: break-all;
|
||
font-size: 1rem;
|
||
color: #373634;
|
||
}
|
||
}
|
||
.banner-pager {
|
||
li { height: unset; width: unset; }
|
||
a { background: $theme-color-second;}
|
||
}
|
||
|
||
@media(max-width: $screen-sm) {
|
||
.slide-content {
|
||
padding: 0.5em 1em;
|
||
position: relative;
|
||
background: $theme-color-second;
|
||
h3 { font-size: 1em; }
|
||
div { font-size: 0.75em; }
|
||
}
|
||
.controlplay {
|
||
right: 0;
|
||
a { padding: 0 5px;}
|
||
a i { font-size: 0.75em; }
|
||
}
|
||
}
|
||
@media(max-width: $screen-sm) {
|
||
ul.button-mid.next-button, ul.button-mid.prev-button{
|
||
top: 35%;
|
||
transform: translateY(-35%);
|
||
}
|
||
.slide-content h3, .slide-content div { color: $theme-white; }
|
||
.w-ba-banner__wrap { overflow: visible;}
|
||
}
|
||
}
|
||
// Widget 6
|
||
.ba-banner-widget-6 {
|
||
position: relative;
|
||
overflow: hidden;
|
||
@media(max-width:768px){
|
||
display: flex;
|
||
flex-wrap: wrap-reverse;
|
||
}
|
||
@media(min-width:1024px){
|
||
display: flex;
|
||
flex-direction: row-reverse;
|
||
.w-ba-banner__wrap{
|
||
flex: 0 0 60%;
|
||
}
|
||
.ad-overlay{
|
||
position: relative;
|
||
background: none;
|
||
}
|
||
.banner-overlay{
|
||
padding:2em 1em;
|
||
background-image:unset;
|
||
}
|
||
background-color:$theme-color-second;
|
||
}
|
||
.w-ba-banner__caption {
|
||
color: #fff;
|
||
}
|
||
@media(max-width:$screen-xs){
|
||
height:auto!important;
|
||
}
|
||
@media (max-width: 769px){
|
||
.ad-overlay, .banner-overlay {
|
||
padding: 0.5em 1em;
|
||
}
|
||
}
|
||
|
||
}
|
||
// Widget 7
|
||
.ba-banner-widget-7 {
|
||
position: relative;
|
||
overflow: hidden;
|
||
@media(min-width:1024px){
|
||
display: flex;
|
||
flex-direction: row-reverse;
|
||
.w-ba-banner__wrap{
|
||
flex: 0 0 60%;
|
||
}
|
||
.ad-overlay{
|
||
position: relative;
|
||
background: none;
|
||
background-image:unset;
|
||
}
|
||
.banner-overlay{
|
||
padding:2em 1em;
|
||
}
|
||
background-color:$theme-color-second;
|
||
}
|
||
.w-ba-banner__caption {
|
||
color: #fff;
|
||
}
|
||
@media(max-width:$screen-xs){
|
||
height:auto!important;
|
||
}
|
||
@media (max-width: 769px){
|
||
.ad-overlay, .banner-overlay {
|
||
padding: 0.5em 1em;
|
||
}
|
||
}
|
||
|
||
}
|
||
// widget8
|
||
.ba-banner-widget-8 {
|
||
position: relative;
|
||
.banner-overlay{
|
||
background:$theme-color-second;
|
||
}
|
||
|
||
// ✅ mp4 jPlayer 修正：讓 jplayer_slide 有固定高度，不繼承 wrap 的 padding-bottom 0
|
||
.jplayer_slide {
|
||
height: 100% !important;
|
||
|
||
.jp-video,
|
||
.jp-type-single,
|
||
.jp-gui,
|
||
.jp-video-play,
|
||
.jp-jplayer {
|
||
height: 100% !important;
|
||
width: 100% !important;
|
||
}
|
||
|
||
// 移除 jPlayer 預設的 padding-bottom 留給控制列的空間（carousel 模式不需要）
|
||
.jp-video-play,
|
||
.jp-jplayer {
|
||
padding-bottom: 0 !important;
|
||
}
|
||
|
||
// 控制列改用 absolute 貼底
|
||
.jp-interface {
|
||
position: absolute;
|
||
bottom: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: auto;
|
||
background: rgba(0, 0, 0, 0.5);
|
||
}
|
||
}
|
||
|
||
.w-ba-banner__slide {
|
||
padding: 0.5em;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.banner-overlay {
|
||
text-align: center;
|
||
width: 100%;
|
||
visibility: unset !important;
|
||
overflow: hidden;
|
||
|
||
h3 {
|
||
display: -webkit-box;
|
||
-webkit-line-clamp: 1;
|
||
-webkit-box-orient: vertical;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: pre-line;
|
||
}
|
||
|
||
h3, p {
|
||
font-size: 1.25em;
|
||
}
|
||
|
||
p {
|
||
padding: 0 0.2em;
|
||
display: -webkit-box;
|
||
-webkit-line-clamp: 2;
|
||
-webkit-box-orient: vertical;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: normal;
|
||
}
|
||
}
|
||
}
|
||
// widget9
|
||
.ba-banner-widget-9{
|
||
iframe{
|
||
border-radius: 2em;
|
||
border:1px solid #fff;
|
||
padding: 10px;
|
||
background: #4cae4c8c;
|
||
&:hover{
|
||
transform: translate(-10px, -10px);
|
||
transition: .5s;
|
||
box-shadow: 30px 30px 60px #0000008a;
|
||
}
|
||
}
|
||
&::before{
|
||
position: absolute;
|
||
content: '';
|
||
width: 60%;
|
||
height: 100%;
|
||
background: linear-gradient(to right, $theme-color-second 0%, #03162700 100%);
|
||
display: block;
|
||
z-index: 100;
|
||
@media(max-width:768px){
|
||
}
|
||
}
|
||
height: 90vh !important;
|
||
.w-ba-banner__slide{
|
||
-webkit-filter: brightness(50%);
|
||
filter: brightness(50%);
|
||
position: fixed!important;
|
||
}
|
||
.w-ba-banner__wrap{
|
||
height: 90vh !important;
|
||
}
|
||
.jp-jplayer{
|
||
position: fixed;
|
||
}
|
||
.jp-video{
|
||
height: 90vh !important;
|
||
}
|
||
.banner-overlay{
|
||
background: none!important;
|
||
z-index:100;
|
||
position: absolute;
|
||
@media(min-width:769px){
|
||
padding-bottom: 24vh!important;
|
||
}
|
||
@media(max-width: 768px){
|
||
position: absolute!important;
|
||
padding-bottom:16vh !important;
|
||
}
|
||
}
|
||
.banner-overlay{
|
||
color: #fff;
|
||
padding: 3.5em 5em;
|
||
background-image: linear-gradient(180deg, transparent 0, #00000066 40%, #000000a3);
|
||
.ad-overlay2{
|
||
margin: 0 3em;
|
||
}
|
||
}
|
||
.w-ba-banner__caption {
|
||
|
||
h2 {
|
||
font-family: $main-font;
|
||
font-size: $w-caption-font-size;
|
||
margin: 0.5em 0;
|
||
}
|
||
|
||
p {
|
||
font-family: $main-font;
|
||
font-size: $w-caption-desc;
|
||
}
|
||
}
|
||
@media(max-width: $screen-sm) {
|
||
.ad-overlay {
|
||
padding:1em;
|
||
position: relative;
|
||
background: #333333;
|
||
}
|
||
.controlplay {
|
||
right: 0;
|
||
a { padding: 0 5px;}
|
||
a i { font-size: 0.75em; }
|
||
}
|
||
}
|
||
}
|
||
//Widget 10
|
||
.ba-banner-widget-10 {
|
||
margin-bottom: 1em;
|
||
.w-ad-banner__caption{
|
||
padding: 2em 1em;
|
||
background-image: linear-gradient(180deg, transparent 0, #00000066 40%, #000000a3);
|
||
position: absolute;
|
||
width: 100%;
|
||
bottom: 0;
|
||
color: #fff;
|
||
@extend .i-title;
|
||
}
|
||
.w-ba-banner__wrap {
|
||
text-align: center;
|
||
|
||
@media(min-width: $screen-sm){
|
||
display: grid;
|
||
grid-template-areas:
|
||
"g1 g2 g3"
|
||
"g1 g4 g5";
|
||
grid-gap: 2% 1%;
|
||
}
|
||
.bannerimgwrapper{
|
||
overflow: hidden;
|
||
position: relative;
|
||
display: block;
|
||
@media(max-width: $screen-sm){
|
||
margin-bottom: 1em;
|
||
}
|
||
&:hover{
|
||
img{
|
||
transform: scale(1.1) !important;
|
||
-webkit-transition: .3s ease-out;
|
||
-moz-transition: .3s ease-out;
|
||
-ms-transition: .3s ease-out;
|
||
-o-transition: .3s ease-out;
|
||
transition: .3s ease-out;
|
||
}
|
||
}
|
||
&:nth-child(1){
|
||
grid-area: g1;
|
||
-ms-grid-row: 1;
|
||
-ms-grid-column: 1;
|
||
-ms-grid-row-span: 3;
|
||
-ms-grid-column-span: 7;
|
||
}
|
||
&:nth-child(2){
|
||
grid-area: g2;
|
||
-ms-grid-row: 1;
|
||
-ms-grid-column: 9;
|
||
-ms-grid-row-span: 1;
|
||
-ms-grid-column-span: 7;
|
||
}
|
||
&:nth-child(3){
|
||
grid-area: g3;
|
||
-ms-grid-row: 1;
|
||
-ms-grid-column: 17;
|
||
-ms-grid-row-span: 1;
|
||
-ms-grid-column-span: 7;
|
||
}
|
||
&:nth-child(4){
|
||
grid-area: g4;
|
||
-ms-grid-row: 3;
|
||
-ms-grid-column: 9;
|
||
-ms-grid-row-span: 1;
|
||
-ms-grid-column-span: 7;
|
||
}
|
||
&:nth-child(5){
|
||
grid-area: g5;
|
||
-ms-grid-row: 3;
|
||
-ms-grid-column: 17;
|
||
-ms-grid-row-span: 1;
|
||
-ms-grid-column-span: 7;
|
||
}
|
||
}
|
||
}
|
||
|
||
} |