@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap');



/* フレーム設定 -------------------------------------------------------------------------------- */



#adspecial_salesforce_202406.adspecial_type1{
    position: relative;
}

.adspecial_type1{
    /*max-width: 1050px !important;*/
    max-width: 100% !important;
    width: 100% !important;
}

footer{
margin-top:0;
}


.block_sponsored {
padding: 10px;
}

.block_sponsored a{
color:#0097a2;
}

.block_sponsored img{
display:block;
margin:25px auto 0;
}


.content-wrap{
margin: 0 auto;
padding-bottom:40px;
background-color:#fff;
color:#333;
position:relative;
z-index:1;
font-family: Futura, 'Century Gothic', "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "游ゴシック Medium", "Yu Gothic Medium", YuGothicM, 游ゴシック体, YuGothic, メイリオ, Meiryo, sans-serif !important;
}



.pagetop {
display: none;
position: fixed !important;
bottom: 15px;
right: 15px;
padding:15px 20px;
color:#fff;
background-color:#252525;
transition:0.3s ease;
z-index:1001;
}

.pagetop:hover{
background-color:#ffb900;
color:#fff !important;
}



/* headline設定-------------------------------------------------------------------------------- */


.header-area{
/*background:url(/extra/salesforce_202406/media/head_img.png) center top no-repeat;*/
/*background-size:cover;*/
background-color:#0d9dda;
position:relative;
padding:5% 25px;
}

/*.header-area .cloud-left{
position:absolute;
top:10%;
left:5%;
animation: floating 2s ease-in-out infinite alternate-reverse;
}

.header-area .cloud-right{
position:absolute;
top:50%;
right:5%;
animation: floating 2.5s ease-in-out infinite alternate-reverse;
}


@keyframes floating{
  0% {
    transform: translateY(20px);
  }
  100% {
    transform: translateY(-20px);
  }
}*/


/*.header-area .main-title{
margin:0 auto;
font-size:3.5rem;
line-height:1;
color:#032d60;
width:fit-content;
position:relative;
}

.header-area .main-title::before{
content:"";
position:absolute;
top:-15px;
left:0;
width:80px;
height:10px;
background-color:#0d9dda;
border-radius:15px;
}

.header-area .main-title::after{
content:"";
position:absolute;
bottom:-15px;
right:0;
width:80px;
height:10px;
background-color:#8ac4f5;
border-radius:15px;
}


.header-area .main-title span{
text-align:left;
overflow: hidden;
white-space: nowrap;
display: inline-block;
animation: text_anim 0.6s forwards linear;
}


.header-area .sub-title{
max-width:1000px;
margin:30px auto;
text-align:center;
font-size:1.5rem;
font-weight:bold;
color:#032d60;
opacity:0;
animation: fadein 0.5s linear 0.8s forwards;
}
.header-area .sub-title span{
display:block;
}*/


/*@keyframes text_anim {
  0% {
    width: 0%;
  }
  100% {
    width: 100%;
  }
}


@keyframes fadein{
  0% {
    opacity: 0;}

  100% {
    opacity: 1;}
}*/



/* 202506 add */


.header-area::before{
content:"";
position:absolute;
bottom:0;
right:0;
background:url(/extra/salesforce_202406/media/img_main.png) right bottom no-repeat;
width:100%;
height:100%;
}


.header-area .main-title{
display:flex;
flex-direction:column;
max-width:1300px;
margin:0 auto;
font-size:4rem;
font-feature-settings: "palt";
line-height:1.5;
color:#fff;
position:relative;
}


.header-area .main-title span{
text-align:left;
overflow: hidden;
white-space: nowrap;
display: block;
opacity:0;
}

.header-area .main-title span:first-child{
animation: fadein 0.5s linear 0.4s forwards;
}

.header-area .main-title span:nth-child(2){
animation: fadein 0.5s linear 0.8s forwards;
}

.header-area .main-title span:nth-child(3){
animation: fadein 0.5s linear 1.2s forwards;
}


