@charset "utf-8";
@media print, screen and (min-width:741px) {
    #integration {
        padding: 55px 0 0
    }
    #integration .copy {
        margin: auto;
        max-width: 900px
    }
    #integration .copy p {
        margin: 0 25px;
        font-size: 1.25em;
        text-align: center;
        line-height: 1.85em
    }
    #integration .scene h2, #integration .interview h2 {
        font-size: 2.5em;
        text-align: center;
        line-height: 1.65em
    }
    #integration .scene h2 {
        margin: 60px auto 0;
        padding: 100px 0 0;
        max-width: 1200px;
        color: #4d4d4d;
        border-top: 1px solid #e0e0e0
    }
    #integration .leadcopy {
        margin: 30px 0 45px;
        font-size: 1.25em;
        text-align: center;
        line-height: 1.85em
    }
    #integration .case {
        margin: 65px auto 0;
        max-width: 1250px
    }
    #integration .case_inner {
        margin: 0 25px;
        padding: 50px 0;
        text-align: center;
        background: #f7f4f0;
        -webkit-border-radius: 6px;
        -moz-border-radius: 6px;
        -ms-border-radius: 6px;
        border-radius: 6px
    }
    #integration .case h3 {
        display: inline-block;
        position: relative;
        color: #78282a;
        font-size: 1.65em;
        font-weight: 500
    }
    #integration .case h3:after {
        display: block;
        content: "";
        position: absolute;
        left: 0;
        bottom: -12px;
        width: 100%;
        height: 4px;
        background: #c8b175
    }
    #integration .case ul {
        margin: 50px 0 0
    }
    #integration .case li {
        float: left;
        width: 33.33%
    }
    #integration .case li a {
        display: block;
        color: #333;
        text-decoration: none
    }
    #integration .case li:nth-child(2) a {
        border-left: 1px solid #e0e0e0;
        border-right: 1px solid #e0e0e0
    }
    #integration .case li span {
        display: block
    }
    #integration .case li .label {
        margin: 25px 15px 0;
        min-height: 5.25em;
        font-size: 1.25em;
        font-weight: 500;
        line-height: 1.75em
    }
    #integration .case li .label em {
        font-size: .8em;
        line-height: 1.5em
    }
    #integration .case li .link {
        margin: 25px 0 0;
        color: #4970bf;
        font-size: 1.15em
    }
    #integration .case li a:hover .link {
        text-decoration: underline
    }
    #integration .case li a figure {
        -webkit-transition: all .25s ease-out;
        -moz-transition: all .25s ease-out;
        -ms-transition: all .25s ease-out;
        transition: all .25s ease-out
    }

    #integration .interview {
        margin: 70px 0 0;
        padding: 80px 0 120px;
        background: #f2f2f2
    }
    #integration .interview .index {
        position: relative;
        margin: 60px auto 0;
        max-width: 1240px;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        -webkit-user-drag: none;
        -moz-user-drag: none;
        -ms-user-drag: none;
        user-drag: none
    }
    #integration .interview .articles {
        position: relative;
        margin: 0 60px;
        height: 320px;
        overflow: hidden
    }
    #integration .interview article {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 320px;
        background: #fff;
        z-index: 1
    }
    #integration .interview article header {
        position: absolute;
        top: 0;
        left: 46.42%
    }
    #integration .interview article h3 {
        margin: 0 25px 0 0;
        padding: 35px 0 0;
        color: #78282a;
        font-size: 1.65em;
        font-weight: 500;
        line-height: 1.5em
    }
    #integration .interview article .client {
        margin: 20px 25px 0 0;
        color: #4d4d4d;
        font-size: 1em;
        line-height: 1.25em
    }
    #integration .interview article .summary {
        margin: 25px 25px 0 0
    }
    #integration .interview article .summary li {
        position: relative;
        padding: 9px 0 9px 74px;
        font-size: 1.15em
    }
    #integration .interview article .summary li span {
        display: inline-block;
        position: absolute;
        top: 50%;
        left: 0;
        margin: -12px 0 0;
        width: 64px;
        height: 24px;
        color: #fff;
        font-size: .8em;
        font-weight: 700;
        text-align: center;
        line-height: 24px;
        background: #a3a3a3;
        -webkit-border-radius: 24px;
        -moz-border-radius: 24px;
        -ms-border-radius: 24px;
        border-radius: 24px
    }
    #integration .interview article .more {
        position: absolute;
        right: 40px;
        bottom: 25px;
        font-size: 1.15em;
        font-weight: 500
    }
    #integration .interview article figure {
        position: relative;
        width: 42.85%;
        height: 320px;
        overflow: hidden
    }
    #integration .interview article figure img {
        position: absolute;
        top: 0;
        left: 50%;
        width: auto;
        height: 100%;
        -webkit-transform: translateX(-50%);
        -moz-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        transform: translateX(-50%)
    }
    #integration .interview article .logo {
        position: absolute;
        top: 8px;
        left: 8px;
        width: 10.71%
    }
    #integration .interview article .logo img {
        width: 100%;
        height: auto
    }
    #integration .interview .control {
        display: none
    }
    #integration .interview .control.on {
        display: block
    }
    #integration .interview .control li {
        position: absolute;
        top: 50%;
        margin: -17px 0 0;
        width: 19px;
        height: 34px;
        cursor: pointer;
        -webkit-transition: all .15s ease;
        -moz-transition: all .15s ease;
        -ms-transition: all .15s ease;
        transition: all .15s ease
    }
    #integration .interview .control .prev {
        left: 15px
    }
    #integration .interview .control .next {
        right: 15px
    }
    #integration .interview .control li:after {
        display: block;
        content: "";
        width: 19px;
        height: 34px;
        background: url("/casestudy/images/control.png?date=20250613") no-repeat;
        -webkit-background-size: 38px 68px;
        -moz-background-size: 38px 68px;
        -ms-background-size: 38px 68px;
        background-size: 38px 68px
    }
    #integration .interview .control .prev:after {
        background-position: 0 0
    }
    #integration .interview .control .next:after {
        background-position: -19px 0
    }
    #integration .interview .control .prev:hover:after {
        background-position: 0 -34px
    }
    #integration .interview .control .next:hover:after {
        background-position: -19px -34px
    }
    #integration .interview .control .prev:hover {
        -webkit-transform: translateX(-3px);
        -moz-transform: translateX(-3px);
        -ms-transform: translateX(-3px);
        transform: translateX(-3px)
    }
    #integration .interview .control .next:hover {
        -webkit-transform: translateX(3px);
        -moz-transform: translateX(3px);
        -ms-transform: translateX(3px);
        transform: translateX(3px)
    }
    #integration.related .interview {
        margin: 90px 0 0;
        padding: 70px 0 120px
    }
    #integration.related .interview h2 {
        font-size: 1.7em
    }
    #integration.related .interview h2 br {
        display: none
    }
    #integration .interview .index {
        margin: 40px auto 0
    }
    #interviews article a:hover figure img {
        width: 96%;
        right: 3px;
    }
    #scene .intro {
        background: #f7f4f0
    }
    #scene .intro_inner {
        margin: auto;
        padding: 50px 0 45px;
        max-width: 940px
    }
    #scene .intro figure {
        text-align: center
    }
    #scene .intro h2 {
        margin: 22px 25px 0;
        color: #78282a;
        font-size: 2.25em;
        font-weight: 500;
        text-align: center;
        line-height: 1.5em
    }
    #scene .intro p {
        margin: 25px 25px 0;
        color: #4d4d4d;
        font-size: 1.25em;
        line-height: 1.85em
    }
    #scene .intro .group {
        text-align: center
    }
    #scene .articles {
        margin: auto;
        max-width: 1250px
    }
    #scene article {
        position: relative;
        margin: 90px 25px 0;
        min-height: 300px
    }
    #scene article:first-child {
        margin: 60px 25px 0
    }
    #scene article h3 {
        position: relative;
        margin: 0 5% 0 36.25%;
        padding: 15px 0 0;
        font-size: 2em;
        font-weight: 500;
        line-height: 1.5em
    }
    #scene article h3:after {
        display: block;
        content: "";
        position: absolute;
        top: 14px;
        left: -35px;
        width: 22px;
        height: 19px;
        background: url("/casestudy/images/icon_quotation@2x.png?date=20250613") no-repeat;
        -webkit-background-size: 22px 19px;
        -moz-background-size: 22px 19px;
        -ms-background-size: 22px 19px;
        background-size: 22px 19px
    }
    #scene article .summary {
        margin: 30px 0 0 29.16%;
        padding: 32px 5% 32px 7%;
        border: 1px solid #bcadad
    }
    #scene article .summary p {
        font-size: 1.15em;
        font-style: italic;
        text-align: justify;
        line-height: 1.75em
    }
    #scene article .summary em {
        color: #e65649;
        font-weight: 700
    }
    #scene article figure {
        position: absolute;
        top: 0;
        left: 0;
        width: 33.33%
    }
    #scene article figure img {
        width: 100%;
        height: auto
    }
    #scene article.reverse h3 {
        position: relative;
        margin: 0 36.25% 0 5%
    }
    #scene article.reverse .summary {
        margin: 30px 29.16% 0 0;
        padding: 32px 5% 32px 7%;
        border: 1px solid #bcadad
    }
    #scene article.reverse figure {
        left: auto;
        right: 0
    }
    #solution {
        margin: 120px auto 0
    }
    #solution .inner {
        margin: auto;
        max-width: 1250px
    }
    #solution figure {
        text-align: center
    }
    #solution h2 {
        margin: 25px 0 0;
        color: #78282a;
        font-size: 2.25em;
        text-align: center;
        line-height: 1.25em
    }
    #solution .articles {
        margin: 0 13px;
        padding: 16px 0 0;
        max-width: 1224px
    }
    #solution article {
        float: left;
        margin: 24px 0 0;
        width: 33.33%
    }
    #solution article .base {
        margin: 0 12px;
        height: 100%;
        background: #f7f7f7
    }
    #solution article h3 {
        display: table;
        padding: 30px 0 25px;
        width: 100%;
        text-align: center
    }
    #solution article h3 span {
        display: table-cell;
        margin: auto;
        padding: 0 40px;
        height: 3em;
        font-size: 1.4em;
        font-weight: 500;
        vertical-align: middle;
        line-height: 1.5em
    }
    #solution article .summary {
        margin: 0 38px;
        padding: 20px 0 30px;
        border-top: 1px solid #c8b175
    }
    #solution article .summary p {
        min-height: 8.75em;
        font-size: 1.15em;
        text-align: justify;
        line-height: 1.75em
    }
    #solution article .summary .caution {
        display: inline-block;
        padding: 10px 0 0;
        font-size: .9em;
        line-height: 1.5em
    }
    #solution .detail {
        margin: 45px 0 0;
        text-align: center
    }
    #solution .detail p {
        display: inline-block
    }
    #solution .detail a {
        width: 240px;
        height: 48px;
        line-height: 49px
    }
    #problem {
        margin: 80px auto 0;
        max-width: 1250px
    }
    #problem .inner {
        margin: 0 25px;
        padding: 45px 0 50px;
        text-align: center;
        background: #f7f4f0;
        -webkit-border-radius: 6px;
        -moz-border-radius: 6px;
        -ms-border-radius: 6px;
        border-radius: 6px
    }
    #problem h2 {
        display: inline-block;
        position: relative;
        color: #78282a;
        font-size: 1.65em;
        font-weight: 500
    }
    #problem h2:after {
        display: block;
        content: "";
        position: absolute;
        left: 0;
        bottom: -12px;
        width: 100%;
        height: 4px;
        background: #c8b175
    }
    #problem ul {
        margin: 65px 10px 0;
        text-align: left
    }
    #problem li {
        float: left;
        width: 50%
    }
    #problem li a {
        display: block;
        position: relative;
        margin: 0 40px;
        min-height: 100px
    }
    #problem li a:after {
        display: block;
        content: "";
        position: absolute;
        top: 0;
        right: -40px;
        width: 1px;
        height: 100px;
        background: #e0e0e0
    }
    #problem li:last-child a:after {
        display: none
    }
    #problem li a:hover {
        text-decoration: none
    }
    #problem li span {
        display: block
    }
    #problem li .label {
        margin: 0 0 0 33.6%;
        color: #333;
        font-size: 1.25em;
        font-weight: 500;
        line-height: 1.5em
    }
    #problem li .label em {
        font-size: .75em;
        line-height: 1.5em
    }
    #problem li .link {
        margin: 25px 0 0 33.6%;
        font-size: 1.15em
    }
    #problem li a:hover .link {
        text-decoration: underline
    }
    #problem li figure {
        position: absolute;
        top: 0;
        left: 0;
        width: 28%
    }
    #problem li figure img {
        width: 100%;
        height: auto
    }
    #problem li a figure {
        -webkit-transition: all .25s ease-out;
        -moz-transition: all .25s ease-out;
        -ms-transition: all .25s ease-out;
        transition: all .25s ease-out
    }
    #problem li a:hover figure {
        -webkit-transform: translateY(-5px);
        -moz-transform: translateY(-5px);
        -ms-transform: translateY(-5px);
        transform: translateY(-5px)
    }
    #interview {
        background: #f2f2f2
    }
    #interview .intro {
        background: #e6e3df
    }
    #interview .intro_inner {
        position: relative;
        margin: auto;
        padding: 0 0 60px;
        max-width: 1200px;
        min-height: 300px
    }
    #interview .intro h2 {
        position: relative;
        margin: 0 0 0 50%;
        padding: 55px 25px 0 0;
        color: #78282a;
        font-size: 2.25em;
        font-weight: 500;
        line-height: 1.5em
    }
    #interview .intro h2:after {
        display: block;
        content: "";
        position: absolute;
        left: 0;
        bottom: -20px;
        width: 100%;
        height: 2px;
        background: #c8b175
    }
    #interview .intro .client {
        margin: 68px 25px 0 50%;
        font-size: 1em;
        line-height: 1.5em
    }
    #interview .intro .name {
        margin: 15px 25px 0 50%;
        font-size: 1.75em
    }
    #interview .intro .name small {
        font-size: .8em
    }
    #interview .intro figure {
        position: absolute;
        top: 0;
        left: 0;
        width: 50%;
        height: 100%;
        overflow: hidden
    }
    #interview .intro figure img {
        position: absolute;
        top: 0;
        left: 50%;
        width: auto;
        height: 100%;
        -webkit-transform: translateX(-50%);
        -moz-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        transform: translateX(-50%)
    }
    .intro_inner.vn_sp {
        display: none
    }
    #interview .outline {
        margin: 32px auto 0;
        max-width: 1250px
    }
    #interview .outline_inner {
        position: relative;
        margin: 0 25px;
        min-height: 160px
    }
    #interview .outline .summary {
        margin: 0 0 0 15.41%;
        padding: 10px 0 0
    }
    #interview .outline .summary li {
        float: left;
        position: relative;
        margin: 15px 40px 0 0;
        padding: 0 0 0 80px;
        font-size: 1.45em
    }
    #interview .outline .summary li span {
        display: inline-block;
        position: absolute;
        top: 50%;
        left: 0;
        margin: -12px 0 0;
        color: #fff;
        width: 64px;
        height: 24px;
        font-size: .65em;
        font-weight: 700;
        text-align: center;
        line-height: 24px;
        background: #a3a3a3;
        -webkit-border-radius: 24px;
        -moz-border-radius: 24px;
        -ms-border-radius: 24px;
        border-radius: 24px
    }
    #interview .outline .profile {
        margin: 20px 0 0 15.41%;
        color: #4d4d4d;
        font-size: 1em;
        line-height: 1.65em
    }
    #interview .outline figure {
        position: absolute;
        top: 0;
        left: 0;
        width: 13.33%
    }
    #interview .outline figure img {
        width: 100%;
        height: auto
    }
    #interview .points {
        margin: 32px auto 0;
        max-width: 1250px
    }
    #interview .points_inner {
        margin: 0 25px;
        padding: 52px 0 0;
        border-top: 1px solid #e0e0e0
    }
    #interview .points ul {
        padding: 13px 0 36px;
        border: 1px solid #6f4949
    }
    #interview .points li {
        position: relative;
        margin: 0 40px;
        padding: 22px 0 0 110px;
        color: #78282a;
        font-size: 1.25em;
        font-weight: 700;
        line-height: 1.5em
    }
    #interview .points li span {
        position: absolute;
        top: 22px;
        left: 0;
        width: 110px;
        font-weight: 400
    }
    #interview .points li span:after {
        display: block;
        content: "";
        position: absolute;
        top: 50%;
        right: 16px;
        margin: -10px 0 0;
        width: 1px;
        height: 20px;
        background: #6f4949
    }
    #interview .points li span em {
        font-weight: 700
    }
    #interview .contents {
        margin: 48px auto 0;
        max-width: 1250px
    }
    #interview .contents_inner {
        margin: 0 25px;
        padding: 0 0 75px;
        background: #fff
    }
    #interview .content {
        margin: 0 50px
    }
    #interview .contents h2 {
        position: relative;
        margin: 0 auto 60px;
        padding: 70px 0 35px;
        max-width: 735px;
        font-size: 1.7em;
        font-weight: 500;
        text-align: center;
        line-height: 1.75em
    }
    #interview .contents h2:after {
        display: block;
        content: "";
        position: absolute;
        left: 50%;
        bottom: 0;
        margin: 0 0 0 -60px;
        width: 120px;
        height: 2px;
        background: #c8b175
    }
    #interview .contents h3 {
        position: relative;
        margin: 40px auto 0;
        max-width: 720px;
        color: #78282a;
        font-size: 1.15em;
        font-weight: 700;
        font-style: italic;
        line-height: 1.75em
    }
    #interview .contents h3:after {
        display: block;
        content: "";
        position: absolute;
        top: .65em;
        left: -30px;
        width: 16px;
        height: 2px;
        background: #c8b175
    }
    #interview .contents p {
        margin: 40px auto 0;
        max-width: 720px;
        font-size: 1.15em;
        text-align: justify;
        line-height: 1.85em
    }
    #interview .contents p em {
        color: #e65649;
        font-weight: 700
    }
    #interview .contents figure {
        margin: 75px 0 0
    }
    #interview .contents figure img {
        width: 100%;
        height: auto
    }
    #interview .pages {
        padding: 45px 0;
        text-align: center
    }
    #interview .pages_inner {
        margin: 0 25px
    }
    #interview .pages .label {
        position: relative;
        padding: 0 0 15px;
        color: #78282a;
        font-size: 1.15em;
        letter-spacing: .1em
    }
    #interview .pages .label:after {
        display: block;
        content: "";
        position: absolute;
        left: 50%;
        bottom: 0;
        margin: 0 0 0 -50px;
        width: 100px;
        height: 3px;
        background: #c8b175
    }
    #interview .pages .guide {
        margin: 30px 0 0;
        font-size: 1.25em;
        font-weight: 500;
        line-height: 1.75em
    }
    #interview .pages .page {
        margin: 35px 0 0;
        font-size: 0;
        height: 40px
    }
    #interview .pages .page li {
        display: inline-block;
        margin: 0 4px;
        font-size: 12pt;
        vertical-align: top
    }
    #interview .pages .page li a, #interview .pages .page li span {
        display: block;
        width: 40px;
        height: 40px;
        color: #78282a;
        line-height: 40px;
        background: #fff;
        -webkit-border-radius: 4px;
        -moz-border-radius: 4px;
        -ms-border-radius: 4px;
        border-radius: 4px;
        -webkit-transition: background .15s ease;
        -moz-transition: background .15s ease;
        -ms-transition: background .15s ease;
        transition: background .15s ease
    }
    #interview .pages .page li a:hover {
        text-decoration: none;
        background: #e0e0e0
    }
    #interview .pages .page .current a, #interview .pages .page .current a:hover {
        color: #fff;
        font-weight: 700;
        background: #78282a
    }
    #interview .pages .page li span, #interview .pages .page .prev a, #interview .pages .page .next a {
        position: relative;
        text-indent: 100%;
        white-space: normal;
        overflow: hidden
    }
    #interview .pages .page li span {
        background: #e0e0e0
    }
    #interview .pages .page .prev span:after, #interview .pages .page .next span:after, #interview .pages .page .prev a:after, #interview .pages .page .next a:after {
        display: block;
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        margin: -7px 0 0 -4px;
        width: 9px;
        height: 15px;
        background: url("/casestudy/images/pasing.png?date=20250613") no-repeat;
        -webkit-background-size: 18px 45px;
        -moz-background-size: 18px 45px;
        -ms-background-size: 18px 45px;
        background-size: 18px 45px
    }
    #interview .pages .page .prev span:after {
        background-position: 0 -30px
    }
    #interview .pages .page .next span:after {
        background-position: -9px -30px
    }
    #interview .pages .page .prev a:after {
        background-position: 0 0
    }
    #interview .pages .page .next a:after {
        background-position: -9px 0
    }
    #interviews {
        background: #f2f2f2
    }
    #integration #interviews{
        margin-top: 65px;
        padding-top: 40px;
    }
    #interviews .inner {
        position: relative;
        margin: auto;
        padding: 0 0 120px;
        max-width: 1240px;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        -webkit-user-drag: none;
        -moz-user-drag: none;
        -ms-user-drag: none;
        user-drag: none
    }
    #interviews h2 {
        margin: auto;
        padding: 60px 0 0;
        max-width: 1200px;
        font-size: 1.8em;
        text-align: center;
        line-height: 1.5em;
        border-top: 1px solid #e0e0e0
    }
    
    #interviews .index {
        margin: 25px 50px 50px;
        overflow: hidden
    }
    #interviews article {
        float: left;
        width: 23%;
        max-width: 350px;
        min-width: 240px;
        position: relative;
    }
    #integration #interviews article{
        margin-bottom: 3%;
    }
    #interviews article a {
        display: block;
        margin: 0 10px;
        padding: 0 0 30px;
        color: #4d4d4d;
        background: #fff;
        height: 300px;
        text-align: center;
    }
    

    #interviews article a .pb_small {
        font-size: 0.9em;
        display: block;
        text-align: center;
        margin-right: auto;
        margin-left: auto;
    }

    #interviews article a:focus,
    #interviews article a:active {
        outline: none;
    }
    #interviews article a:hover {
        text-decoration: none
    }
    #interviews article h3 {
        margin: 0 25px;
        min-height: 4.5em;
        color: #78282a;
        font-size: 1.15em;
        font-weight: 600;
        line-height: 1.5em;
        padding-top: 20px;
        padding-bottom: 10px;
    }
    #interviews article h4 {
        margin: 0 25px;
        min-height: 3em;

        color: #78282a;
        font-size: 0.9em;
        font-weight: 500;
        line-height: 1.3em;
    }
    #interviews article .client {
        margin: 0 25px;
        font-size: .85em;
        line-height: 1.25em;
        text-align: left;
    }
    #interviews article .summary {
        margin: 25px 25px 0
    }
    #interviews article .summary li {
        margin: 2px 0 0;
        font-size: .85em;
        line-height: 1.5em;
    }
    #interviews article .summary li span {
        display: inline-block;
        position: relative;
        padding: 0 20px 0 0
    }
    #interviews article .summary li span:after {
        display: block;
        content: "";
        position: absolute;
        top: 50%;
        right: 9px;
        margin: -6px 0 0;
        width: 1px;
        height: 12px;
        background: #4d4d4d
    }
    #interviews article figure img {
        width: 90%;
        height: auto;
        position: absolute;
        bottom: 0;
        right: 4%;
    }
    #interviews .slick-arrow {
        position: absolute;
        top: 50%;
        margin: -17px 0 0;
        width: 19px;
        height: 34px;
        border: none;
        background: transparent;
        text-indent: -9999px;
        cursor: pointer;
        -webkit-transition: all .15s ease;
        -moz-transition: all .15s ease;
        -ms-transition: all .15s ease;
        transition: all .15s ease
    }
    #interviews .slick-arrow:focus,
    #interviews .slick-arrow:active {
        outline: none;
    }
    #interviews .slick-prev {
        left: 15px
    }
    #interviews .slick-next {
        right: 15px
    }
    #interviews .slick-arrow:after {
        display: block;
        content: "";
        width: 19px;
        height: 34px;
        background: url("/casestudy/images/control.png?date=20250613") no-repeat;
        -webkit-background-size: 38px 68px;
        -moz-background-size: 38px 68px;
        -ms-background-size: 38px 68px;
        background-size: 38px 68px
    }
    #interviews .slick-prev:after {
        background-position: 0 0
    }
    #interviews .slick-next:after {
        background-position: -19px 0
    }
    #interviews .slick-prev:hover:after {
        background-position: 0 -34px
    }
    #interviews .slick-next:hover:after {
        background-position: -19px -34px
    }
    #interviews .slick-prev:hover {
        -webkit-transform: translateX(-3px);
        -moz-transform: translateX(-3px);
        -ms-transform: translateX(-3px);
        transform: translateX(-3px)
    }
    #interviews .slick-next:hover {
        -webkit-transform: translateX(3px);
        -moz-transform: translateX(3px);
        -ms-transform: translateX(3px);
        transform: translateX(3px)
    }
    
    
}

