/*!

Theme Name: mtm_template

Theme URI: 

Author: 

Author URI: 

Description: Description

Version: 1.0.0

License: GNU General Public License v2 or later

License URI: LICENSE

Text Domain: mtm_template

Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready



This theme, like WordPress, is licensed under the GPL.

Use it to make something cool, have fun, and share what you've learned with others.

*/





/*--------------------------------------------------------------

# About

--------------------------------------------------------------*/



@import url(css/about.css);



/*--------------------------------------------------------------

# Activity

--------------------------------------------------------------*/



@import url(css/activity.css);



/*--------------------------------------------------------------

# Animate

--------------------------------------------------------------*/



@import url(css/animate.css);



/*--------------------------------------------------------------

# Contact

--------------------------------------------------------------*/



@import url(css/contact.css);



/*--------------------------------------------------------------

# Project

--------------------------------------------------------------*/



@import url(css/portfolio.css);



/*--------------------------------------------------------------

# Recruit

--------------------------------------------------------------*/



@import url(css/recruit_page.css);

@import url(css/job_posts.css);

@import url(css/job_detail.css);



/*--------------------------------------------------------------

# Service

--------------------------------------------------------------*/



@import url(css/service.css);



/*--------------------------------------------------------------

# Technology

--------------------------------------------------------------*/



@import url(css/technology.css);



/*--------------------------------------------------------------

# BPO

--------------------------------------------------------------*/



@import url(css/bpo.css);



/*******************************************

*  Top

********************************************/



a[href^="tel:"] {

    pointer-events: none;

}



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

    a[href^="tel:"] {

        pointer-events: auto;

    }

}



header#header {

    background: linear-gradient(to right, rgba(14, 112, 154, 1), rgba(24, 154, 211, 0.8)), url("./top/img/header-menu-bg.png") no-repeat center;

    background-size: cover;

    min-height: 110px;

    padding: 10px 0 0;

}



.home .section.about-page {

    margin-top: -23px;

}



.fixed-top {

    position: fixed;

    top: 0;

    right: 0;

    left: 0;

    z-index: 1030;

}



.slider-block {

    /*background: #fafcfd url(./top/img/slideshow-bg.png) no-repeat center;*/

    background: linear-gradient(to left, rgba(16, 125, 172, 0.1), rgba(24, 154, 211, 0.5)), url(./top/img/slideshow-bg.png) no-repeat center;

    background-size: cover;

    width: 100%;

    height: 100vh;

}



.slider-block-in {

    width: 100%;

    position: relative;

    width: 1200px;

    margin: 0 auto;

    left: 0;

    right: 0;

    text-align: center;

    height: 100vh;

}



@media only screen and (min-width:768px) and (max-width:1200px) {

    .slider-block-in {

        width: 100%;

    }

}



.square-wrap {

    width: 380px;

    height: 380px;

    position: absolute;

    /*top: calc(50% + 55px);

    left: 12%;*/

    top: calc(50% - 15px);

    left: 3%;

    transform: translateY(-50%);

    display: flex;

    align-items: center;

    justify-content: center;

}



.square {

    height: 100%;

    width: 100%;

    position: absolute;

    top: 48%;

    left: 46%;

    margin: -47% 0 0 -47%;

    text-align: center;

    font-size: 25px;

    color: #fff;

    text-shadow: 2px 2px rgba(0, 0, 0, 0.25);

    box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.1);

    border: 1px solid #dcf6ff;

}



.square1 {

    /* background:  url(assets/img/tokyo.svg) no-repeat; */

    background: linear-gradient(to left, rgba(16, 125, 172, 0.1), rgba(24, 154, 211, 0.1));

    /* url(assets/img/tokyo.svg) no-repeat; */

    animation: rotate 150s infinite linear forwards;

}



.square2 {

    /* background: url(assets/img/osaka.svg) no-repeat; */

    animation: rotate-left 150s infinite linear backwards;

}