.header-area .sub-title{
max-width:1300px;
margin:10px auto;
font-size:2rem;
font-weight:bold;
line-height:1.4;
color:#fff;
opacity:0;
animation: fadein 0.5s linear 1.6s forwards;
}


@keyframes fadein{
  0% {
    opacity: 0;}

  100% {
    opacity: 1;}
}



@keyframes line{
0%{
width:0;
}
100%{
width:100%;
}
}



@keyframes left-in{
0% {
    opacity: 0;
    transform: translateX(-50px);
}
100% {
    opacity: 1;
    transform: translateX(0);
}
}






/* category -------------------------------------------------------------------------------------------------------------- */



.category-area{
width:100%;
padding:40px 0;
/*background-color:#f7fcfc;*/
background-color:#ecf9ff;
position:relative;
z-index:100;
}

.category-area.category-news,
.category-area.category-info{
background: radial-gradient(circle, rgba(245,252,255,1) 0%, rgba(231,247,254,1) 90%);
position:relative;
}


.category-area.category-news::before{
content:"";
position:absolute;
top:-15%;
left:3%;
width:100%;
height:100%;
background:url(/extra/salesforce_202406/media/icon_cloud_s.png) left top no-repeat;
animation: floating 2.5s ease-in-out infinite alternate-reverse;
}

.category-area.category-info::before{
content:"";
position:absolute;
top:-15%;
right:3%;
width:100%;
height:100%;
background:url(/extra/salesforce_202406/media/icon_cloud_s.png) right top no-repeat;
animation: floating 2.5s ease-in-out infinite alternate-reverse;
}


.block-area{
max-width:1000px;
margin:0 auto;
padding:15px 0;
}




.category-area .banner-item{
text-align:center;
margin:20px auto;
display:block;
}

.category-area .banner-item:hover{
opacity:0.7;
transition:0.3s;
}


/* video -------------------------------------------------------------------------------- */


.video-block{
max-width:900px;
/*max-width:790px;*/
/*height:400px;*/
margin:0 auto;
padding:50px 0;
text-align:center;
color:#444;
position:relative;
z-index:10;
}


.video-block{
display:flex;
flex-wrap:wrap;
justify-content: space-between;
}


.video-block .video-block-main{
width:75%;
}
.video-block .video-block-main .video-item{
height:380px;
}

.video-block-sub{
width:22%;
}

.video-block .video-item{
position:relative;
overflow:hidden;
margin-bottom:20px;
}

.video-block .video-item span{/*画像のキャプション*/
font-size:12px;
color:#fff;
position:absolute;
bottom:15px;
left:5px;
}

.video-block .video-item .detail{/*画像マウスオーバー時の表出設定*/
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    color: #ffffff;
    background:rgba(0,0,0,0.7);
    transform: translateY(-100%);
    transition: 0.3s ease;
  display: flex;
  justify-content: center;
  align-items: center;
overflow:hidden;
}

.video-block .video-item:hover .detail{
transform: translateY(0);
}

.video-block .video-item:hover .detail .btn{/*画像マウスオーバー時ボタン*/
padding:10px 25px;
text-align:center;
font-size:16px;
font-weight:bold;
border-radius:10px;
background-color:#fff;
color:#1a96fe;
display:block;
transition:0.3s ease;
}


.video-block .video-item:hover .detail .btn:hover{
background-color:#8ac4f5;
color:#fff !important;
}


/* 1つ目のvideo-itemにwidth 100%を適用 
.video-item:nth-child(1) {
    width: 100%;
}*/

/* 2つ目以降のvideo-itemにwidth 48%を適用 
.video-item:nth-child(n+2) {
    width: 48%;
}*/



/*.video-block {
display: grid;
grid-template-columns: 3fr 1fr;
grid-template-rows: repeat(3, 5fr);
grid-column-gap: 10px;
grid-row-gap: 10px;
}

.video-block .video-item.item01 { grid-area: 1 / 1 / 3 / 2; }
.video-block .video-item.item02 { grid-area: 1 / 2 / 2 / 3; }
.video-block .video-item.item03 { grid-area: 2 / 2 / 3 / 3; }
*/