@media screen and (min-width:741px) and (max-width:1023px) {
    #integration .case li .label {
        font-size: 1em;
        text-align: left
    }
    #integration .case li .label em {
        display: block
    }
    #integration .case li .label br {
        display: none
    }
    #integration .interview article h3 {
        padding: 20px 0 0;
        font-size: 1.25em
    }
    #integration .interview article .client {
        margin: 15px 25px 0 0;
        font-size: .95em
    }
    #integration .interview article .summary {
        margin: 15px 25px 0 0
    }
    #integration .interview article .summary li {
        padding: 9px 0 9px 74px;
        font-size: 1em
    }
    #solution article {
        width: 50%
    }
    #interviews article {
        float: left;
        width: 50%
    }
}

@media only screen and (max-width:740px) {
    #integration {
        padding: 30px 0 0
    }
    #integration .copy {
        margin: 0 35px
    }
    #integration .copy p {
        font-size: 1em;
        line-height: 1.75em
    }
    #integration .copy p br {
        display: none
    }
    #integration .scene h2, #integration .interview h2 {
        margin: 0 20px;
        font-size: 1.4em;
        text-align: center;
        line-height: 1.5em
    }
    #integration .scene h2 {
        margin: 40px 20px 0;
        padding: 50px 0 0;
        color: #4d4d4d;
        border-top: 1px solid #e0e0e0
    }
    #integration .leadcopy {
        margin: 30px 35px 0;
        color: #4d4d4d;
        font-size: 1.1em;
        line-height: 1.6em
    }
    #integration .leadcopy br {
        display: none
    }
    #integration .case {
        margin: 40px 0 0;
        padding: 30px 0 60px;
        text-align: center;
        background: #f7f4f0
    }
    #integration .case h3 {
        display: inline-block;
        position: relative;
        color: #78282a;
        font-size: 1.2em;
        font-weight: 500
    }
    #integration .case h3:after {
        display: block;
        content: "";
        position: absolute;
        left: 0;
        bottom: -6px;
        width: 100%;
        height: 2px;
        background: #c8b175
    }
    #integration .case ul {
        margin: 35px 20px 0
    }
    #integration .case li {
        border-top: 1px solid #e0e0e0
    }
    #integration .case li:last-child {
        border-bottom: 1px solid #e0e0e0
    }
    #integration .case li a {
        display: block;
        position: relative;
        padding: 20px 0;
        color: #333;
        min-height: 40px
    }
    #integration .case li a:after {
        display: block;
        content: "";
        position: absolute;
        top: 50%;
        right: 15px;
        margin: -6px 0 0;
        width: 8px;
        height: 13px;
        background: url("../images/index/icon_arrow05.png?date=20250613") no-repeat;
        -webkit-background-size: 8px 13px;
        -moz-background-size: 8px 13px;
        -ms-background-size: 8px 13px;
        background-size: 8px 13px
    }
    #integration .case li span {
        display: block
    }
    #integration .case li .label {
        margin: 0 40px 0 70px;
        font-size: 1em;
        font-weight: 500px;
        text-align: left;
        line-height: 1.5em
    }
    #integration .case li .label em {
        display: block;
        font-size: .8em;
        line-height: 1.5em
    }
    #integration .case li .label br {
        display: none
    }
    #integration .case li .link {
        display: none
    }
    #integration .case figure {
        position: absolute;
        top: 20px;
        left: 0
    }
    #integration .case figure img {
        width: auto;
        height: 40px
    }
    #integration .interview {
        padding: 60px 0 70px;
        border-top: 1px solid #e0e0e0;
        background: #f2f2f2
    }
    #integration .interview .index {
        position: relative;
        margin: 30px auto 0;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        -webkit-user-drag: none;
        -moz-user-drag: none;
        -ms-user-drag: none;
        user-drag: none
    }
    #integration .interview .articles {
        position: relative;
        margin: 0 50px;
        height: 335px;
        overflow: hidden
    }
    #integration .interview article {
        position: absolute;
        top: 0;
        left: 0;
        padding: 0 0 30px;
        width: 100%;
        height: 305px;
        background: #fff;
        z-index: 1
    }
    #integration .interview article h3 {
        margin: 20px 20px 0;
        color: #78282a;
        font-size: 1em;
        font-weight: 500;
        line-height: 1.5em
    }
    #integration .interview article h3 br {
        display: none
    }
    #integration .interview article .client {
        margin: 10px 20px 0;
        color: #4d4d4d;
        font-size: .85em;
        line-height: 1.25em
    }
    #integration .interview article .summary {
        margin: 0 20px;
        padding: 10px 0 0
    }
    #integration .interview article .summary li {
        position: relative;
        margin: 6px 0 0;
        font-size: .8em;
        line-height: 1.25em
    }
    #integration .interview article .summary li span {
        display: inline-block;
        position: relative;
        padding: 0 18px 0 0
    }
    #integration .interview article .summary li span:after {
        display: block;
        content: "";
        position: absolute;
        top: 50%;
        right: 7px;
        margin: -6px 0 0;
        width: 1px;
        height: 12px;
        background: #595959
    }
    #integration .interview article .more {
        margin: 25px 0 0;
        font-size: 1em;
        text-align: center
    }
    #integration .interview article .more a:after {
        display: none
    }
    #integration .interview article figure img {
        width: 100%;
        height: auto
    }
    #integration .interview article .logo {
        display: none
    }
    #integration .interview .control {
        display: none
    }
    #integration .interview .control.on {
        display: block
    }
    #integration .interview .control li {
        position: absolute;
        top: 50%;
        margin: -50px 0 0;
        width: 50px;
        height: 100px;
        cursor: pointer
    }
    #integration .interview .control .prev {
        left: 0
    }
    #integration .interview .control .next {
        right: 0
    }
    #integration .interview .control li:after {
        display: block;
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        margin: -10px 0 0 -5px;
        width: 11px;
        height: 19px;
        background: url("/casestudy/images/control_min.png?date=20250613") no-repeat;
        -webkit-background-size: 22px 19px;
        -moz-background-size: 22px 19px;
        -ms-background-size: 22px 19px;
        background-size: 22px 19px
    }
    #integration .interview .control .prev:after {
        background-position: 0 0
    }
    #integration .interview .control .next:after {
        background-position: -11px 0
    }
    #integration.related {
        padding: 0
    }
    #scene .intro {
        padding: 35px 0 40px;
        background: #f7f4f0
    }
    #scene .intro_inner {
        margin: 0 40px
    }
    #scene .intro figure {
        text-align: center
    }
    #scene .intro figure img {
        width: auto;
        height: 55px
    }
    #scene .intro h2 {
        margin: 15px 0 0;
        color: #78282a;
        font-size: 1.45em;
        font-weight: 500;
        text-align: center;
        line-height: 1.5em
    }
    #scene .intro p {
        margin: 15px 0 0;
        color: #4d4d4d;
        font-size: 1em;
        line-height: 1.85em
    }
    #scene .intro .group {
        text-align: center
    }
    #scene .articles {
        margin: 0 20px
    }
    #scene article {
        padding: 50px 0 45px;
        border-bottom: 1px solid #e0e0e0
    }
    #scene article:first-child {
        padding: 40px 0 50px
    }
    #scene article h3 {
        position: relative;
        margin: 15px 25px 0;
        font-size: 1.15em;
        font-weight: 500;
        line-height: 1.45em
    }
    #scene article h3:after {
        display: block;
        content: "";
        position: absolute;
        top: -2px;
        left: -25px;
        width: 15px;
        height: 13px;
        background: url("/casestudy/images/icon_quotation@2x.png?date=20250613") no-repeat;
        -webkit-background-size: 15px 13px;
        -moz-background-size: 15px 13px;
        -ms-background-size: 15px 13px;
        background-size: 15px 13px
    }
    #scene article .summary {
        margin: 15px 25px 0
    }
    #scene article .summary p {
        font-size: .95em;
        font-style: italic;
        text-align: justify;
        line-height: 1.75em
    }
    #scene article .summary em {
        color: #e65649;
        font-weight: 700
    }
    #scene article figure img {
        width: 100%;
        height: auto
    }
    #solution {
        padding: 60px 0
    }
    #solution figure {
        text-align: center
    }
    #solution figure img {
        width: auto;
        height: 50px
    }
    #solution h2 {
        margin: 15px 0 0;
        color: #78282a;
        font-size: 1.45em;
        font-weight: 500;
        text-align: center;
        line-height: 1.5em
    }
    #solution .articles {
        margin: 0 20px
    }
    #solution article {
        margin: 10px 0 0;
        padding: 35px 0 30px;
        background: #f7f7f7
    }
    #solution article h3 {
        position: relative;
        margin: 0 25px;
        font-size: 1.15em;
        font-weight: 500;
        text-align: center;
        line-height: 1.5em
    }
    #solution article h3:after {
        display: block;
        content: "";
        position: absolute;
        left: 50%;
        bottom: -16px;
        margin: 0 0 0 -16px;
        width: 32px;
        height: 1px;
        background: #c8b175
    }
    #solution article h3 br {
        display: none
    }
    #solution article .summary {
        margin: 35px 25px 0
    }
    #solution article .summary p {
        color: #4d4d4d;
        font-size: .9em;
        text-align: justify;
        line-height: 1.85em
    }
    #solution article .summary .caution {
        display: inline-block;
        padding: 10px 0 0;
        font-size: .9em;
        line-height: 1.5em
    }
    #solution .detail {
        margin: 40px 0 0;
        text-align: center
    }
    #solution .detail p {
        display: inline-block
    }
    #solution .detail a {
        width: 270px;
        height: 50px;
        line-height: 50px
    }
    #problem {
        padding: 30px 0 60px;
        text-align: center;
        background: #f7f4f0
    }
    #problem h2 {
        display: inline-block;
        position: relative;
        color: #78282a;
        font-size: 1.2em;
        font-weight: 500
    }
    #problem h2:after {
        display: block;
        content: "";
        position: absolute;
        left: 0;
        bottom: -6px;
        width: 100%;
        height: 2px;
        background: #c8b175
    }
    #problem ul {
        margin: 35px 20px 0
    }
    #problem li {
        border-top: 1px solid #e0e0e0
    }
    #problem li:last-child {
        border-bottom: 1px solid #e0e0e0
    }
    #problem li a {
        display: block;
        position: relative;
        padding: 20px 0;
        min-height: 40px;
        color: #333
    }
    #problem li a:after {
        display: block;
        content: "";
        position: absolute;
        top: 50%;
        right: 15px;
        margin: -6px 0 0;
        width: 8px;
        height: 13px;
        background: url("../images/index/icon_arrow05.png?date=20250613") no-repeat;
        -webkit-background-size: 8px 13px;
        -moz-background-size: 8px 13px;
        -ms-background-size: 8px 13px;
        background-size: 8px 13px
    }
    #problem li span {
        display: block
    }
    #problem li .label {
        margin: 0 40px 0 70px;
        font-size: 1em;
        font-weight: 500px;
        text-align: left;
        line-height: 1.5em
    }
    #problem li .label em {
        display: block
    }
    #problem li .label br {
        display: none
    }
    #problem li .link {
        display: none
    }
    #problem figure {
        position: absolute;
        top: 20px;
        left: 0
    }
    #problem figure img {
        width: auto;
        height: 40px
    }
    #interview {
        background: #f2f2f2
    }
    #interview .intro {
        background: #e6e3df
    }
    #interview .intro_inner {
        margin: 0 25px
    }
    #interview .intro h2 {
        position: relative;
        padding: 25px 0 15px;
        color: #78282a;
        font-size: 1.5em;
        font-weight: 500;
        text-align: center;
        line-height: 1.5em
    }
    #interview .intro h2:after {
        display: block;
        content: "";
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 2px;
        background: #c8b175
    }
    #interview .intro .summary {
        position: relative;
        margin: 10px auto 0;
        padding: 0 0 30px;
        max-width: 480px
    }
    #interview .intro .client {
        margin: 0 0 0 135px;
        padding: 10px 0 0;
        font-size: .75em;
        line-height: 1.75em
    }
    #interview .intro .client span {
        display: block
    }
    #interview .intro .name {
        margin: 12px 0 0 135px;
        font-size: 1.15em
    }
    #interview .intro .name small {
        font-size: .8em
    }
    #interview .intro figure {
        position: absolute;
        left: 0;
        bottom: 0;
        width: 125px;
        height: 125px;
        overflow: hidden
    }
    #interview .intro figure img {
        position: absolute;
        top: 0;
        left: 50%;
        width: auto;
        height: 100%;
        -webkit-transform: translateX(-50%);
        -moz-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        transform: translateX(-50%)
    }
    .intro_inner.vn_pc {
        display: none
    }
    #interview .outline {
        position: relative;
        margin: 25px 20px 0
    }
    #interview .outline .summary {
        margin: 0 0 0 95px;
        padding: 6px 0 0;
        min-height: 80px
    }
    #interview .outline .summary li {
        position: relative;
        margin: 0 0 10px;
        padding: 0 0 0 45px;
        font-size: .95em;
        line-height: 1.25em
    }
    #interview .outline .summary li span {
        display: inline-block;
        position: absolute;
        top: 50%;
        left: 0;
        margin: -8px 0 0;
        color: #fff;
        width: 40px;
        height: 16px;
        font-size: .7em;
        font-weight: 700;
        text-align: center;
        line-height: 16px;
        background: #a3a3a3;
        -webkit-border-radius: 16px;
        -moz-border-radius: 16px;
        -ms-border-radius: 16px;
        border-radius: 16px
    }
    #interview .outline .profile {
        margin: 8px 0 0;
        color: #4d4d4d;
        font-size: .75em;
        line-height: 1.65em
    }
    #interview .outline figure {
        position: absolute;
        top: 0;
        left: 0
    }
    #interview .outline figure img {
        width: 80px;
        height: 80px
    }
    #interview .points {
        margin: 0 20px
    }
    #interview .points_inner {
        margin: 20px 0 0;
        padding: 40px 0;
        border-top: 1px solid #e0e0e0
    }
    #interview .points ul {
        padding: 10px 0 25px;
        border: 2px solid #6f4949
    }
    #interview .points li {
        padding: 15px 25px 0;
        color: #78282a;
        font-size: 1.15em;
        font-weight: 700;
        text-align: justify;
        line-height: 1.5em
    }
    #interview .points li span {
        display: block;
        position: relative;
        padding: 0 0 15px;
        font-size: .9em;
        font-weight: 400;
        text-align: center
    }
    #interview .points li span:after {
        display: block;
        content: "";
        position: absolute;
        left: 50%;
        bottom: 10px;
        margin: 0 0 0 -12px;
        width: 24px;
        height: 1px;
        background: #6f4949
    }
    #interview .points li span em {
        font-weight: 700
    }
    #interview .contents {
        padding: 0 0 45px;
        background: #fff
    }
    #interview .content {
        margin: 0 40px
    }
    #interview .contents h2 {
        position: relative;
        padding: 50px 0 15px;
        font-size: 1.2em;
        font-weight: 500;
        text-align: center;
        line-height: 1.5em
    }
    #interview .contents h2:after {
        display: block;
        content: "";
        position: absolute;
        left: 50%;
        bottom: 0;
        margin: 0 0 0 -22px;
        width: 44px;
        height: 1px;
        background: #c8b175
    }
    #interview .contents h3 {
        position: relative;
        margin: 25px 0 0;
        color: #78282a;
        font-size: 1.1em;
        font-weight: 700;
        font-style: italic;
        line-height: 1.5em
    }
    #interview .contents h3:after {
        display: block;
        content: "";
        position: absolute;
        top: .6em;
        left: -20px;
        width: 12px;
        height: 2px;
        background: #c8b175
    }
    #interview .contents p {
        margin: 18px 0 0;
        font-size: 1em;
        text-align: justify;
        line-height: 1.85em
    }
    #interview .contents p em {
        color: #e65649;
        font-weight: 700
    }
    #interview .contents figure {
        margin: 50px 0 0
    }
    #interview .contents figure img {
        width: 100%;
        height: auto
    }
    #interview .pages {
        padding: 40px 0;
        text-align: center
    }
    #interview .pages_inner {
        margin: 0 20px
    }
    #interview .pages .label {
        position: relative;
        padding: 0 0 8px;
        color: #78282a;
        font-size: 1em
    }
    #interview .pages .label:after {
        display: block;
        content: "";
        position: absolute;
        left: 50%;
        bottom: 0;
        margin: 0 0 0 -38px;
        width: 77px;
        height: 2px;
        background: #c8b175
    }
    #interview .pages .guide {
        margin: 20px 14px 0;
        font-size: 1em;
        font-weight: 500;
        line-height: 1.75em
    }
    #interview .pages .guide br {
        display: none
    }
    #interview .pages .page {
        margin: 25px 0 0;
        font-size: 0
    }
    #interview .pages .page li {
        display: inline-block;
        margin: 0 4px;
        font-size: 12pt;
        vertical-align: top
    }
    #interview .pages .page li a, #interview .pages .page li span {
        display: block;
        width: 48px;
        height: 48px;
        color: #78282a;
        line-height: 48px;
        background: #fff;
        -webkit-border-radius: 4px;
        -moz-border-radius: 4px;
        -ms-border-radius: 4px;
        border-radius: 4px
    }
    #interview .pages .page .current a {
        color: #fff;
        font-weight: 700;
        background: #78282a
    }
    #interview .pages .page li span, #interview .pages .page .prev a, #interview .pages .page .next a {
        position: relative;
        text-indent: 100%;
        white-space: normal;
        overflow: hidden
    }
    #interview .pages .page li span {
        background: #e0e0e0
    }
    #interview .pages .page .prev span:after, #interview .pages .page .next span:after, #interview .pages .page .prev a:after, #interview .pages .page .next a:after {
        display: block;
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        margin: -7px 0 0 -4px;
        width: 9px;
        height: 15px;
        background: url("/casestudy/images/pasing.png?date=20250613") no-repeat;
        -webkit-background-size: 18px 45px;
        -moz-background-size: 18px 45px;
        -ms-background-size: 18px 45px;
        background-size: 18px 45px
    }
    #interview .pages .page .prev span:after {
        background-position: 0 -30px
    }
    #interview .pages .page .next span:after {
        background-position: -9px -30px
    }
    #interview .pages .page .prev a:after {
        background-position: 0 0
    }
    #interview .pages .page .next a:after {
        background-position: -9px 0
    }
    #interviews {
        background: #f2f2f2
    }
    #interviews .inner {
        position: relative;
        margin: 0 20px;
        padding: 35px 0 70px;
        border-top: 1px solid #e0e0e0
    }
    #interviews h2 {
        margin: auto;
        font-size: 1.1em;
        text-align: center;
        line-height: 1.5em
    }
    
    #interviews .index {
        margin: 20px 30px 0;
        overflow: hidden
    }
    #interviews article {
        float: left;
        width: 100%
    }
    #interviews article a {
        display: block;
        padding: 0 0 20px;
        color: #4d4d4d;
        background: #fff
    }
    #interviews article a:focus,
    #interviews article a:focus {
        outline: none;
    }
    #interviews article h3 {
        padding: 30px 25px;
        color: #78282a;
        font-size: 1.6em;
        font-weight: 500;
        line-height: 1.3em;
    }
    #interviews article h4 {
        margin: 15px 20px 0;
        color: #78282a;
        font-size: 1em;
        font-weight: 500;
        line-height: 1.5em
    }
    #interviews article .client {
        margin: 10px 25px 0;
        font-size: 1em;
        line-height: 1.25em;
        text-align: left;
    }
    #interviews article .summary {
        margin: 0 20px;
        padding: 10px 0 0
    }
    #interviews article .summary li {
        position: relative;
        margin: 6px 0 0;
        font-size: .8em;
        line-height: 1.25em
    }
    #interviews article .summary li span {
        display: inline-block;
        position: relative;
        padding: 0 18px 0 0
    }
    #interviews article .summary li span:after {
        display: block;
        content: "";
        position: absolute;
        top: 50%;
        right: 7px;
        margin: -6px 0 0;
        width: 1px;
        height: 12px;
        background: #595959
    }
    #interviews article {
        text-align: center;
    }
    #interviews article figure {
        text-align: center;
    }
    #interviews article figure img {
        width: 70%;
        height: auto;
        margin-left:auto;
        margin-right:auto;
    }
    #interviews .slick-arrow {
        position: absolute;
        top: 50%;
        margin: -50px 0 0;
        width: 50px;
        height: 100px;
        cursor: pointer;
        border:none;
        background: transparent;
        text-indent: -9999px;
    }
    #interviews .slick-prev {
        left: -20px
    }
    #interviews .slick-next {
        right: -20px
    }
    #interviews .slick-arrow:after {
        display: block;
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        margin: -10px 0 0 -5px;
        width: 11px;
        height: 19px;
        background: url("/casestudy/images/control_min.png?date=20250613") no-repeat;
        -webkit-background-size: 22px 19px;
        -moz-background-size: 22px 19px;
        -ms-background-size: 22px 19px;
        background-size: 22px 19px
    }
    #interviews .slick-prev:after {
        background-position: 0 0
    }
    #interviews .slick-next:after {
        background-position: -11px 0
    }
    
    
    
}
/* 20180425add */
    .interviewRe .introRe { position:relative; background:#e6e3df; }
    .interviewRe .introRe_inner { max-width:1200px; min-height:auto; margin:auto; padding:10px; }
    .interviewRe .visual { display:block; position:absolute; top:0; left:0; width:100%; height:100%; overflow:hidden; }
    .interviewRe .visual::after { content:''; display:block; position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.0); }
    .interviewRe .introRe .summary { position:relative; z-index:2; top:auto; right:auto; max-width:100%; margin:0 auto; padding:15px; background:rgba(255,255,255,0.85); transform:translate(0,0); }
    .interviewRe .introRe h2 { position:relative; margin-bottom:0.5em; padding:0 40px 0.25em 0; border-bottom:#c7b079 1px solid; color:#78282a; font-size:1.3em; font-weight:400; line-height:1.5; }
    .interviewRe .introRe p { padding-right:40px; }
    .interviewRe .introRe .client { margin:0 0 0.5em 0; line-height:1.5; font-size:0.75em; }
    .interviewRe .introRe .name { margin:0; font-size:1.15em; }
    .interviewRe .introRe .name small { font-size:0.8em; }
    .subHead { font-size:1.1em; font-weight:600; }
    @media (min-width: 741px) {
        .interviewRe .introRe { background:#e6e3df; }
        .interviewRe .introRe_inner { position:relative; max-width:1200px; min-height:300px; margin:0 auto; padding:0 0 60px; }
        .interviewRe .visual { display:block; position:absolute; top:0; left:0; width:100%; height:100%; overflow:hidden; }
        .interviewRe .visual::after { content:''; display:block; position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.0); }
        .interviewRe .introRe .summary { position:absolute; z-index:2; top:50%; left:0; padding:40px 0 40px 40px; background:rgba(255,255,255,0.85); transform:translate(0,-50.0%); }
        .interviewRe .introRe h2 { position:relative; margin-bottom:0.5em; margin-right: 40px; padding:0 0 0.25em 0; border-bottom:#c7b079 1px solid; color:#78282a; font-size:2.25em; font-weight:400; line-height:1.5; }
        .interviewRe .introRe p { padding-right:40px; }
        .interviewRe .introRe .client { margin:0 0 0.5em 0; line-height:1.5; font-size:1.0em; }
        .interviewRe .introRe .name { margin:0; font-size:1.75em; }
        .interviewRe .introRe .name small { font-size:0.8em; }
    }
    @media screen and (min-width:1024px)  {
        .interviewRe .visual img { display:block; width:1900px/*auto*/; height:/*1410px*/; margin:0 auto; transform:translate(0,-38.0%); }
    }
    @media screen and (min-width:741px) and (max-width: 1023px) {
        .interviewRe .visual img { display:block; width:1300px/*auto*/; height:/*1410px*/; margin:0 auto; transform:translate(0,-38.0%); }
    }
    @media only screen and (max-width:740px) {
        .interviewRe .visual img { display:block; width:800px/*auto*/; height:/*1410px*/; margin:0 auto; transform:translate(0,-42.0%); }
    }



#integration #interviews .category_list{
    padding-top: 25px;
    padding-bottom: 35px;
}
#integration #interviews .category_list ul{
    text-align: center;
}
#integration #interviews .category_list ul li{
    display: inline-block;
    margin: 5px;
}
#integration #interviews .category_list ul li a{
    color: #77292c;
    font-size: 13px;
    background: #fff;
    border: 1px solid #77292c;
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 5px;
    display: block;
}
#integration #interviews .category_list ul li a:hover{
    background: #77292c;
    color: #fff;
}