.square3 {

    /* background: url(assets/img/yangon.svg) no-repeat; */

    animation: rotate-right 150s infinite linear forwards;

}



@keyframes rotate {

    0% {

        transform: rotate(20deg);

    }

    100% {

        transform: rotate(360deg);

    }

}



@keyframes rotate-left {

    0% {

        transform: rotate(40deg);

    }

    100% {

        transform: rotate(360deg);

    }

}



@keyframes rotate-right {

    0% {

        transform: rotate(60deg);

    }

    100% {

        transform: rotate(360deg);

    }

}



.sub_content {

    padding-top: 100vh;

}



.project-row {

    margin: 0 -8px;

}



.project-row .col,

.contact-row .col {

    padding: 0 8px;

}



.project-row .project-box {

    padding: 15px;

    -webkit-box-shadow: 0px 0px 8px -5px rgba(0, 0, 0, 0.52);

    -moz-box-shadow: 0px 0px 8px -5px rgba(0, 0, 0, 0.52);

    box-shadow: 0px 0px 8px -5px rgba(0, 0, 0, 0.52);

    background-color: #fafafa;

}



.project-row .project-box:hover .cover {

    visibility: visible;

    opacity: 1;

}



.project-row .project-box .cover {

    background: rgba(33, 150, 243, .9);

    display: block;

    position: absolute;

    visibility: hidden;

    z-index: 2;

    top: 0;

    right: 0;

    bottom: 0;

    left: 0;

    opacity: 0;

    transition: all .4s ease;

}



.project-row .project-box:hover .cover-txt {

    visibility: visible;

    opacity: 1;

    transform: translateX(-50%) translateY(-47%);

}



.project-row .project-box .cover-txt {

    display: block;

    position: absolute;

    visibility: hidden;

    z-index: 3;

    width: 80%;

    max-height: 80%;

    top: 50%;

    left: 50%;

    opacity: 0;

    transform: translateX(-50%) translateY(-40%);

    text-align: center;

    color: #fff;

    transition: all .3s ease;

    font-size: 20px;

}



.project-row .project-box .thum-pic {

    margin: 0;

    -webkit-box-shadow: 0px 1px 10px -3px rgba(0, 0, 0, 0.52);

    -moz-box-shadow: 0px 1px 10px -3px rgba(0, 0, 0, 0.52);

    box-shadow: 0px 1px 10px -3px rgba(0, 0, 0, 0.52);

    transform: scaleX(1) scaleY(1) translateZ(0);

    transition: all .6s ease;

}



.project-row .project-box:hover .thum-pic {

    transform: scaleX(0.9) scaleY(0.9) translateZ(0);

}



.project-row .project-box .thum-pic img {

    max-width: 100%;

    width: 100%;

    height: 196px;

}



.project-row .site-name {

    padding-top: 5px;

    text-align: right;

}



.project-row .site-name a {

    color: #333;

}



.project-row .site-name a:hover {

    color: #1f6699;

    text-decoration: none;

}



.btn {

    text-align: center;

}



a.btn-detail {

    display: inline-block;

    font-size: 14px;

    text-align: center;

    transition: 0.3s all;

    -webkit-transition: 0.3s all;

    border: 2px solid #0c7aad;

    background: #0c7aad;

    padding: .375rem .75rem;

    text-transform: uppercase;

}



.btn-detail:hover,

.btn-detail:active {

    background: rgba(255, 255, 255, 0);

    border: 2px solid #0c7aad;

}



.btn-detail span {

    cursor: pointer;

    display: inline-block;

    position: relative;

    padding-right: 28px;

    color: #fff;

}



.btn-detail span:after {

    content: "\f0a9";

    font-family: 'Font Awesome\ 5 Free';

    font-weight: 900;

    position: absolute;

    opacity: 1;

    right: 0;

    width: 19px;

    height: 13px;

}



.btn-detail:hover {

    background: #fff;

}



.btn-detail:hover span {

    color: #0c7aad;

}



.btn-detail:hover span:after,

