﻿
/* Epson Smart Panel BLOCK */

.smartpanel .setupGuidance {
    overflow: hidden; }
    .smartpanel .setupGuidance .supportLead {
      margin-bottom: 45px;
	}


@media screen and (min-width: 751px) {
    .smartpanel .setupGuidance ul li {
		position: relative;
		text-align: center;
		float: left;
		height: 454px;
		width: 200px;
		background: #e3f7f6;
		border-radius: 10px;
		margin-right: 26px;
	}
}


      .smartpanel .setupGuidance ul li:after {
        content: "";
        display: inline-block;
        width: 15px;
        height: 14px;
        border-right: 3px solid #0059b3;
        border-top: 3px solid #0059b3;
        -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        -o-transform: rotate(45deg);
        transform: rotate(45deg);
        position: absolute;
        top: 208px !important;
        right: -18px;
        left: inherit !important; }
      .smartpanel .setupGuidance ul li p {
        font-size: 1.125rem;
        font-weight: bold;
        margin: 30px 0 12px; }
        .smartpanel .setupGuidance ul li p span {
          color: #1064ac; }
      .smartpanel .setupGuidance ul li .figure {
        position: absolute;
        bottom: 0; }
      .smartpanel .setupGuidance ul li .balloonSetupGuidance {
        position: absolute;
        border-radius: 10px;
        padding: 7px 4px;
        background: #fff;
        border: 1px solid #0b59aa;
        margin: 0 10px;
        font-size: 0.6875rem;
        bottom: 8px;
        font-weight: bold;
        line-height: 1.4; }
        .smartpanel .setupGuidance ul li .balloonSetupGuidance span {
          font-size: 0.75rem;
          color: #1064ac;
          display: block; }
        .smartpanel .setupGuidance ul li .balloonSetupGuidance:before {
          content: "";
          position: absolute;
          width: 14px;
          height: 15px;
          top: -15px;
          left: 0;
          right: 0;
          margin: 0 auto;
          background: url(/products/colorio/app/images/smartpanel/bg_balloon_arrow_top5.png) no-repeat; }
      .smartpanel .setupGuidance ul li:first-child p {
        margin: 25px 0 25px; }
      .smartpanel .setupGuidance ul li:first-child .figure {
        position: static;
        bottom: 0;
        margin-top: 70px; }
      .smartpanel .setupGuidance ul li:first-child .balloonSetupGuidance {
        bottom: 50px;
        left: 0px;
        right: 0px;
        font-size: 0.8125rem;
        line-height: 1.4; }
      .smartpanel .setupGuidance ul li:nth-child(4) {
        margin-right: 0; }
        .smartpanel .setupGuidance ul li:nth-child(4):after {
          display: none; }
        .smartpanel .setupGuidance ul li:nth-child(4) .figure span {
          position: absolute;
          text-align: center;
          font-size: 0.9375rem;
          font-weight: bold;
          text-align: center;
          background: #0b59aa;
          height: 74px;
          width: 74px;
          border-radius: 37px;
          right: 4px;
          top: -28px;
          color: #fff;
          padding-top: 20px;
          box-sizing: border-box;
          line-height: 1.2; }
      .smartpanel .setupGuidance ul li dl dt {
        font-size: 1.25rem;
        color: #fff;
        text-align: center;
        line-height: 48px;
        height: 48px;
        border-radius: 10px 10px 0 0;
        font-weight: normal;
        background: #54555d url(/products/colorio/app/images/smartpanel/icon_setting.png) no-repeat 10px center; }


@media screen and (max-width: 750px) {
	.smartpanel .setupGuidance .slick-slider {
		background-color: #FFF;
		border: 3px solid #dddddd;
		text-align: center;
		padding: 20px 0 45px;
	}
}