#integration #interviews h2{
    padding: 20px 0 50px;
    border-top: none;
    position: relative;
    font-size: 22px;
    font-weight: bold;
    line-height: 1em;
}

#integration #interview .pages{
    padding-top: 15px;
    padding-bottom: 85px;
}
#integration #interview .pages .page{
    margin-top: 0px;
}
#integration #interviews .articles{
    max-width: 1180px;
    margin: 0 auto;
}


@media only screen and (max-width:740px) {
    #integration #interviews .category_list ul li {
        padding: 10px 10px;
    }
    #integration #interviews article{
        margin-bottom: 5%;
    }
    #integration #interview .pages{
        padding-top: 5%;
        padding-bottom: 10%;
    }
    #integration #interviews{
        margin-top: 5%;
        padding-top: 10%;
    }
    #integration #interviews h2{
        font-size: 1.5em;
        line-height: 1.7em;
        padding-top: 65px;
    }
    #integration #interviews h2::after{
        width: 55px;
        background-size: contain;
    }
    #integration .leadcopy{
        margin-top: 20px;
    }
    #integration #interviews .index{
        margin-top: 30px;
    }
}
@media only screen and (max-width: 1840px) and (min-width: 1180px;){
    #integration #interviews article a {
        height: 262px;
    }
}