.btn-detail:visited span:after,

.btn-detail:active span:after {

    color: #6dafcd;

}



.service-wrap section:nth-child(odd),

#technology section:nth-child(odd),

.service-wrap section:nth-child(odd) {

    background: transparent;

}



.service-wrap section:nth-child(even),

#technology section:nth-child(even),

.service-wrap section:nth-child(even) {

    background: #f5f9fb;

}



.box-white {

    background: #fff;

    -webkit-box-shadow: 0px 1px 6px 0px rgba(221, 221, 221, 0.75);

    -moz-box-shadow: 0px 1px 6px 0px rgba(221, 221, 221, 0.75);

    box-shadow: 0px 1px 6px 0px rgba(221, 221, 221, 0.75);

}



#service .service-row {

    margin: 0 -10px;

}



#service .service-row .service-col {

    margin-bottom: 20px;

    padding: 0 10px;

}



#service .service-row .service-box {

    position: relative;

    padding: 60px 60px 40px;

    text-align: center;

    cursor: pointer;

    background-color: #FFF;

    -webkit-box-shadow: 0px 0px 8px -5px rgba(0, 0, 0, 0.52);

    -moz-box-shadow: 0px 0px 8px -5px rgba(0, 0, 0, 0.52);

    box-shadow: 0px 0px 8px -5px rgba(0, 0, 0, 0.52);

}



#service .service-row .service-box .service-title span {

    display: block;

    margin-bottom: 40px;

    width: 100%;

    text-align: center;

}



#service .service-row .service-box .overlay {

    position: absolute;

    left: 0;

    right: 0;

    bottom: 0;

    background-color: #FFF;

    overflow: hidden;

    width: 0;

    height: 100%;

    transition: .5s ease;

}



#service .service-row .service-box:hover .overlay {

    width: 100%;

    left: 0;

}



#service .service-row .service-box .service-text {

    position: absolute;

    top: 10%;

    left: 15%;

    font-size: 18px;

    text-align: left;

    -webkit-transform: translate(-10%, -10%);

    -ms-transform: translate(-10%, -10%);

    transform: translate(-10%, -10%);

    white-space: nowrap;

}



#service .service-row .service-box .checklist {

    padding: 0;

    margin: 0;

}



#service .service-row .service-box .check-pd {

    padding: 7px 0 0;

}



#service .service-row .service-box .checklist li {

    padding: 10px 0;

}



#service .service-row .service-box .checklist li:before {

    position: relative;

    content: '';

    display: inline-block;

    margin-right: 15px;

    width: 14px;

    height: 14px;

    background: url(./top/img/mark_white.png) no-repeat;

}



#service .service-row .service-box .checklist li a {

    color: #333;

}



#service .service-row .service-box .checklist li a span {

    display: none;

}



#service .service-row .service-box .checklist li a:hover {

    color: #1f6699;

}



#service .service-row .service-box:hover {

    background: rgba(33, 150, 243);

    transition-duration: 1.8s;

}



#service figure {

    margin: 0px;

}



#service figure.snip0015 {

    color: #09315F;

}



#service figure.snip0015 * {

    -webkit-box-sizing: border-box;

    box-sizing: border-box;

}



#service figure.snip0015 img {

    opacity: 1;

    width: 100%;

    -webkit-transition: opacity 0.35s;

    transition: opacity 0.35s;

}



#service figure.snip0015 figcaption {

    position: absolute;

    bottom: 0;

    left: 0;

    padding: 30px 0 30px 20px;

    width: 100%;

    height: 100%;

}



#service figure.snip0015 ul {

    margin: 0 0 5px;

    opacity: 0;

    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;

    transition: opacity 0.35s, -webkit-transform 0.35s, -moz-transform 0.35s, -o-transform 0.35s, transform 0.35s;

    text-align: left;

}



#service figure.snip0015 ul {

    font-weight: 300;

    text-transform: uppercase;

    transition-delay: 0s;

}