/* lead -------------------------------------------------------------------------------- */


.lead-block{
font-weight:bold;
max-width:900px;
margin:25px auto;
padding:20px;
text-align:center;
background-color:#fff;
/*box-shadow:0 0 15px #e5e5e5;*/
border:13px solid #ceecf6;
border-radius:20px;
position:relative;
z-index:10;
}

.lead-block p{
margin:0;
padding:10px 15px;
}




/* h2 -------------------------------------------------------------------------------- */


h2{
text-align:center;
font-family: Futura, 'Century Gothic', "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "游ゴシック Medium", "Yu Gothic Medium", YuGothicM, 游ゴシック体, YuGothic, メイリオ, Meiryo, sans-serif !important;
font-size:2.25rem;
color:#032d60;
margin:20px auto 40px;
line-height:1.4;
width:100%;
position:relative;
}

h2 span{
display:block;
text-align:center;
color: #8ac4f5;
font-size: 1.5rem;
}


/* h3 -------------------------------------------------------------------------------- */


h3{
text-align:center;
font-family: Futura, 'Century Gothic', "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "游ゴシック Medium", "Yu Gothic Medium", YuGothicM, 游ゴシック体, YuGothic, メイリオ, Meiryo, sans-serif !important;
font-size:1.5rem;
background-color:#cfeafe;
color:#032d60;
margin:75px auto 25px;
padding:35px 0;
line-height:1.4;
width:100%;
position:relative;
}


h3::before{
content:"";
position:absolute;
top:-50%;
left:calc(50% - 40px);
width:80px;
height:83px;
background:url(/extra/salesforce_202406/media/icon_security.png) top left no-repeat;
}


h3::after{
content:"";
position:absolute;
bottom:-2px;
left:calc(50% - 50px);
width:100px;
height:4px;
background-color:#032d60;
}






/* contents -------------------------------------------------------------------------------- */


.news-block{
margin: 0 auto;
padding:20px;
text-align:left;
background-color:#fff;
border-radius: 20px;
position: relative;
z-index: 10;
}

.news-block li a{
display:block;
position: relative;
padding:15px 10px 15px 40px;
}

.news-block li a::before{
content:"";
position:absolute;
top:50%;
left:5px;
width:15px;
height:3px;
background-color:#8ac4f5;
}



.news-block li a:hover{
color:#8ac4f5 !important;
}

.news-block li a:hover::before{
transform:translateX(10px);
transition:0.5s;
}



.panel-block{
display:flex;
justify-content:space-around;
flex-wrap:wrap;
padding:25px 0;
}

.panel-block li{
width:28%;
margin:20px 20px 40px;
background-color:#fff;
box-shadow: 0 0 10px #e0e0e0;
border-radius:15px;
position:relative;
display:block;
}

.panel-block li:hover{
box-shadow: 0 0 30px #999;
transition:0.5s;
}

.panel-block li a{
display:block;
padding:0 0 25px;
}

.panel-block li a span{
display:block;
border-radius:15px 15px 0 0;
overflow:hidden;
}

.panel-block li a img{
width:100%;
height:180px;
object-fit:cover;
object-position:center center;
}


.panel-block li a:hover img{
transform:scale(1.05);
transition:0.5s;
}


.panel-block li a span.caption{
margin:0 0 20px 0;
padding:15px 25px;
font-size:1.25rem;
font-weight:bold;
line-height:1.6;
color:#032d60;
}

.panel-block li a:hover span.caption{
color:#8ac4f5;
transition:0.3s;
}

.panel-block .label{
font-size:13px;
margin: 0 auto;
padding: 3px 15px;
color: #fff;
text-align: center;
font-weight: normal;
display: block;
position: absolute;
bottom:-15px;
left:calc(50% - 50px);
width:100px;
border-radius:5px;
box-shadow:0 0 20px #e5e5e5;
overflow:hidden;
}

