@charset "utf-8";

/* CSS Document */

#contentTitle{width:100%;height:40px;text-align:center;background-color:#535353;color:#FFF;font-size:16px;line-height:40px;font-weight:bold;}

.contentTitle2{text-align:center;font-size:1.5em;font-weight:bold;}
.contentTitle3{text-align:left;font-size:1.8em;font-weight:bold;}

.reason {
   background: #fa7666;
   border-radius: 79px;
   color: #fff;
   display: block;
   font: 18px/1.28 Euclid Circular B,Roboto,sans-serif;
   justify-content: center;
   margin: 0 auto 10px;
   max-width: 140px;
   padding: 5px 22px;
   text-align: center;
}

.title_highlight:before {
   background: #3cb173;
   border-radius: 22px;
   content: "";
   height: 84%;
   left: 0;
   position: absolute;
   top: 4px;
   width: 6px;
}

.title_highlight {
   color: #151824;
   font: 21px/1.24 Euclid Circular B,Roboto,sans-serif;
   font-weight: bold;
   margin-bottom: 17px;
   padding-left: 24px;
   position: relative;
}

.features__img_training {
   border: 1px solid hsla(0,0%,85%,.5);
   border-radius: 10px;
   box-shadow: 0 0 4px rgb(0 0 0 / 14%);
}


.img-responsive {
   display: block;
   height: auto;
   max-width: 100%;
   z-index: 10;
}
.device__container:before {
    background: #f9f9f9;
    bottom: 0;
    content: "";
    height: 90%;
    left: 0;
    margin: 0;
    position: absolute;
    top: 0;
    width: 100%;
    
}

.device__container {
   display: flex;
   flex-direction: column-reverse;
   margin: 0 auto 25px;
   max-width: 1186px;
   padding: 0 20px;
   position: relative;
   
}

.device__text-wrapper {
   max-width: unset;
   padding-left: 26px;
   z-index: 10;
}

.device__text-wrapper {
   margin: 55px auto 53px;
   max-width: 600px;
   z-index: 10;
}

.device__img-wrapper, .device__text-wrapper {
   margin-left: 0;
   margin-right: 0;
   z-index: 10;
}


.functions__item {
   background: #f9f9f9;
   border-radius: 14px;
   box-shadow: 0 0 4.62901px rgb(0 0 0 / 4%);
   margin-bottom: 22px;
   max-width: 786px;
   padding: 51px 50px 62px 100px;
   width: 100%;
}

.functions__title_friendly.active:before {
   background-image: url(/images/ispring/ispring_learn/friendly.svg);
}

.functions__title_friendly:before {
   height: 69px;
}

.functions__title_notifications.active:before {
   background-image: url(/images/ispring/ispring_learn/notifications.svg);
}

.functions__title_score.active:before {
   background-image: url(/images/ispring/ispring_learn/score.svg);
}

.functions__title_hr.active:before {
   background-image: url(/images/ispring/ispring_learn/hr.svg);
}

.functions__title:before {
   background-repeat: no-repeat;
   content: "";
   height: 68px;
   left: -81px;
   position: absolute;
   top: -2px;
   width: 68px;
}

.functions__title {
   position: relative;
}

.title_h3 {
   color: #151824;
   font: 26px/1.15 Euclid Circular B SemiBold,Roboto,sans-serif;
   font-weight: bold;
   margin: 0;
}

.functions__text {
   margin-top: 20px;
}

.text {
   color: #151824;
   font: 18px/1.33 Euclid Circular B Regular,Roboto,sans-serif;
}

.functions__wrapper.active:after {
   background-image: url(/images/ispring/ispring_learn/small-logo.svg);
}

@media screen and (min-width: 1024px){
   .device__img-wrapper, .device__text-wrapper {
      margin-left: 0;
      margin-right: 0;
   }
   .device__container:before {
      border-radius: 20px;
      height: 68%;
      margin: auto;
   }
   

   .device__container {
      align-items: center;
      flex-direction: row;
      margin-bottom: 75px;
      padding-left: 90px;
      padding-right: 90px;
  }

  .device__img-wrapper, .device__text-wrapper {
   margin-left: 0;
   margin-right: 0;
}

.functions__wrapper {
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   justify-content: space-between;
   position: relative;
}

.functions__item {
   padding: 48px 60px 62px 120px;
   max-width: 586px;
   width: 49%;
}



.functions__wrapper:after {
   background-repeat: no-repeat;
   bottom: 0;
   content: "";
   height: 146px;
   left: 0;
   margin: auto;
   position: absolute;
   right: 0;
   top: 0;
   width: 146px;

}

}