#service figure.snip0015 ul li {

    font-size: 16px;

    text-transform: initial;

    color: #fff;

}



#service .col-04 figure.snip0015 figcaption {

    padding: 50px 0 50px 20px;

}



#service figure.snip0015:hover figcaption {

    background: #2196f3;

    transition-duration: 1.8s;

}



#service figure.snip0015 figcaption {

    transition-duration: 1.8s;

}



#service .col-03 figure.snip0015 figcaption {

    padding: 75px 0 30px 20px;

}



#service .col-02 figure.snip0015 figcaption {

    padding: 95px 0 30px 20px;

}



#service figure.snip0015:hover img {

    opacity: 0.35;

}



#service figure.snip0015:hover figcaption ul {

    opacity: 1;

    transform: translate3d(0%, 0%, 0);

}



#service .service-row .service-box:hover .service-title {

    opacity: 0;

}



#service .service-row .service-box .checklist {

    padding: 0 10px 0 20px;

    margin: 0;

}



#service .service-row .service-box .thum-pic {

    display: inline-block;

    max-width: 125px;

}



#service .service-row .service-box .service-title {

    margin-top: 20px;

}



.bg-f9 {

    background-color: #f9f9fc;

}



.border-white {

    border-bottom: 1px dashed #fff !important;

}



.swiper-container {

    /* Main container */

    margin: 0;

    padding: 0;

    display: block;

    width: 100%;

    clear: both;

    list-style: none;

    box-shadow: none;

}





/* wrapper */



.swiper-wrapper {

    margin: 0;

    padding: 0;

    box-shadow: none;

}





/* Single slide */



.swiper-slide {

    margin: 0;

    padding: 0;

    display: block;

    list-style: none;

}



.swiper-slide-box {

    padding: 50px;

    background: #FFFFFF;

    border-radius: 6px;

    border-bottom: #f5f5f9 solid 1px;

    -webkit-box-shadow: 0px 0px 22px 6px rgba(24, 30, 110, 0.03);

    -moz-box-shadow: 0px 0px 22px 6px rgba(24, 30, 110, 0.03);

    box-shadow: 0px 0px 22px 6px rgba(24, 30, 110, 0.03);

}



.swiper-slide-back-box {

    float: left;

    width: 90%;

    height: 15px;

    margin-left: 5%;

    background: #FFFFFF;

    border-radius: 0 0 6px 6px;

    -webkit-box-shadow: 0px 0px 22px 6px rgba(24, 30, 110, 0.03);

    -moz-box-shadow: 0px 0px 22px 6px rgba(24, 30, 110, 0.03);

    box-shadow: 0px 0px 22px 6px rgba(24, 30, 110, 0.03);

}



#service .btn .btn-detail {

    margin-top: 60px;

}





/* Pagination */



.swiper-pagination {

    box-shadow: none;

    text-shadow: none;

    width: 100%;

    margin: 0;

    padding: 0;

    display: block;

    clear: both;

    left: 0;

    right: 0;

}





/* pagination bullet */



.swiper-pagination-bullet {

    width: 18px;

    height: 18px;

    border: #676464 solid 1px;

    background: none;

    opacity: 1;

    transition: 300ms linear;

    transition-property: background-color;

    margin: 8px;

}



.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet {

    margin: 8px;

}





/* Active pagination bulet */



.swiper-pagination-bullet-active {

    background-color: #1164ae;

}





/* Navigatin prev button */



.swiper-button-prev,

.swiper-button-next {

    margin: 0;

    padding: 0;

    width: 18px;

    height: 18px;

    line-height: 20px;

    text-align: center;

    background: none;

    border-radius: 50%;

    border: 1px solid #676464;

    font-size: 20px;

    transition: 300ms linear;

    transition-property: background, opacity, border-color;

    left: -40px;

}



.swiper-button-prev:hover,

.swiper-button-next:hover {

    background: #676464;

    opacity: 1;

}



.swiper-button-prev span,

.swiper-button-next span,

.swiper-button-prev i.fa,