.panel-block .label.special{
background-color:#08a498;
}

.panel-block .label.article{
background-color:#1a96fe;
}

.panel-block .label.whitepaper{
background-color:#d73883;
left:calc(50% - 75px);
width:150px;
}


.info-block{
margin:0 auto;
padding:35px;
text-align:left;
background-color:#fff;
box-shadow:0 0 20px #d5d5d5;
border-radius:20px;
}

.info-block ul li{
padding-top:10px;
padding-left:5%;
list-style:none;
position:relative;
}

.info-block ul li::before{
content: '';
display: block;
position: absolute;
top: 50%;
left: 0;
width: 20px;
height: 10px;
border-left: 3px solid #004fa2;
border-bottom: 3px solid #004fa2;
transform: rotate(-45deg);
}


.info-block ul li a{
font-size:1.25rem;
}

.info-block ul li a:hover,
.info-block .all-link a:hover{
color:#004fa2 !important;
text-decoration:underline;
}

.info-block .all-link{
margin-top:20px;
text-align:right;
position:relative;
}

.info-block .all-link span{
font-size:1.25rem;
position:relative;
}


.info-block .all-link span::before {
  content: '';
  width: 12px;
  height: 12px;
  border: 0;
  border-top: solid 3px #004fa2;
  border-right: solid 3px #004fa2;
  transform: rotate(45deg);
  position: absolute;
  top: 0;
  left: -25%;
  bottom: 0;
  margin: auto;
transition:0.3s;
}

.info-block .all-link span:hover::before{
  left: -20%;
}







/* modal */


.iziModal .iziModal-iframe{
padding:20px;
}



/* 202505 add */


.theme-block{
margin:0 auto;
}

.theme-block .theme-contents-left,
.theme-block .theme-contents-right{
position:relative;
display:flex;
align-items: center;
margin:40px auto;
}

.theme-block .theme-contents-right{
flex-direction : row-reverse;
}


.theme-block .theme-contents-left img,
.theme-block .theme-contents-right img{
max-width:250px;
}

.theme-block span{
display:block;
font-weight:bold;
font-size:1.25rem;
}

.theme-block a{
display:block;
color:#032d60;
}

.theme-block a:hover{
color:#8dc6f5 !important;
}


.theme-block .label{
margin:0 auto 25px;
background-color:#004fa2;
color:#fff;
border-radius:15px;
padding:10px 20px;
font-size:1rem;
width:fit-content;
}



/* 吹き出し 左 */

.speechBubble-left{
  position: relative;
  display: inline-block;
  margin-left: 40px;
  padding: 36px 16px;
  border: 13px solid #8dc6f5;
  border-radius: 40px;
  background-color: #fff;
  text-align: left;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  color: #000000;
  box-shadow: 0 0 10px #e0e0e0;
}

.speechBubble-left::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  border-style: solid;
  border-width: 20px 40px 20px 0;
  border-color: transparent #8dc6f5 transparent transparent;
  translate: -100% -50%;
}

.speechBubble-left::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  border-style: solid;
  border-width: 8.8px 17.6px 8.8px 0;
  border-color: transparent #ffffff transparent transparent;
  translate: -100% -50%;
}


/* 吹き出し 右 */


.speechBubble-right {
  position: relative;
  display: inline-block;
  margin-right: 40px;
  padding: 36px 16px;
  border: 13px solid #8dc6f5;
  border-radius: 40px;
  background-color: #fff;
  text-align: left;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  color: #000000;
  box-shadow: 0 0 15px #e0e0e0;
}

.speechBubble-right::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  border-style: solid;
  border-width: 20px 0 20px 40px;
  border-color: transparent transparent transparent #8dc6f5;
  translate: 100% -50%;
}

.speechBubble-right::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  border-style: solid;
  border-width: 8.8px 0 8.8px 17.6px;
  border-color: transparent transparent transparent #ffffff;
  translate: 100% -50%;
}