.sort_order {
    display: block;
    width: 100%;
    text-align: left;
    padding: 30px 0 0 10px;
    font-size: 0.8em;display: block;
}

..tab_wrap{width:500px; margin:80px auto;}
input[type="radio"]{display:none;}
.tab_area{font-size:0; margin:0 10px; text-align: center;}
.tab_area label{margin:8px 5px; display:inline-block; padding:10px 20px; color:#77292c; background:#fff; border: 1px solid #77292c; border-radius: 5px; text-align:center; font-size:13px; cursor:pointer; transition:ease 0.2s opacity;}
.tab_area label:hover{background: #77292c; color: #fff; transition : all 200ms;}
.tab_panel{width:100%; display:none; padding-top: 15px;}
.tab_panel p{font-size:14px; letter-spacing:1px; text-align:center;}
.tab_inner_box {display: block; width: 100%; clear: both;}
.tab_panel a { cursor: pointer;}
.tab_panel a:hover {
	box-shadow: 0 15px 30px -5px rgba(0,0,0,.05), 0 0 5px rgba(0,0,0,.1);
    transform: translateY(-2px);
    transition : all 200ms;
}
#tab1:checked ~ .tab_area .tab1_label{background: #77292c; color: #fff;}
#tab1:checked ~ .panel_area #panel1{display:block;}
#tab2:checked ~ .tab_area .tab2_label{background: #77292c; color: #fff;}
#tab2:checked ~ .panel_area #panel2{display:block;}
#tab3:checked ~ .tab_area .tab3_label{background: #77292c; color: #fff;}
#tab3:checked ~ .panel_area #panel3{display:block;}
#tab4:checked ~ .tab_area .tab4_label{background: #77292c; color: #fff;}
#tab4:checked ~ .panel_area #panel4{display:block;}
#tab5:checked ~ .tab_area .tab5_label{background: #77292c; color: #fff;}
#tab5:checked ~ .panel_area #panel5{display:block;}
#tab6:checked ~ .tab_area .tab6_label{background: #77292c; color: #fff;}
#tab6:checked ~ .panel_area #panel6{display:block;}
#tab7:checked ~ .tab_area .tab7_label{background: #77292c; color: #fff;}
#tab7:checked ~ .panel_area #panel7{display:block;}
#tab8:checked ~ .tab_area .tab8_label{background: #77292c; color: #fff;}
#tab8:checked ~ .panel_area #panel8{display:block;}