.swiper-button-next i.fa {

    position: absolute;

    top: 0;

    left: -2px;

    right: 0;

    display: block;

    bottom: 0;

    line-height: 47px;

    width: 100%;

    height: 100%;

    text-align: center;

}





/* Navigation next button */



.swiper-button-next {

    left: auto;

    right: -40px;

}



.swiper-button-next span,

.swiper-button-next i.fa {

    left: 2px;

}



.site-how-it-works h4 {

    color: #000;

    font-size: 16px;

    line-height: 1.5;

    font-weight: 600;

    margin-top: 0;

    padding: 0;

    margin-bottom: 20px;

    text-align: left;

}



.site-how-it-works figure.device {

    /* device */

    text-align: center;

    position: relative;

    left: 0;

}



.site-how-it-works .section {

    /* Section */

    position: relative;

    padding-left: 60px;

    margin-top: 32px;

}



.site-how-it-works .section.first {

    margin-top: 48px;

}



.site-how-it-works .section figure {

    position: absolute;

    top: 16px;

    left: 0;

    display: block;

}



.btn-mg {

    margin: 0;

}



.left-margin {

    font-size: 18px;

    margin-left: 20px;

    line-height: 25px;

}



.top-margin {

    margin-left: 42px;

}



.second-txt {

    margin-top: 21px;

}



#customer {

    padding-bottom: 30px;

    background-image: url(./top/img/customer_cmp.png);

    background-size: cover;

}



#cus-logo {

    display: -moz-flex;

    display: -webkit-flex;

    display: -ms-flex;

    display: flex;

    flex-wrap: wrap;

    justify-content: center;

    margin: 0 auto;

    padding-top: 10px 0 0;

    font-size: 0;

    list-style: none;

    background-color: none;

}



#cus-logo li {

    display: inline-block;

    *display: inline;

    /*for IE6 - IE7*/

    vertical-align: middle;

    box-sizing: border-box;

    margin: 0;

    padding: 0;

}



.text-red {

    color: #ff0e0e;

}





/* The wrapper for each item */



.cus-cell {

    padding: 0 0 45px;

    border: none;

    text-decoration: none;

    text-align: center;

    display: block;

    position: relative;

    overflow: hidden;

}



#contact .contact-row {

    padding: 0 0 0 0;

}



#contact .contact-row h4 {

    padding: 10px 0;

    font-size: 16px;

    font-weight: normal;

}



#contact .contact-row p {

    font-size: 14px;

    word-break: break-word;

    margin-bottom: 0;

}



#contact .btn-detail {

    margin-top: 0;

    line-height: normal !important;

}



#contact .btn-detail span:after {

    top: 2px;

    right: 0;

}



.apply+.center {

    position: relative;

}

div.wpcf7 .ajax-loader {

    visibility: hidden;

    display: inline-block;

    background-image: url(../../plugins/contact-form-7/images/ajax-loader.gif);

    width: 16px;

    height: 16px;

    position: absolute;

    top: 24%;

    border: none;

    padding: 0;

    margin: 0 0 0 4px;

    vertical-align: middle;

}



#contact .contact-row .contact-btn {

    display: inline-block;

    width: 100%;

    text-align: right;

    margin: 10px 15px 0 0;

}





/* iframe Css */



#contact .mapouter {

    position: relative;

    text-align: right;

    border-top: 2px solid #0f73af;

    -webkit-box-shadow: 0px 0px 8px -2px rgba(0, 0, 0, 0.52);

    -moz-box-shadow: 0px 0px 8px -2px rgba(0, 0, 0, 0.52);

    box-shadow: 0px 0px 8px -2px rgba(0, 0, 0, 0.52);

}



#contact .gmap_canvas {

    overflow: hidden;

    background: none !important;

    height: 300px;

    width: 100%;

    margin-top: 40px;

}



#contact .col-md-3 img {

    width: 75%;

}





/*******************************************

*  Activity

********************************************/