/* 202506 add */


.theme-block .theme-inner{
display:flex;
flex-wrap:wrap;
justify-content:space-between;
}

.theme-block .theme-inner div{
width:45%;
margin:20px;
padding:20px;
border-radius:20px;
background-color:#fff;
box-shadow: 0 0 20px #d5d5d5;
position:relative;
}

.theme-block .theme-inner div::after{
content:"";
position:absolute;
bottom:40px;
right:0;
width:100%;
height:100%;
z-index:1;
}

.theme-block .theme-inner div:first-of-type::after{
background:url(/extra/salesforce_202406/media/img_businessman_01.png) right bottom no-repeat;
}

.theme-block .theme-inner div:nth-of-type(2)::after{
background:url(/extra/salesforce_202406/media/img_businessman_02.png) right bottom no-repeat;
}

.theme-block .theme-inner div:nth-of-type(3)::after{
background:url(/extra/salesforce_202406/media/img_businessman_03.png) right bottom no-repeat;
}

.theme-block .theme-inner div:nth-of-type(4)::after{
background:url(/extra/salesforce_202406/media/img_businessman_04.png) right bottom no-repeat;
}


.theme-block .theme-inner .title{
font-size:1.5rem;
color:#0d9dda;
}

.theme-block .theme-inner .summary,
.theme-block .theme-inner .tag{
font-size:1.125rem;
color:#032d60;
margin:10px 0;
width:70%;
}
.theme-block .theme-inner .tag{
font-size:0.9rem;
opacity:0.7;
}

.theme-block .theme-inner .detail a{
display:block;
background-color:#0d9dda;
color:#fff !important;
margin:20px auto 0;
padding:20px 15px;
border-radius:15px;
text-align:center;
font-size:1rem;
border:3px solid #0d9dda;
box-sizing:border-box;
position:relative;
z-index:10;
}


.theme-block .theme-inner .detail a:hover{
/*background-color:#8ac4f5;*/
background-color:#cfeafe;
color:#032d60 !important;
border:3px solid #032d60;
box-sizing:border-box;
transition:0.3s;
}



/* ヘッダー＆フッター広告表記 2024～
-------------------------------------------------------------------------------------------------------*/


.header_sponsored_area{
    width:100%;
    background-color:#fff;
    color:#000;
    font-size:14px;
    text-align:right;
    padding:15px 20px;
    position:relative;
    z-index:1000;
}

.header_sponsored_area span{
    margin:0;
    line-height:1.3;
    display:block;
}


.block_sponsored_area{
    clear:both;
    background-color:#fff;
    color:#000;
    font-size:14px;
    border:1px solid #000;
    margin:25px auto;
    padding:15px 15px 10px;
    max-width:760px;
    position:relative;
    z-index:1000;
}

.block_sponsored_area span{
    margin:5px 0;
    text-align:left;
    display:block;
}


.block_sponsored_area:before{
    display: block;
    content: "PR";
    position: absolute;
    top: -12px;
    left: 30px;
    width: 40px;
    height: 30px;
    text-align: center;
    background-color: #fff;
}









/* responsive -------------------------------------------------------------------------------- */


@media screen and (max-width:960px){



.header-area{
padding:45px 20px;
}

.header-area .logo{
width:300px;
}


.header-area::before{
background-size:contain;
}


.header-area .main-title{
font-size:2.5rem;
}

.header-area .sub-title{
font-size:1.25rem;
}

.video-block .video-block-main{
width:100%;
}
.video-block .video-block-main .video-item{
height:100%;
}

.video-block .video-block-sub{
width:100%;
}


.lead-block p{
padding:0;
}


h2{
font-size:2rem;
}

h3{
font-size:1.25rem;
margin:120px auto 25px;
}


.panel-block li{
width:40%;
}


/* 2025 add */


.info-block{
margin:20px;
}


.theme-block .theme-inner div{
width:100%;
}



}




