/* animation trigger */
.fx, .fx-item {opacity: 0;}
.fx.animated, .fx-item.animated {opacity: 1;}
/* - */

.about-company .about-heading h3 {margin-top: 1em;}
.about-company .list {text-align: left; margin-left:10%; margin-right:10%;}

.gridImg {display: table; padding-bottom: 120px; margin-top: -60px;}
.gridImg div {margin: 0 -35px 0 -15px;}
.gridImg span {box-sizing: border-box; display: table-cell; width: 22.7%; padding: 0 20px 20px 0;}
.gridImg span img {display: block; max-width: 100%; width: 100%;}


.hpIntro .btn-arrow, .career-box .btn-arrow {box-sizing: border-box; width: 302px; max-width: 100%; padding: 23px 0 23px 55px; margin-right: 30px; background-color: #F0F0F0;}
.hpIntro .btn-arrow:hover, .career-box .btn-arrow:hover { background-color: rgba(240, 240, 240, 0.75);}
.hpIntro .btn-arrow::before, .career-box .btn-arrow::before {top: 50%; margin-top: -2px; left: 20px;}

/*.visual.hpIntro:before {content: ""; position: absolute; top: 0; left: 0; z-index: 10; width: 100%; height: 100%; background: rgba(255, 130, 0, 0.75);}*/
.visual.hpIntro .container, .visual.hpIntro .block{height: auto;}
.visual.hpIntro .container {max-width: 966px; position: relative; z-index: 20; text-align: left;}
.visual.hpIntro .block {text-align: left; padding: 60px 0;}
.visual.hpIntro figcaption .title {display: inline-block; width: 302px; overflow: visible; border-top: #fff 2px solid; padding: 60px 0;}
.visual.hpIntro figcaption .title, .visual.hpIntro figcaption p, .visual.hpIntro .btn-arrow { margin-left: -15px;}
.visual.hpIntro video {width: auto; height: auto; min-width: 100%; min-height: 100%; position: absolute; top: 50%; left: 50%; z-index: 0; background-size: cover;
    -webkit-transform: translateX(-50%) translateY(-50%); 
            transform: translateX(-50%) translateY(-50%);
}
/*
.visual.hpIntro figcaption .title, .visual.hpIntro figcaption p {color: rgba(255,255,255,0.9);}
.visual.hpIntro .btn-arrow {position: absolute; bottom: 0; left: 15px;}
*/

.news-area.hpIntro {background: none;}

.overview-area .container {padding-bottom: 38px; padding-top: 60px;}
.overview-area .list {margin: 0 -15px; overflow: hidden;}
.overview-area figure {box-sizing: border-box; float: left; margin: 0; padding: 0 15px 30px; width: 33.33%;}
.overview-area .img { height: 130px; overflow: hidden; position: relative;}
.overview-area .img a { background-position: 50% 50%; background-repeat: no-repeat; background-size: cover; display: block; height: 100%; position: relative;}
.overview-area figcaption {min-height: 163px; margin-bottom: 20px;}
.overview-area figcaption h2 { color: #7a7b7a; font-weight: 300; font-size: 22px; text-transform: uppercase; margin: 20px 0;}
.overview-area figcaption p { color: #7a7b7a; font-size: 18px; line-height: 24px; margin: 20px 0;}

.info.hpIntro .container {padding-bottom: 0;}
.info.hpIntro:after {content: none;}
.info.hpIntro .list {margin: 0 -15px; overflow: hidden;}
.info.hpIntro figure {box-sizing: border-box; float: left; margin: -20px 0 20px 0; padding: 0 15px 30px; width: 33.33%;}
.info.hpIntro img {width: 100%; position: relative; z-index: 1; bottom: -70px;}
.info.hpIntro figcaption {position: relative; z-index: 2;}
.info.hpIntro figcaption h3 {font: 400 1.75em/1em 'Oswald', sans-serif; letter-spacing: 0.1em; text-transform: uppercase; text-align: center; margin-bottom: 50px;}
.info.hpIntro dl {font-size: 14px; line-height: normal; letter-spacing: 0.05em;}
.info.hpIntro dt {font: 400 16px/1.2em 'Oswald', sans-serif; text-transform: uppercase; color: #4C4C4C; margin-bottom: 0.3em;}
.info.hpIntro dd {display: list-item; list-style: disc inside; margin: 0;}

.info-area.customer {background: #1e22aa;}
.info-area.customer .description h2 {color: #fff;}
.info-area.customer .btn-arrow {color: #fff;}
.info-area.customer .btn-arrow:before {height: 8px; background-image: url(../images/arrow-right-white-01.svg); background-position: -10px 50%;}
.info-area.offer .description h2 {margin-left: 30px;}
.info-area.offer .progress-list li {padding-bottom: 30px;}
.info-area.offer .progress-list .img {display: table; width: 100%;}
.info-area.offer .progress-list .img span { display: table-cell; vertical-align: middle; text-align: center; font-size: 36px; line-height: 1.1em;}
.info-area.offer .progress-list .img span small {font-size: 0.666em; line-height: 1em;}
.info-area.offer .progress-list .img sup {position: static; font-weight: normal;}
.info-area.offer .progress-list .dev .img {border: #fff 1px dashed; color: #fadbba;}

.info-graphic {margin: 0 0 60px 0;}
.info-graphic figure {margin: 0; position: relative;}
.info-graphic figure img {max-width: 100%;}
.info-graphic figure figcaption {position: absolute;}
.info-graphic figure figcaption ul {list-style-type: none; margin: 0; padding: 0;}
.info-graphic .drf {font-size: 100vw; height: auto; padding-bottom: 122%;}
.info-graphic .drf #drfBack {position: absolute; z-index: 1; top: 0; display: block;}
.info-graphic .drf #drfLines {position: absolute; z-index: 2; top: 0; display: block;}
.info-graphic .drf figcaption {top: 3.15%; right: 6%; max-width: 31.5%; z-index: 3;}
.info-graphic .drf ul {font: 300 0.027em "Lato", sans-serif; color: #404041;}
.info-graphic .drf ul li { text-align: center; margin-bottom: 6%; position: relative; display: block;}
.info-graphic .drf ul li span {position: absolute; width: 100%; display: block; margin-top: 3%;}
.info-graphic .table {box-sizing: border-box; display: table; margin:0; padding:0; width:100%; border:#404041 8px solid; border-radius:20px; border-collapse:separate; overflow:hidden;}
.info-graphic .td {box-sizing: border-box; display: table-cell; border-right: #404041 1px dashed; height: 0; padding-bottom: 25em; float:left; border-right: #333 1px dashed;}
.info-graphic .ip .td {padding: 50px 24px 24em 24px; width:16.666%; font-size: 13px; line-height: 1.5em; color: #404041;}
.info-graphic .ip .td:nth-child(6n) {border-right:none;}
.info-graphic .ip h3 {font: 24px/1.2em "Oswald", sans-serif; text-transform: uppercase; color: #ff8200; margin-bottom: 30px; min-height: 2.4em;}

.info-graphic .srcal {width: 50%; overflow: visible; margin-left: 25%;}
.info-graphic .srcal .td {padding: 0; width:33.333%; height: auto; border-bottom: #404041 1px dashed; text-align: center; font-size: 13px; line-height: 60px; color: #404041;}
.info-graphic .srcal .td > * {margin: 0;}
.info-graphic .srcal .td:nth-child(4n) {border-right:none;}
.info-graphic .srcal .td:nth-child(4n+1) {width: 25%; margin-left: -25%; clear: left; border-right:transparent 8px solid;}
.info-graphic .srcal .col {margin-top: -68px; margin-bottom: 8px; border-bottom-color: transparent;}
.info-graphic .srcal .col:first-child {border-right: none;}
.info-graphic .srcal h3 {font:400 24px/60px "Oswald", sans-serif; text-transform: uppercase; color: #646564;}
.info-graphic .srcal .th:nth-child(4n+1) h3 {color: #ff8200;}
.info-graphic .srcal .td:nth-child(4n+2) p {background-color: #ffa140;}
.info-graphic .srcal .td:nth-child(4n+3) p {background-color: #ffc07f;}
.info-graphic .srcal .td:nth-child(4n+4) p {background-color: #ffe0bf;}
.info-graphic .srcal .last {border-bottom: none;}
.info-graphic .srcal .last p {border-bottom-left-radius: 12px;}
.info-graphic .srcal .last:last-child p {border-bottom-left-radius: 0; border-bottom-right-radius: 12px;}
.info-graphic .srcal .janFirst p {border-top-left-radius: 12px;}
.info-graphic .srcal .janLast p {border-top-right-radius: 12px;}

.info-graphic .tech {width: 50%; float: left; overflow: visible; background-color: #fff; margin: 128px 0 120px 0; position: relative;}
.info-graphic .tech .tr {display: table-row; height: 60px; box-sizing: border-box;}
.info-graphic .tech .tr:first-child {position: absolute; top:-66px; left: 0; width: 100%;}
.info-graphic .tech .tr:first-child .col { border-bottom-color: transparent; float: left; width: 50%;}
.info-graphic .tech .td {padding: 0 2px; width:50%; height: auto; float: none; border-bottom: #404041 1px dashed; text-align: center; font-size: 13px; line-height: 1; color: #404041; vertical-align: middle;}
.info-graphic .tech .td > * {margin: 0;}
.info-graphic .tech .td:nth-child(2n) {border-right:none;}
.info-graphic .tech h3 {font:400 24px/60px "Oswald", sans-serif; text-transform: uppercase; color: #646564;}
.info-graphic .tech .last {border-bottom: none;}

.info-graphic .tech-ig {margin: 120px auto 0 auto; text-align: center;}

.info-graphic .spec-list {width: 50%; float: left; box-sizing: border-box; margin-top: 120px; padding-right: 30px;}
.info-graphic .spec-list ul{ margin: 0 0 28px 0; padding: 0; list-style: none; font-size: 0; line-height: 0; border-top: 1px solid #fff;}
.info-graphic .spec-list li { vertical-align: top; font-size: 17px; line-height: 26px; border-bottom: 1px solid #fff;}

#bm header {padding-bottom: 0;}
.info-graphic .bm {font-size: 100vw; height: auto;}
.info-graphic .bm figcaption {position: static;}
.info-graphic .bm ul li {position: absolute; width: 31.3%; height: auto; text-align: center; display: block;}
.info-graphic .bm ul #item01 {width: 37.5%; top: 0; left: 50%; margin: 6.2% 0 0 -18.5%;}
.info-graphic .bm ul #item02 {top: 22.8%; left: 0;}
.info-graphic .bm ul #item03 {top: 22.8%; right: 0;}
.info-graphic .bm ul #item04 {width: 37.5%; bottom: 0; left: 50%; margin: 0 0 0 -18.5%;}
.info-graphic .bm ul p {font: 400 0.015em "Lato", sans-serif; color: #404041;}
.info-graphic .bm ul h2 {color: #ff8200; font-weight: 400; font-size: 0.015em; line-height: 1.2em; padding: 0;}
.info-graphic .bm ul h3 {font: 0.024em/1.2em "Oswald", sans-serif; text-transform: uppercase; color: #ff8200; margin: 0 17.5%; padding: 0 0 6.6% 0; background: url(../images/bm_li.svg) 50% 100% no-repeat; background-size: contain;}
.info-graphic .mpw {font-size: 100vw; height: auto; width: 68.7%; margin: 30px auto 0 auto;}
.info-graphic .mpw img {position: relative; z-index: 1; display: block;}
.info-graphic .mpw figcaption {top: 0; z-index: 2; width: 100%; height: 100%; padding: 2.25%;box-sizing: border-box;}
.info-graphic .mpw ul {width: 100%; height: 100%;}
.info-graphic .mpw ul li {display: block; background-color: rgb(255, 255, 255); width: 28.5%; height: 0; padding: 14.25% 0; margin: 2.25%; float: left; position: relative; text-align: center; vertical-align: bottom; color: #ff8200; font: 300 0.065em/0em "Oswald", sans-serif;}
.info-graphic .mpw ul #item01, .info-graphic .mpw ul #item06 {background-color: rgba(255, 255, 255, 0.9);}
.info-graphic .mpw ul #item02 { background-color: rgba(255, 255, 255, 0.5);}
.info-graphic .mpw ul #item03 {width: 11.8%;}
.info-graphic .mpw ul #item04 {width: 11.8%; background-color: rgba(255, 255, 255, 0.75);}
.info-graphic .mpw ul #item05, .info-graphic .mpw ul #item10 {padding: 10.1% 0; top: 3.5%; background-color: rgba(255, 255, 255, 0.5);}
.info-graphic .mpw ul #item07, .info-graphic .mpw ul #item08 {background-color: rgba(255, 255, 255, 0.75);}
.info-graphic .mpw ul li:after {content: "customer"; position: absolute; left: 0; bottom: 50%; margin-bottom: -3em; color: #ff8200; font: 700 0.18em/0.9em "Lato", sans-serif;
    -webkit-transform: rotate(-90deg); 
            transform: rotate(-90deg);
    -webkit-transform-origin: 0 0;
            transform-origin: 0 0;
}


/* careers */
.page-heading ul {margin: 0; padding: 0; list-style-type: none; position: absolute; bottom: 0; width: 100%;}
.page-heading ul li {float: left; width: 33.333%;}
.page-heading ul li a {display: block; padding: 1em 0; text-align: center; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; color: #fff; text-decoration: none;}
.page-heading ul li a:hover {color: #ff8200;}
.page-heading ul li.active a {background-color: #fff; color: #646564;}
.career-box {border-top: #DADADA 1px solid; margin: 33px 0 0 0; padding: 33px 0 0 0;}
.career-box p {margin-bottom: 33px;}
.career-box .intro {margin: 0; padding: 0; list-style-type: none; height: auto; overflow: hidden;}
.career-box .intro li {padding: 26px 0 40px; margin-bottom: 7px; box-sizing: border-box; overflow: hidden; border-bottom: #DADADA 1px solid;}
.career-box .intro li:last-child {padding-bottom: 0; border:none;}
.career-box .intro li h3 {font-size: 24px; text-transform: uppercase; margin: 0 0 30px 33.333%; line-height: 28px;}
.career-box .intro li p {font-size: 20px; margin: 0 0 0 33.333%;}
.career-box .intro li figure {float: left; width: 33.333%; margin: 0 0 0 -15px; padding-left: 18px;}
.career-box .intro li img {width: 182px; max-width: 100%; display: block; margin: 0 auto;}
.career-box .events-slider h2 {font-family: inherit; color: #fff;}
.career-box .events-slider ul {margin: 1em 0 1.5em 0; padding: 0; list-style-type: none; font-size: 19px;}
.career-box .events-slider p {font-size: 16px; margin-bottom: 2em;}
.career-box .btn-arrow {width: auto; padding-right: 23px; border: none; border-radius: 0;}

/*.career-box form {margin: 0 -15px;}*/
.career-box form fieldset p {width: 50%; float: left; margin-bottom: 22px; padding: 0 15px; box-sizing: border-box;}
.career-box form fieldset label {display: block; font-weight: 600; line-height: normal; text-transform: uppercase; letter-spacing: 0.025em; margin-bottom: 8px; cursor: pointer; position: relative;}
.career-box form fieldset label img {position: absolute; height: 19px; margin-left: 10px;}
.career-box form fieldset input, .career-box form fieldset select, .career-box form fieldset textarea {background: #fff; border: #DADADA 1px solid; border-radius: 4px; padding: 8px; width: 100%; color: #7A7B7A; box-sizing: border-box; box-shadow: none !important; outline: none !important;}
.career-box form fieldset textarea {height: 7em; resize: vertical;}
.career-box input::-webkit-input-placeholder {color: #dadada;}
.career-box input::-moz-placeholder {color: #dadada; opacity: 1;}
.career-box input:-ms-input-placeholder {color: #dadada;}
.career-box input:placeholder-shown {color: #dadada;}
.career-box form fieldset select {padding-bottom: 6px;}
.career-box form fieldset select:invalid {color: #dadada;}
.career-box form fieldset input[type=file] {border: none; padding: 9px 0; position: relative; z-index: 10;}
.career-box form fieldset input[type=checkbox] {width: auto; height: auto; padding: inherit; margin: 0 10px 0 0; position: relative; z-index: 10;}
.career-box form fieldset {margin: 0 -15px; height: auto; overflow: hidden; position: relative;}
.career-box form fieldset .infoField {position: absolute; top: 0; right: 0; padding: 66px 15px 0 0; font-size: 14px; font-weight: 600; line-height: 22px; color: #dadada; }
.career-box form fieldset .infoField img {vertical-align: middle; margin-right: 10px;}
.career-box form fieldset h3 {font-size: 20px; font-weight: 800; text-transform: uppercase; border-top: #DADADA 1px solid; margin: 33px 15px 40px 15px; padding: 33px 0 0 0;}
.career-box form fieldset p.error label {color: #E24301;}
.career-box form fieldset p.error input, .career-box form fieldset p.error select, .career-box form fieldset p.error textarea {border-color: #E24301;}
.career-box form p.errorMsg, .career-box form p.successMsg {margin: 22px 0 55px 0; padding: 30px; color: #fff;}
.career-box form p.errorMsg {background-color: #E24301;}
.career-box form p.successMsg {background-color: #1e22aa;}
.career-box form fieldset p.privacy {width: auto; float: none;}
.career-box form fieldset label.privacy {display: inline-block; text-transform: none; font-weight: 400; position: relative; z-index: 10;}

.career-box p.counter {font-size: 20px; padding: 17px 0;}
.career-box p.counter strong {font-size: 28px;}
.career-box p.counter span {font-size: 18px; line-height: 28px; float: right; font-weight: 400;}
.career-box p.counter span img {vertical-align: middle;}
.career-box p.counter span a {text-decoration: none;}
.career-box .management-accordion {border-top: 1px solid #dedede;}
.career-box .management-accordion li {padding-bottom: 24px;}
.career-box .management-accordion .heading {color: inherit; text-transform: none;}
.career-box .management-accordion .heading p, .career-box .management-accordion .heading h3 {margin-bottom: 7px;}
.career-box .management-accordion .collapse-block {margin: 24px 0 20px;}
.career-box .management-accordion .collapse-block p {margin-bottom: 33px;}
.career-box .management-accordion .heading p::before {background-color: #7A7B7A;}

.career-box .heading-single h3 {color: #ff8200; text-transform: uppercase; font-size: 24px; line-height: normal;}
.career-box .heading-single ul {margin: 0 0 15px 0; padding: 0; list-style-type: none;}
.career-box .description-single {border-top: #DADADA 1px solid; margin: 33px 0 0 0; padding: 33px 0 0 0;}

.career-box p.empty {font-size: 18px; text-align: center; padding: 3em 4em; margin-top: 33px;  border: #DADADA 1px solid; border-radius: 6px; background: #fafafa;}
.career-box p.empty img {vertical-align: middle;}

.search-box .counter {margin-top: 0px;}
.search-title {font-size: 20px; line-height: 36px; margin: 0 0 35px 0;}
.search-title em {font-size: 28px; font-weight: 300; font-style: normal; padding: 0 6px;}
.search-result {border-top: 1px solid #dedede; padding: 0; margin: 0 0 60px; list-style-type: none;}
.search-result li {padding: 24px 0 31px; color: #7a7b7a; font-size: 16px; line-height: 28px; border-bottom: solid 1px #dedede;}
.search-result li a {text-decoration: none; display: block; position: relative;}
.search-result li a:hover {padding-left: 12px;}
.search-result li a p {margin: 0; color: #909190;}
.search-result li a .meta {margin: 0; color: #646564; font-size: 0.75em; text-align: right; line-height: 2em; position: absolute; right: 0; top: 0; max-width: 25%;}
.search-result li a em {padding: 2px 6px; background-color: #ffecd8; font-style:normal; color: #646564;}
.search-result li a h3 {max-width: 75%;}
.search-result li a h3 em {color: inherit;}
.search-box .msg {margin: 22px 0 120px 0; border: #dedede 1px solid;}
.search-box .msg p {margin: 15px 30px;}
.search-box .msg ul {margin: 0; padding: 0; list-style-type: none; font-size: 1.2em;}
.search-box .msg ul li {margin: 0; border-top: #dedede 1px solid;}
.search-box .msg ul li a {text-decoration: none; display: block; color: #909190; padding: 15px 30px;}
.search-box .msg ul li a:hover {padding-left: 15px; color: #646564;}
.search-box .msg ul li a img {vertical-align: middle; margin-right: 6px;}
.search-box .link-row {text-align: center; margin-bottom: 48px;}

/* header search */
#header .globalSearch {position: absolute; top: 0; left: 0; z-index: 1; width: 100%; background: #fff; visibility: hidden; opacity: 0;}
#header .globalSearch.opened {visibility: visible; z-index: 1101; opacity: 1; transition: all 200ms ease-in;}
#header .globalSearch form {margin: 15px 30px 0; padding: 0 0 14px 20px; border-bottom: solid 1px #bcbcbc; height: 71px; overflow: hidden;}
#header .globalSearch form:before{ content: ''; position: absolute; top: 43px; left: 30px; width: 15px; height: 15px; background: url(../images/ico-search-gray-01.svg) no-repeat; background-size: 15px 15px;  
    -webkit-transform: translate3d(-140px,0,0);
            transform: translate3d(-140px,0,0);
}
.no-svg #header .globalSearch form:before{background: url(../images/ico-search-gray-01.png) no-repeat;}
#header .globalSearch input {border: 0; padding: 15px; height: 40px; width: 50%; font-size: 20px; 
    -webkit-transform: translate3d(-140px,0,0);
            transform: translate3d(-140px,0,0);
}
#header .globalSearch input::-webkit-input-placeholder {color: #dadada;}
#header .globalSearch input::-moz-placeholder {color: #dadada; opacity: 1;}
#header .globalSearch input:-ms-input-placeholder {color: #dadada;}
#header .globalSearch input:placeholder-shown {color: #dadada;}
#header .globalSearch .btn-search {position: absolute; right: 30px; top: 43px; display: block; width: 18px; height: 18px;}
#header .globalSearch.opened form:before, #header .globalSearch.opened input { transform: translate3d(0,0,0); transition: transform 200ms ease-in 200ms; }


@media only screen and (min-width: 997px) {
    .info-graphic .drf ul {font-size: 26px;}
    .info-graphic .drf ul li span {margin-top: 5%;}
    .info-graphic .bm ul p, .info-graphic .bm ul h2 {font-size: 15px;}
    .info-graphic .bm ul h3 {font-size: 24px;}
    .info-graphic .mpw ul li {font-size: 90px;}
    .info-graphic .mpw ul li:after {font-size: 16px;}
}

@media only screen and (max-width: 1070px) {
    .visual.hpIntro figcaption .title, .visual.hpIntro figcaption p, .visual.hpIntro .btn-arrow { margin-left: 0;}
}

@media only screen and (max-width: 991px) {
    .about-company .list {margin-left:0; margin-right:0;}
    .gridImg {margin-top: -30px;}
    .gridImg div {margin: 0 -17px 0 -15px;}
    .gridImg span {width: 25%; padding: 0 2px 2px 0;}
    
    #header #main-nav .languages {display: block; float: none; margin:0 0 17px 17px; padding-left: 0; width: auto;}
    #header #main-nav .languages > * { font-size: 14px;}
    #header .languages::before {content: none;}
    #header #main-nav .languages > * {display: inline-block;}
    #header #main-nav .top-links {margin-left: 17px;}
    
    .hpIntro .btn-arrow {width: 100%;}
    
    .visual.hpIntro .block {text-align: center;}
/*    .visual.hpIntro figcaption .title {display: block; width: auto; border-top: #fff 2px solid; word-wrap: break-word;}*/
    .visual.hpIntro .btn-arrow, .info.hpIntro .btn-arrow {width: 47%;}
    
    .overview-area figure, .info.hpIntro figure {width: 50%;}
    .info.hpIntro figure {padding-left: 30px; padding-right: 30px;}
    .info.hpIntro figure:last-child {clear: left; float: none; margin-left: auto; margin-right: auto;}
    .info.hpIntro figcaption h3 {letter-spacing: 0.05em; font-size: 1.5em;}
    
    .info-area .progress-list {margin-left: -15px;}
    .info-area.offer .progress-list li {padding: 0 0 15px 15px;}
    .info-area.offer .progress-list .img span {font-size: 24px;}
    
    .info-graphic .ip .td {width: 33.333%;}
    .info-graphic .ip .td:nth-child(3n) {border-right: none;}
    
    .page-heading ul li a {font-size: 13px; letter-spacing: normal;}
    
    .search-title {margin-top: 36px;}
    .search-title em {display: block; padding: 0;}
    
    #header .globalSearch form {margin: 10px 30px 0; padding: 0 0 10px 20px; height: 61px;}
    #header .globalSearch input {padding: 10px;}
    #header .globalSearch form:before, #header .globalSearch .btn-search {top: 33px;}
    
}


@media screen and (max-width: 767px), screen and (orientation: landscape) and (max-width: 767px), screen and (orientation: portrait ) and (max-width: 767px) {
    .gridImg div {margin: 0; height: auto; overflow: hidden;}
    .gridImg span {width: 50%; display: block; float: left;}
    
    .visual.hpIntro .block {padding: 30px 0; margin-bottom: 48px;}
    .visual.hpIntro figcaption .title {padding: 30px 0;}
    .visual.hpIntro .container {text-align: center; height: 248px;}
    .visual.hpIntro .btn-arrow, .info.hpIntro .btn-arrow {width: 100%; padding: 16px 55px;}
    .visual.hpIntro video {display: none;}
    .visual.hpIntro .btn-arrow {left: 0;}
    
    .overview-area figure, .info.hpIntro figure {float: none; width: 100%;}
    .overview-area figure {margin-bottom: 30px;}
    .info.hpIntro figure {margin-bottom: 0;}
    .info.hpIntro img {bottom: -60px;}
    .overview-area figcaption {min-height: inherit; margin-bottom: 0;}   
    .info.hpIntro h2 {text-align: center;}
    
    .info-area.offer .description h2 {margin-left: inherit;}
    .info-area.offer .progress-list .img span {font-size: 30px;}
    
    .info-graphic .drf ul {font-weight: 400;}
    .info-graphic .ip .td {width: 100%; border-right: none; border-bottom: #404041 1px dashed; padding: 24px; height: auto;}
    .info-graphic .ip .td:last-child {border-bottom: none;}
    .info-graphic .ip h3 {min-height: inherit; margin-bottom: 12px;}
    .info-graphic .srcal {width: 88%; margin:0 0 0 13%;}
    .info-graphic .srcal h3 {font-size: 15px; letter-spacing: -0.02em;}
    .info-graphic .bm img {width: 200%; max-width: none; margin-left: -50%;}
    .info-graphic .bm ul #item01, .info-graphic .bm ul #item04 {width: 80%; margin: 0; left: 10%;}
    .info-graphic .bm ul #item02, .info-graphic .bm ul #item03 {width: 30%; top: 10%;}
    .info-graphic .bm ul p, .info-graphic .bm ul h2 {font-size: 0.03em; text-shadow: 0 0 1px #fff;}
    .info-graphic .bm ul h3 {font-size: 0.04em; margin: 0;}
    .info-graphic .tech {width: 100%; float: none;}
    .info-graphic .tech h3 {font-size: 17px; letter-spacing: -0.02em;}
    .info-graphic .spec-list {width: 100%; float: none; padding-right: 0;}
    
    
    .page-heading ul {position: static; margin-top: -10px;}
    .page-heading ul li {float: none; width: auto; border-bottom: rgba(255, 255, 255, 0.3) 1px solid;}
    .page-heading ul li.active a {background: none; color: #ff8200;}
    
    
    .career-box .intro li figure {margin: 0; padding: 0;}
    .career-box .intro li h3 {margin-bottom: 10px; font-size: 20px; padding-left: 15px;}
    .career-box .intro li p {font-size: 16px; padding-left: 15px;}
    .career-box .btn-arrow {width: 100%;}
    .career-box form fieldset p {width: 100%; float: none;}
    .career-box form fieldset .infoField {position: static; margin-left: 15px;}
    .career-box form fieldset input[type=checkbox] {width: 24px; height: 24px;}
    .career-box .management-accordion .heading p strong {display: block;}
    .career-box p.empty {margin-top: 0; padding: 1em 2em; }
    .career-box p.counter span {float: left; margin-right: 15px;}
    
    .search-box .msg p {margin: 15px;}
    .search-box .msg ul li a {padding: 15px;}
    .search-result li a h3 { margin-bottom: 0.5em; max-width: none;}
    .search-result li a .meta {font-size: inherit; text-align: inherit; line-height: inherit; position: static; margin-bottom: 0.5em; max-width: none;}
    
    #header .globalSearch form {margin: 6px 0 0; padding: 0 0 8px 35px; height: 36px;}
    #header .globalSearch input {padding: 0; width: 75%;}
    #header .globalSearch form:before {top: 19px; left:10px;}
    #header .globalSearch .btn-search {top: 14px; right: 10px;}
}