.entry-content .title {

    margin: 20px 0;

    /* padding-bottom: 20px; */

    font-size: 22px;

    font-weight: normal;

}





/*--------------------------------------------------------------

## Pagination

--------------------------------------------------------------*/



.pagination {

    position: relative;

    padding: 20px 0;

    text-align: center;

    clear: both;

}



.pagination a,

.pagination span {

    margin: 0;

    padding: 10px 13px;

    text-decoration: none;

    color: #333;

    background-color: var(--white, #fff);

    transition: background-color .3s;

    border: 1px solid var(--color-primary, #333);

}



.pagination .current,

.pagination a:hover {

    background-color: #f0f0f1;

}





/*--------------------------------------------------------------

## technology page design

--------------------------------------------------------------*/



.skew-boxed {

    transform: skew(-25deg);

    background: linear-gradient(to top right, #54a1c5, #0c7aad);

    color: #fff;

    position: relative;

    margin-bottom: 20px;

    display: inline-block;

    box-shadow: 10px 10px #b6e8ff;

}



.skew-boxed::after {

    content: "";

    position: absolute;

    width: 100%;

    height: 100%;

    left: 10px;

    bottom: -10px;

    display: inline-block;

    box-shadow: 8px 8px 1px #84d8ff;

}



.skew-boxed h3 {

    font-size: 20px;

    color: #fff;

    transform: skew(25deg);

    padding: 12px 24px;

    line-height: initial;

}



.skill {

    margin: 10px 0;

}



.skill .tech {

    background: #f7fafc;

    padding: 10px 0;

    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);

    min-height: 100px;

    display: flex;

    align-items: center;

    justify-content: center;

}



.skill .name-box {

    background: linear-gradient(to bottom right, #edf5f8, #fafcfd);

    padding: 10px 0;

    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);

    margin-bottom: 10px;

    color: #0c7aad;

}





/*--------------------------------------------------------------

## 404 page design

--------------------------------------------------------------*/



.not-found {

    height: 100vh;

    padding: 18vh 0 0 0;

}



.boxed {

    transform: skew(-30deg);

    border: 2px solid #0c7aad;

    position: relative;

    margin-bottom: 35px;

    display: inline-block;

}



.boxed::before {

    content: '';

    position: absolute;

    transform: skew(-10deg);

    border: 2px solid #6dafcd;

    width: 100%;

    height: 100%;

    right: 0;

    top: -7px;

}



.not-found .boxed::after {

    content: 'OOPS!';

    position: absolute;

    width: 40%;

    height: 25%;

    left: 50%;

    top: -14px;

    background: yellow;

}



.boxed h1 {

    font-size: 50px;

    color: #0c7aad;

    transform: skew(30deg);

    padding: 12px 72px;

}



.not-found h2 {

    margin: 20px 0;

}



.not-found h3 {

    margin: 20px 0 40px;

}



.not-found .d-flex {

    /* box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.25); */

    justify-content: center;

    flex-direction: column;

    /* margin: 50px 0 0;

       height: 75vh; */

}



@media screen and (min-width:280px) and (max-width:1199px) {

    #contact .gmap_canvas {

        width: 100%;

    }

}



@media screen and (min-width:768px) and (max-width:1199px) {

    .site-how-it-works .swiper-button-prev,

    .site-how-it-works .swiper-button-next {

        margin: 0 3px 0 0;

    }

    .site-how-it-works .swiper-button-next {

        margin: 0 3px 0 0;

    }

    .site-how-it-works .swiper-pagination {

        margin: 0 3px 0 0;

    }

}



@media screen and (min-width:768px) and (max-width:991px) {

    .site-how-it-works .swiper-pagination {

        left: auto;

    }

    #contact .col-md-3 img {

        width: 100%;

    }

}



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

    .site-how-it-works .swiper-button-prev,

    .site-how-it-works .swiper-button-next {

        /* Carousel slider navigation */

        width: 20px;

        height: 20px;

        line-height: 20px;

        left: auto;

        right: 40px;

        top: auto;

        bottom: 510px;

        background-image: none;

    }

    .site-how-it-works .swiper-button-prev:hover,

    .site-how-it-works .swiper-button-next:hover {

        color: white;

        opacity: 1;

    }

    .site-how-it-works .swiper-button-prev span,

    .site-how-it-works .swiper-button-next span,

    .site-how-it-works .swiper-button-prev i.fa,

    .site-how-it-works .swiper-button-next i.fa {

        line-height: 17px;

        text-align: center;

        display: inline-block;

        left: 0.5px;

        font-size: 16px;

    }

    .site-how-it-works .swiper-button-next {

        left: auto;

        right: 40px;

        bottom: 267px;

    }

    .site-how-it-works .swiper-pagination-bullet {

        float: left;

        display: block;

        clear: both;

        width: 18px;

        height: 18px;

        border: #676464 solid 1px;

        background: none;

    }

    .site-how-it-works .swiper-pagination-bullet span {

        display: none;

    }

    .site-how-it-works .swiper-pagination-bullet-active {

        background: #2b8dd9;

        margin-top: 40px;

        margin-bottom: 40px;

    }

    .site-how-it-works .swiper-pagination-bullet-active span {

        display: inline-block;

        width: 60px;

        height: 60px;

        background-color: white;

        border-radius: 50%;

        color: #FFFFFF;

        font-size: 30px;

        line-height: 56px;

        position: relative;

        z-index: 1;

        bottom: 24px;

        right: 21px;

    }

    .site-how-it-works .swiper-pagination-bullet-active span:after {

        content: "";

        position: absolute;

        top: 0;

        left: 0;

        right: 0;

        bottom: 0;

        display: block;

        width: 100%;

        height: 100%;

        border-radius: 50%;

        z-index: -1;

        color: #FFFFFF;

        background-color: #1164ae;

    }

    .site-how-it-works .swiper-button-next span,

    .site-how-it-works .swiper-button-next i.fa {

        position: relative;

        top: -1px;

    }

    .site-how-it-works .swiper-pagination {

        /* Pagination */

        left: auto;

        width: auto;

        right: 32px;

        top: auto;

        bottom: 300px;

    }

    #cus-logo li {

        width: 20%;

    }

}



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

    #top-visual {

        text-align: left;

    }

    #top-visual .visual-copy {

        width: 60%;

        padding: 0;

        margin: 0 auto;

    }

    #top-visual .visual-copy .copy {

        font-size: 24px !important;

    }

    #top-visual .visual-copy .copy::after {

        margin: initial;

    }

    #top-visual .visual-copy .desc {

        font-size: 14px;

    }

}



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

    .home .section.about-page {

        margin-top: 0;

    }

    p {

        word-wrap: anywhere;

    }

    /*******************************************

    *  Top

    ********************************************/

    #top-visual {

        text-align: left;

    }

    #top-visual .visual-copy {

        width: 60%;

        padding: 0;

        margin: 0 auto;

    }

    #top-visual .visual-copy .copy {

        font-size: 20px;

    }

    #top-visual .visual-copy .copy::after {

        margin: initial;

    }

    #top-visual .visual-copy .desc {

        font-size: 14px;

    }

    .btn-detail {

        margin: 30px 0;

    }

    .swiper-pagination {

        margin-top: 20px;

    }

    .site-how-it-works .swiper-pagination-bullet span {

        display: none;

    }

    .site-how-it-works {

        padding-bottom: 60px;

    }

    .swiper-button-next {

        right: 20px;

    }

    .swiper-button-prev,

    .swiper-button-next {

        left: 0;

        display: none;

    }

    #projects .btn {

        margin-top: 25px;

    }

    #projects .btn-detail {

        margin: 0;

    }

    .project-row .project-box {

        margin-bottom: 30px;

    }

    .project-row .col-6 {

        width: 100%;

        max-width: 100%;

        flex: 0 0 100%;

    }

    .project-row .project-box .thum-pic img {

        max-width: 100%;

        width: 100%;

        height: 300px;

    }

    #service .btn .btn-detail {

        margin-top: 40px;

    }

    #cus-logo li {

        width: 33.33%;

    }

    #contact .contact-row img {

        text-align: center;

    }

    #contact .contact-row h4,

    #contact .contact-row p {

        text-align: center;

        padding-bottom: 20px;

    }

    #contact .contact-row .contact-btn {

        text-align: center;

        margin-right: 0;

        margin-top: 0;

    }

    #contact .contact-row {

        padding: 0 0 10px 0;

    }

    #contact .col-md-3 img {

        width: 15%;

    }

    /*--------------------------------------------------------------

    ## Pagination

    --------------------------------------------------------------*/

    .pagination a,

    .pagination span {

        padding: 10px 9px;

        margin: 0 2px;

    }

}