@media screen and (min-width: 1235px){
   .functions__item {
    padding-left: 151px;
    padding-right: 80px;
    max-width: 586px;
    width: 50%;
}
}

@media screen and (min-width: 1680px){
   .functions__item {
    padding-left: 151px;
    padding-right: 80px;
    max-width: 686px;
    width: 50%;
}
}




/* 卡片的部份 */

@media screen and (min-width:425px){
   .container_training-scenarios{margin-left:auto;margin-right:auto;min-width:375px;padding-left:20px;padding-right:20px}
   
.training-scenarios__card-wrapper{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center;margin:0 auto;max-width:375px}   
.training-scenarios__card-hover-content{opacity:1;transition:all 1.5s ease;visibility:visible}
   
.training-scenarios__card-wrapper{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center;margin:0 auto;max-width:375px}
   
.training-scenarios__card{background:#f9f9f9;border:1px solid hsla(0,0%,86%,.5);border-radius:12px;display:flex;flex-direction:column;height:270px;justify-content:space-between;margin-bottom:50px;max-width:205px;overflow:hidden;padding:20px;transform:scale(1.5);transition:all .5s ease;width:100%;z-index:1}
.training-scenarios__card 
.training-scenarios__card{max-height:400px;max-width:300px;padding:30px 27px 40px;transition:all .5s ease}
.training-scenarios__card:not(
.training-scenarios__card:last-of-type){margin-bottom:160px}
.training-scenarios__card:nth-of-type(n){position:relative}
.training-scenarios__card:nth-of-type(n):before{background-color:transparent;background-position:50%;background-repeat:no-repeat;bottom:0;content:"";display:block;height:10px;left:0;margin:auto;position:absolute;right:0;top:0;width:10px;z-index:-1}
.training-scenarios__card:nth-of-type(n):before{transform:scale(.6);transition:all .5s ease}
.training-scenarios__card:first-of-type:before{height:157px;left:90px;top:-145px;transform:scale(.6667);width:152px}
.training-scenarios__card:nth-of-type(2):before{height:207px;left:87px;top:-160px;transform:scale(.56);width:207px}
.training-scenarios__card:nth-of-type(3):before{height:161px;left:90px;top:-137px;width:161px}
.training-scenarios__card:nth-of-type(4):before{height:200px;left:75px;top:-135px;width:200px}
.training-scenarios__card:nth-of-type(5):before{height:166px;left:82px;top:-130px;width:166px}
.training-scenarios__card:nth-of-type(6):before{height:173px;left:82px;top:-130px;transform:scale(.62);width:154px}
.training-scenarios__card .card__title{font-size:15px;transition:all .5s ease}
.training-scenarios__card.active{height:267px;justify-content:space-between;transform:scale(1.5);transition:all .5s ease;z-index:10}
.training-scenarios__card.active 
.training-scenarios__card-hover-content{opacity:1;transition:all 1.5s ease;visibility:visible}
.training-scenarios__card.active 
.training-scenarios__card{max-height:400px;max-width:300px;padding:30px 27px 40px;transition:all .5s ease}
.training-scenarios__card.active:nth-of-type(n):before{transform:scale(.6);transition:all .5s ease}
.training-scenarios__card.active:first-of-type:before{left:90px;top:-145px;transform:scale(.6667)}
.training-scenarios__card.active:nth-of-type(2):before{left:87px;top:-160px;transform:scale(.56)}
.training-scenarios__card.active:nth-of-type(3):before{left:90px;top:-137px}
.training-scenarios__card.active:nth-of-type(4):before{left:75px;top:-135px}
.training-scenarios__card.active:nth-of-type(5):before{left:82px;top:-130px}
.training-scenarios__card.active:nth-of-type(6):before{left:82px;top:-130px;transform:scale(.62)}
.training-scenarios__card.active .card__title{font-size:15px;transition:all .5s ease}
.card__expert-wrapper{align-items:center;display:flex;flex-direction:row}
.card__image-wrapper{max-width:33px;width:100%}
.card__expert-image{border-radius:50%}
.card__title{color:#151824;font:19px/1.32 Euclid Circular B SemiBold,Roboto,sans-serif;margin:0;max-width:144px;transition:all .5s ease}
.card__text{color:#3d3e47;font:12px/1.27 Euclid Circular B SemiBold,Roboto,sans-serif;margin:0 0 16px ;;text-align: left}
.card__speaker-info{margin-left:15px;max-width:180px}
.expert__name{color:#151824;font:11px/1.5 Euclid Circular B,Roboto,sans-serif;margin:0;text-align: left;}
.expert__position{color:#3d3e47;font:8px/1.17 Euclid Circular B Regular,Roboto,sans-serif;margin:0;text-align: left}
}

@media screen and (min-width:700px){

   
.training-scenarios__card-wrapper{max-width:unset;width:600px}   
.training-scenarios__card-hover-content{opacity:0;transition:all .5s ease;visibility:hidden}

.training-scenarios__card{margin-bottom:unset;transform:scale(1)}

.training-scenarios__card:not(
.training-scenarios__card:last-of-type){margin-bottom:16px}
.training-scenarios__card:nth-of-type(n){position:relative}
.training-scenarios__card:nth-of-type(n):before{background-color:transparent;background-position:50%;background-repeat:no-repeat;bottom:0;content:"";display:block;left:0;margin:auto;position:absolute;right:0;top:0;transform:scale(1);transition:all .5s ease;z-index:-1}
.training-scenarios__card:first-of-type:before{height:157px;left:66px;top:66px;width:152px}
.training-scenarios__card:nth-of-type(2):before{height:207px;left:78px;top:16px;width:207px}
.training-scenarios__card:nth-of-type(3):before{height:161px;left:68px;top:52px;width:161px}
.training-scenarios__card:nth-of-type(4):before{height:200px;left:58px;top:35px;width:200px}
.training-scenarios__card:nth-of-type(5):before{height:166px;left:74px;top:48px;width:166px}
.training-scenarios__card:nth-of-type(6):before{height:173px;left:74px;top:60px;width:154px}
.training-scenarios__card:nth-of-type(odd){margin-right:16px}
.training-scenarios__card .card__title{font-size:19px}
.training-scenarios__card-wrapper{max-width:unset;width:600px}
.training-scenarios__card-hover-content{opacity:0;transition:all .5s ease;visibility:hidden}

}

@media screen and (min-width:820px){
   
.training-scenarios__card-wrapper{width:700px}


}

@media screen and (min-width:1440px){
   .container_training-scenarios{width:1340px}
   
.training-scenarios__card-wrapper{flex-wrap:nowrap;width:1340px}

.training-scenarios__card-wrapper{flex-wrap:nowrap;width:1340px}
.training-scenarios__card:not(.training-scenarios__card:last-of-type){margin-right:16px}

}



@media (-webkit-min-device-pixel-ratio: 1.5) and (min-width: 1350px),
(min--moz-device-pixel-ratio: 1.5) and (min-width: 1350px),
(-o-min-device-pixel-ratio: 3 / 2) and (min-width: 1350px),
(min-device-pixel-ratio: 1.5) and (min-width: 1350px),
(min-resolution: 144dpi) and (min-width: 1350px)
{
    .demo__container.active::after
    {
        background-size: 675px 480px;
    }
}

.training-scenarios__card:nth-of-type(1):before
{
    background-image: url('/images/ispring/ispring_learn/onboarding.png');
    background-size: contain;
}

.training-scenarios__card:nth-of-type(2):before
{
    background-image: url('/images/ispring/ispring_learn/product.png');
    background-size: contain;
}

.training-scenarios__card:nth-of-type(3):before
{
    background-image: url('/images/ispring/ispring_learn/channel.png');
    background-size: contain;
}

.training-scenarios__card:nth-of-type(4):before
{
    background-image: url('/images/ispring/ispring_learn/attestation.png');
    background-size: contain;
}

.training-scenarios__card:nth-of-type(5):before
{
    background-image: url('/images/ispring/ispring_learn/compliance.png');
    background-size: contain;
}

.training-scenarios__card:nth-of-type(6):before
{
    background-image: url('/images/ispring/ispring_learn/certification.png');
    background-size: contain;
    border: #004fe1 1px solid;
    border-radius: 5px;
}



@media (-webkit-min-device-pixel-ratio: 1.5) and (min-width: 320px),
(min--moz-device-pixel-ratio: 1.5) and (min-width: 320px),
(-o-min-device-pixel-ratio: 3 / 2) and (min-width: 320px),
(min-device-pixel-ratio: 1.5) and (min-width: 320px),
(min-resolution: 144dpi) and (min-width: 320px)
{
    .training-scenarios__card:nth-of-type(1):before
    {
        background-image: url('/images/ispring/ispring_learn/onboarding-x2.png');
        background-size: contain;
    }

    .training-scenarios__card:nth-of-type(2):before
    {
        background-image: url('/images/ispring/ispring_learn/product-x2.png');
        background-size: contain;
    }

    .training-scenarios__card:nth-of-type(3):before
    {
        background-image: url('/images/ispring/ispring_learn/channel-x2.png');
        background-size: contain;
    }

    .training-scenarios__card:nth-of-type(4):before
    {
        background-image: url('/images/ispring/ispring_learn/attestation-x2.png');
        background-size: contain;
    }

    .training-scenarios__card:nth-of-type(5):before
    {
        background-image: url('/images/ispring/ispring_learn/compliance-x2.png');
        background-size: contain;
    }

    .training-scenarios__card:nth-of-type(6):before
    {
        background-image: url('/images/ispring/ispring_learn/certification-x2.png');
        background-size: contain;
    }
}.b-button__blue-button{background:#0547c0;border-radius:200px;color:#fff;font:16px/20px Euclid Circular B,Roboto,sans-serif;outline:none;transition:all .3s ease}.b-button__blue-button:focus,.b-button__blue-button:hover{background:#004fe1;color:#fff;outline:none;text-decoration:none}.b-button__blue-button-middle{padding:19px 82px}.b-button__blue-button-small{padding:18px 71px}.b-button__blue-button-small-xs{padding:18px 34px}.b-button__blue-button_popup{font:20px/1.25 Euclid Circular B,Roboto,sans-serif}.b-animate_slide-down,.b-animate_slide-up{max-height:0;overflow-y:hidden;transition:max-height .3s ease-in-out}.b-animate_slide-down{max-height:1000px}

 

/* 分頁輪播的部份 */
.slider_default-style{--active-nav-color:#13cb25;--overflow:hidden}
.solutions{background:#f6f6f7;margin-bottom:75px;overflow:hidden}
.solutions__container{padding-bottom:60px;padding-top:80px}
.solutions__title{margin-bottom:0;text-align:center}
.solutions .slider{max-width:516px;position:relative;width:100%}
.solutions .slider button{display:none}
.solutions .slider__controls{opacity:0;transition:all .3s ease}
.solutions .slider:hover .slider__controls{opacity:1;transition:all .3s ease}
.solutions .slider:hover .slider__controls__prev{left:0}
.solutions .slider:hover .slider__controls__next{right:0}
.solutions .slider:hover .slider__controls__next,.solutions .slider:hover .slider__controls__prev{border:1px solid #252f3c;box-shadow:none}
.solutions .slider .tns-nav{bottom:-10px;display:block;left:0;position:absolute;right:0;top:unset;transition:all .3s ease}
.solutions .slider .tns-nav button.tns-nav-active{background:#3cb46e}

@media screen and (min-width:425px){.solutions .slider:hover .slider__controls__prev{left:-12px}
.solutions .slider:hover .slider__controls__next{right:-12px}}

@media screen and (min-width:600px){.solutions .slider:hover .slider__controls__prev{left:-19px}
.solutions .slider:hover .slider__controls__next{right:-22px}}

@media screen and (min-width:768px){.top{margin-bottom:0;padding-bottom:125px}
.solutions__title{margin-bottom:28px}
.solutions .slider{margin-left:auto;margin-right:auto}
.interface__container{width:750px}}

@media screen and (min-width:1300px){.solutions{border-radius:20px;margin:0 auto 120px;max-width:1291px;padding:0 20px}
.solutions .slider{left:13px}}


@media screen and (min-width:1057px){.product-menu__content{max-width:1000px}}
.tabs-with-text__wrapper{border-radius:25px;margin-bottom:20px;padding:50px 0 0}
.tabs-with-text__wrapper.visible{display:block}
.tabs-with-text__wrapper .slider__wrapper{display:block;max-height:252px}
.tabs-with-text__top{align-items:baseline;border-bottom:1px solid #d0d0db;display:flex}
.tabs-with-text__top-mobile{display:none}
.tabs-with-text__title{color:#151824;cursor:pointer;display:block;font:19px/1.26 Euclid Circular B Regular,Roboto,sans-serif;margin:0 0 17px;padding-bottom:10px;position:relative}
.tabs-with-text__title:after{background:none;bottom:-1px;content:"";height:1px;left:0;position:absolute;right:0;transition:all .16s linear;width:100%}
.tabs-with-text__title.visible{font-family:Euclid Circular B SemiBold,Roboto,sans-serif;position:relative;transition:.3s}
.tabs-with-text__title.visible:after{background:#151824;height:2px}
.tabs-with-text__text-wrapper{margin-bottom:30px;max-width:508px}
.tabs-with-text__item-title{color:#151824;font:22px/1.25 Euclid Circular B SemiBold,Roboto,sans-serif;margin:0 0 22px;text-transform:uppercase}
.tabs-with-text__item-text{font:18px/1.36 Euclid Circular B Regular,Roboto,sans-serif;margin-bottom:0;margin-top:0;text-align: left;}
.tabs-with-text__emphasis{font-family:Euclid Circular B SemiBold,Roboto,sans-serif;font-weight: bold;}
.tabs-with-text__image{border:1px solid hsla(0,0%,85%,.5);border-radius:8px;box-shadow:0 0 4px rgba(0,0,0,.14)}
.tabs-with-text__image-wrapper{display:block}

@media screen and (min-width:400px){.tabs-with-text__wrapper .slider__wrapper{max-height:unset}}

@media screen and (min-width:768px){.tabs-with-text__wrapper{display:none;margin-bottom:0}
.tabs-with-text__top{flex-direction:row;justify-content:space-between;margin-left:auto;margin-right:auto}
.tabs-with-text__top-mobile{display:flex}
.tabs-with-text__text-wrapper{margin:0 auto 30px;max-width:508px}
.tabs-with-text__title{display:flex;justify-content:space-between;margin:0;padding:0 10px 18px}
.tabs-with-text__item-title{display:none;margin:0}
.tabs-with-text__item-text{font-size:22px;max-width:none}
.tabs-with-text__image{margin-left:auto;margin-right:auto}}

@media screen and (min-width:1024px){.tabs-with-text__wrapper{align-items:center;flex-direction:row;max-width:none}
.tabs-with-text__wrapper.visible{align-items:center;display:flex;justify-content:space-between}
.tabs-with-text__text-wrapper{padding-left:56px}
.tabs-with-text__title{-webkit-touch-callout:none;cursor:pointer;display:inline-block;margin:0;transition:.3s;-webkit-user-select:none;width:auto}
.tabs-with-text__title:before{content:"";display:inline-block;height:37px;position:relative;top:10px;width:36px}
.tabs-with-text__title_create.active:before{background:url(/images/ispring/ispring_learn/create.svg) no-repeat 50%}
.tabs-with-text__title_onboard.active:before{background:url(/images/ispring/ispring_learn/onboard.svg) no-repeat 50%}
.tabs-with-text__title_upskill.active:before{background:url(/images/ispring/ispring_learn/upskill.svg) no-repeat 50%}
.tabs-with-text__title_measure.active:before{background:url(/images/ispring/ispring_learn/measure.svg) no-repeat 50%}
.tabs-with-text__title_automate.active:before{background:url(/images/ispring/ispring_learn/automate.svg) no-repeat 50%}
.tabs-with-text__title_scale.active:before{background:url(/images/ispring/ispring_learn/scale.svg) no-repeat 50%}
.tabs-with-text__item-text{font-size:22px}
.tabs-with-text__item-text_create{max-width:340px}
.tabs-with-text__item-text_onboard{max-width:360px}
.tabs-with-text__item-text_upskill{max-width:345px}
.tabs-with-text__item-text_measure{max-width:350px}
.tabs-with-text__item-text_automate{max-width:365px}
.tabs-with-text__item-text_scale{max-width:370px}
.tabs-with-text__image-wrapper{padding-left:10px;padding-right:10px}}

@media screen and (min-width:1080px){.tabs-with-text__text-wrapper{font-size:18px}}

@media screen and (min-width:1154px){.tabs-with-text__top{max-width:1060px;padding-left:60px;padding-right:60px}
.tabs-with-text__title{padding-left:10px;padding-right:10px}}



@media screen and (max-width:640px){
.bo-50px{margin-bottom: 60px;}
/* .bo-50px .contentTitle{color:green} */

}