@media screen and (max-width:640px){


.header-area{
padding:20px;
}


.header-area::before{
background-size:40%;
}


.header-area .main-title{
font-size:1.5rem;
}

.header-area .sub-title{
font-size:1rem;
}

.header-area .main-title::before,
.header-area .main-title::after{
height:5px;
}


.category-area.category-news::before,
.category-area.category-info::before{
display:none;
}


h2{
font-size:1.5rem;
margin:15px auto;
}

.panel-block{
display:block;
padding:0;
}

.panel-block li{
width:100%;
margin:30px auto;
}


.news-block{
padding:0
}


.info-block{
padding:15px;
}
.info-block ul li{
padding-left:10%;
}
.info-block ul li a{
font-size:1rem;
}



/* 2025 add */


.theme-block .theme-contents-left img,
.theme-block .theme-contents-right img{
max-width:100px;
}


.theme-block span{
font-size:0.9rem;
}

.speechBubble-left,
.speechBubble-right{
border: 8px solid #8dc6f5;
}

.speechBubble-left{
margin-left:30px;
}
.speechBubble-right{
margin-right:30px;
}


.theme-block .theme-inner div{
margin:20px;
}

.theme-block .theme-inner div:first-of-type::after,
.theme-block .theme-inner div:nth-of-type(4)::after{
background-size:50%;
}

.theme-block .theme-inner div:nth-of-type(2)::after,
.theme-block .theme-inner div:nth-of-type(3)::after{
background-size:60%;
}

.theme-block .theme-inner .detail a{
padding:10px;
}

.theme-block .theme-inner .tag{
font-size:0.8rem;
}



.info-block .all-link span{
font-size:1rem;
}



}





/* Splide css */