@media only screen and (min-width:768px) and (max-width:1160px) {

    #contact .contact-row .contact-btn {

        margin: 10px 0 0 0;

    }

}



@media only screen and (min-width:900px) and (max-width:1200px) {

    #top-visual .visual-copy {

        width: 50%;

        margin: 0;

    }

    #top-visual .visual-copy {

        padding: 0;

    }

}



@media only screen and (min-width:769px) and (max-width:900px) {

    #top-visual .visual-copy {

        width: 50%;

        margin: 0;

    }

}



@media only screen and (min-width:832px) and (max-width:1200px) {

    #header #logo {

        float: left;

        width: 210px;

        margin: 22px 1vw 0 0;

    }

}


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

    .skew-boxed,

    .skew-boxed h3 {

        transform: skew(0deg);

        overflow: hidden;

    }

}



@media only screen and (min-width:768px) and (max-width:1024px) {

    .square-wrap {

        height: 400px;

        width: 400px;

        left: 0;

        right: 0;

        margin: 0 auto;

        /*display: none;*/

    }

    #header .h_description .h_tel {

        padding-top: 0;

    }

    #header .h_description .h_mail {

        padding-top: 0;

    }

}



@media only screen and (min-width:768px) and (max-width:1024px) {

    header#header {

        min-height: 103px;

        padding: 14px 0 0;

    }

}



@media only screen and (max-width:767px) and (orientation:landscape) {

    .slider-block {

        margin-top: 90px;

        min-height: 600px;

        background-size: cover;

    }

    .square-wrap {

        height: 260px;

        width: 260px;

        top: 50%;

        left: 0;

        right: 0;

        margin: 0 auto;

    }

}



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

    .slider-block {

        /*background: #fafcfd url(./top/img/slideshow-bg_sp.png) no-repeat center;*/

        background: linear-gradient(to left, rgba(16, 125, 172, 0.1), rgba(24, 154, 211, 0.5)), url(./top/img/slideshow-bg_sp.png) no-repeat center;

        background-size: cover;

        overflow: hidden;

    }

    .square-wrap {

        height: 260px;

        width: 260px;

        top: calc(50% + 35px);

        left: 0;

        right: 0;

        margin: 0 auto;

        /*display: none;*/

    }

    .slider-block-in {

        width: 100%;

    }

}



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

    .square-wrap {

        height: 250px;

        width: 250px;

    }

    p.copy a {

        font-size: 24px;

    }

    .square {

        font-size: 24px;

    }

    .slider-block {

        min-height: 80vh;

    }

}



@media only screen and (min-width:320px) and (max-width:356px) {

    .square-wrap {

        height: 220px;

        width: 220px;

    }

    p.copy a {

        font-size: 20px;

    }

    .square {

        font-size: 20px;

    }

    .slider-block {

        min-height: 80vh;

    }

}





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

.slider-block {

    background: linear-gradient(to left, rgba(16, 125, 172, 0.1), rgba(24, 154, 211, 0.5)), url(./top/img/slideshow-bg_sp.png) no-repeat top center;

    background-size: cover;

}

}