.splide__container{box-sizing:border-box;position:relative}.splide__list{backface-visibility:hidden;display:-ms-flexbox;display:flex;height:100%;margin:0!important;padding:0!important}.splide.is-initialized:not(.is-active) .splide__list{display:block}.splide__pagination{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-pack:center;justify-content:center;margin:0;pointer-events:none}.splide__pagination li{display:inline-block;line-height:1;list-style-type:none;margin:0;pointer-events:auto}.splide:not(.is-overflow) .splide__pagination{display:none}.splide__progress__bar{width:0}.splide{position:relative;visibility:hidden}.splide.is-initialized,.splide.is-rendered{visibility:visible}.splide__slide{backface-visibility:hidden;box-sizing:border-box;-ms-flex-negative:0;flex-shrink:0;list-style-type:none!important;margin:0;position:relative}.splide__slide img{vertical-align:bottom}.splide__spinner{animation:splide-loading 1s linear infinite;border:2px solid #999;border-left-color:transparent;border-radius:50%;bottom:0;contain:strict;display:inline-block;height:20px;left:0;margin:auto;position:absolute;right:0;top:0;width:20px}.splide__sr{clip:rect(0 0 0 0);border:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.splide__toggle.is-active .splide__toggle__play,.splide__toggle__pause{display:none}.splide__toggle.is-active .splide__toggle__pause{display:inline}.splide__track{overflow:hidden;position:relative;z-index:0}@keyframes splide-loading{0%{transform:rotate(0)}to{transform:rotate(1turn)}}.splide__track--draggable{-webkit-touch-callout:none;-webkit-user-select:none;-ms-user-select:none;user-select:none}.splide__track--fade>.splide__list>.splide__slide{margin:0!important;opacity:0;z-index:0}.splide__track--fade>.splide__list>.splide__slide.is-active{opacity:1;z-index:1}.splide--rtl{direction:rtl}.splide__track--ttb>.splide__list{display:block}.splide__arrow{-ms-flex-align:center;align-items:center;background:#ccc;border:0;border-radius:50%;cursor:pointer;display:-ms-flexbox;display:flex;height:2em;-ms-flex-pack:center;justify-content:center;opacity:.7;padding:0;position:absolute;top:50%;transform:translateY(-50%);width:2em;z-index:1}.splide__arrow svg{fill:#000;height:1.2em;width:1.2em}.splide__arrow:hover:not(:disabled){opacity:.9}.splide__arrow:disabled{opacity:.3}.splide__arrow:focus-visible{outline:3px solid #0bf;outline-offset:3px}.splide__arrow--prev{left:1em}.splide__arrow--prev svg{transform:scaleX(-1)}.splide__arrow--next{right:1em}.splide.is-focus-in .splide__arrow:focus{outline:3px solid #0bf;outline-offset:3px}.splide__pagination{bottom:.5em;left:0;padding:0 1em;position:absolute;right:0;z-index:1}.splide__pagination__page{background:#ccc;border:0;border-radius:50%;display:inline-block;height:8px;margin:3px;opacity:.7;padding:0;position:relative;transition:transform .2s linear;width:8px}.splide__pagination__page.is-active{background:#fff;transform:scale(1.4);z-index:1}.splide__pagination__page:hover{cursor:pointer;opacity:.9}.splide__pagination__page:focus-visible{outline:3px solid #0bf;outline-offset:3px}.splide.is-focus-in .splide__pagination__page:focus{outline:3px solid #0bf;outline-offset:3px}.splide__progress__bar{background:#ccc;height:3px}.splide__slide{-webkit-tap-highlight-color:rgba(0,0,0,0)}.splide__slide:focus{outline:0}@supports(outline-offset:-3px){.splide__slide:focus-visible{outline:3px solid #0bf;outline-offset:-3px}}@media screen and (-ms-high-contrast:none){.splide__slide:focus-visible{border:3px solid #0bf}}@supports(outline-offset:-3px){.splide.is-focus-in .splide__slide:focus{outline:3px solid #0bf;outline-offset:-3px}}@media screen and (-ms-high-contrast:none){.splide.is-focus-in .splide__slide:focus{border:3px solid #0bf}.splide.is-focus-in .splide__track>.splide__list>.splide__slide:focus{border-color:#0bf}}.splide__toggle{cursor:pointer}.splide__toggle:focus-visible{outline:3px solid #0bf;outline-offset:3px}.splide.is-focus-in .splide__toggle:focus{outline:3px solid #0bf;outline-offset:3px}.splide__track--nav>.splide__list>.splide__slide{border:3px solid transparent;cursor:pointer}.splide__track--nav>.splide__list>.splide__slide.is-active{border:3px solid #000}.splide__arrows--rtl .splide__arrow--prev{left:auto;right:1em}.splide__arrows--rtl .splide__arrow--prev svg{transform:scaleX(1)}.splide__arrows--rtl .splide__arrow--next{left:1em;right:auto}.splide__arrows--rtl .splide__arrow--next svg{transform:scaleX(-1)}.splide__arrows--ttb .splide__arrow{left:50%;transform:translate(-50%)}.splide__arrows--ttb .splide__arrow--prev{top:1em}.splide__arrows--ttb .splide__arrow--prev svg{transform:rotate(-90deg)}.splide__arrows--ttb .splide__arrow--next{bottom:1em;top:auto}.splide__arrows--ttb .splide__arrow--next svg{transform:rotate(90deg)}.splide__pagination--ttb{bottom:0;display:-
ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;left:auto;padding:1em 0;right:.5em;top:0}


/* add splide css */

.splide{
margin:5% auto 10%;
}

.splide__slide img {
width: 100%;
height: 100%;
object-fit: cover;
}


.splide__pagination{
bottom:-40px;
}

.splide__pagination__page{
width:20px;
height:15px;
background:#0d9dda;
border-radius:3px !important;
margin:10px;
}

.splide__pagination__page.is-active{
background:#151515;
opacity:1;
}

.splide__pagination__page:hover{
background:#e0e0e0;
}

.splide__slide span img:hover{
transform:scale(1.03);
transition:0.3s;
}



@media screen and (max-width:960px){



}