/* CSS Document */

/*==================================================

top-contents
=================================================*/

#about {
    width: 100%;
    position: relative;
    background-image: url("../../images/block2.png");
    background-position: center top;
    background-repeat: no-repeat;
    background-size: 100%;
}
#about h1,#about p {
    width: 90%;
    position: relative;
    text-align: center;
    margin: 0 auto;
}
#about ul {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-flow: row nowrap;
    flex-flow: row nowrap;
    
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    
    background-image: url("../../images/bg_about.png");
    background-position: center bottom;
    background-repeat: no-repeat;
    background-size: 100% 40%;
    padding-bottom: 40px;
}
#about ul li {
    width: 45%;
    max-width: 360px;
    margin: 60px 4% 0;
}
#about ul li a {
    width: 100%;
    display: block;
    color: #333;
    text-align: center;
    text-decoration: none;
}
#about ul li a dl {
    width: 100%;
}
#about ul li a dl dt {
    background: linear-gradient(90deg, #5badd3, #bc33b1);
    padding-bottom: 5px;
}
#about ul li a dl dd {
    font-size: 2rem;
    background-color: #edf3f7;
    padding: 30px 1em 60px;
}
#about ul li a dl dd:nth-last-child(1) {
    background-color: transparent;
    padding: 0;
}
#about img {
	width: 100%;
	max-width: 100%;
	height: auto;
}
#works {
    width: 100%;
    position: relative;
}
#works h1 {
    width: 90%;
    position: relative;
    text-align: center;
    margin: 0 auto;
}
#works .inner {
    background-color: #edf3f7;
    margin-top: 60px;
}
#works ul {
    width: 90%;
    max-width: 1200px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-flow: row nowrap;
    flex-flow: row nowrap;
    
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    
    margin: 0 auto;
    
}
#works ul li {
    width: 30%;
    max-width: 360px;
    cursor: pointer;
    margin-top: 60px;
    
	-webkit-transition: all 0.3s;
	transition: all 0.3s;
}
#works ul li:hover {
    opacity: .7;
}
#works ul li a {
    width: 100%;
    display: block;
    color: #333;
    text-decoration: none;
}
#works ul li dl {
    width: 100%;
}
#works ul li dl dt {
    background: linear-gradient(90deg, #5badd3, #bc33b1);
    padding-bottom: 3px;
}
#works ul li dl dd {
    text-align: center;
    background-color: #edf3f7;
    padding: 30px 1em 60px;
}
#works img {
	width: 100%;
	max-width: 100%;
	height: auto;
}

.partnership {
    width: 100%;
}
.partnership h2 {
    text-align: center;
}

.philosophy {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
    
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}
.philosophy li {
    width: 30%;
    color: #FFF;
    background-color: #1b8bb9;
    margin-bottom: 80px;
    padding: 6% 5%;
}
.philosophy li h2 {
    font-weight: 400;
    text-align: center;
    margin-bottom: 20px;
}
.philosophy li h2 span {
    font-size: 8rem;
    display: block;
    padding-bottom: 40px;
}

.access {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
    
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}
.access li {
    width: 45%;
    max-width: 450px;
    margin-top: 60px;
}
.access li h2 {
    font-size: 1.6rem;
    text-align: center;
    background-color: #edf3f7;
    margin-bottom: 30px;
    padding: 1em;
}

.message {
    width: 90%;
    max-width: 1200px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
    
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    
    margin: 0 auto;
}
.message .txt {
    width: 55%;
}
.message .txt p.name {
    margin-top: 2em;
}
.message .txt p.name strong {
    font-size: 2.4rem;
    font-weight: 500;
}
.message .photo {
    width: 38%;
}
.message .photo img {
	width: 100%;
	max-width: 100%;
	height: auto;
}

.ceo-history {
    width: 90%;
    max-width: 1200px;
    margin: 80px auto 0;
}
.ceo-history h2 {
    font-weight: 500;
    text-align: center;
    background-color: #FFF;
    padding: .8em 1em;
}
.ceo-history ul {
    margin-top: 40px;
}
.ceo-history ul li {
    margin-top: .5em;
}

.bim .op-txt {
    width: 90%;
    max-width: 1000px;
    text-align: center;
    margin: 0 auto 80px;
}
.bim section {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;

    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
    
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center; 
}
.bim section:nth-of-type(even) {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
    -ms-flex-direction: row-reverse;
    flex-direction: row-reverse;
}
.bim section .txt {
    width: 50%;
    padding: 0 5%;
}
.bim section .photo {
    width: 50%;
}
.bim section .photo img {
    width: 100%;
	max-width: 100%;
	height: auto;
}
.bim-means {
    margin: 100px auto;
}
.bim-means .photo {
    width: 100%;
    max-width: 720px;
    margin: 80px auto 0;
}
.bim-means .photo img {
    width: 100%;
	max-width: 100%;
	height: auto;
}

.equipment-bim {
    width: 90%;
    max-width: 1000px;
    background-image: url("../../bim/images/bim_bg.jpg");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    border: 3px solid #FFF;
    margin: 0 auto;
    padding: 60px 0;
}
.equipment-bim h2 {
    text-align: center;
}
.equipment-bim .button {
    margin: 40px auto 0;
}

.education-banner {
    width: 90%;
    max-width: 1000px;
    margin: 100px auto 0;
}
.education-banner .head {
    color: #FFF;
    background-image: url("../../bim/images/bim_bg2.jpg");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 8%;
}
.education-banner .head h1 {
    font-size: 3rem;
    text-align: center;
    font-weight: 500;
    margin-bottom: 40px;
}
.education-banner ul {
    width: 100%;
    
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;

    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
}
.education-banner ul li {
    width: 50%;
    color: #FFF;
    text-align: center;
    background-color: #1bb999;
    padding: 5%;
}
.education-banner ul li .button {
    margin: 20px auto 0;
}
.education-banner ul li:nth-of-type(2) {
    background-color: #5e1bb9;
}

.case-index {
    width: 100%;
    padding: 80px 0;
}
.case-index.bg {
    background-color: #edf3f7;
}
.case-index ul {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;

    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-flow: row nowrap;
    flex-flow: row nowrap;
    
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}
.case-index ul li {
    width: 30%;
    margin: 0 1.5% 60px;
}
.case-index ul li p {
    text-align: center;
    margin: 20px 0 0;
}
.case-index ul li img {
    width: 100%;
	max-width: 100%;
	height: auto;
}

.case-index .button {
    margin: 0 auto;
}

.case-item h2 {
    width: 100%;
    max-width: 650px;
    text-align: center;
    background-color: #FFF;
    border-radius: 36px;
    margin: 0 auto;
    padding: .6em 1em;
}

.case-item section {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;

    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
    
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center; 
    
    margin-top: 60px;
}
.case-item section:nth-of-type(even) {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
    -ms-flex-direction: row-reverse;
    flex-direction: row-reverse;
}
.case-item section p {
    width: 45%;
}
.case-item section .photo {
    width: 50%;
}
.case-item section .photo img {
    width: 100%;
	max-width: 100%;
	height: auto;
}

.company-banner {
    width: 90%;
    max-width: 1000px;
    background-image: url("../../business/images/profile_bg.jpg");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    border: 3px solid #FFF;
    margin: 0 auto;
    padding: 60px 0;
}
.company-banner h2 {
    text-align: center;
}
.company-banner .button {
    margin: 40px auto 0;
}

.business-item .opt-txt {
    width: 90%;
    max-width: 1000px;
    text-align: center;
    margin: 0 auto 80px;
}
.business-item section {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;

    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
    
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}
.business-item section:nth-of-type(even) {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
    -ms-flex-direction: row-reverse;
    flex-direction: row-reverse;
}
.business-item section .txt {
    width: 50%;
    padding: 5% 5%;
}
.business-item section .txt p {
    margin: 3% 0 5%;
}
.business-item section .photo {
    width: 50%;
    background-image: url("../../business/images/products_05.jpg");
    background-position: center top;
    background-repeat: no-repeat;
    background-size: cover;
}
.business-item section:nth-of-type(2) .photo {
    background-image: url("../../business/images/products_06.jpg");
}
.business-item section .photo img {
    display: none;
    width: 100%;
	max-width: 100%;
	height: auto;
}

.b-equipment {
    
}
.b-equipment dl {
    width: 100%;
    background-color: #edf3f7;
    
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;

    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-flow: row nowrap;
    flex-flow: row nowrap;
    
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    
    margin-top: 80px;
}
.b-equipment dl dt {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center; 
    
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    
    font-size: 8rem;
    line-height: 100%;
    color: #FFF;
    text-align: center;
    white-space: nowrap;
    background-color: #5cabd3;
    padding: 3%;
}
.b-equipment dl dd {
    width: 42%;
    padding: 5% 3%;
}
.b-equipment dl dd:nth-of-type(2) {
    padding: 5% 4% 5% 0;
}
.b-equipment dl dd p {
    margin-top: 30px;
}
.b-equipment dl dd img {
	width: 100%;
	max-width: 100%;
	height: auto;
}

.b-equipment dl:nth-of-type(2) dt {
    background-color: #6e96cc;
}
.b-equipment dl:nth-of-type(3) dt {
    background-color: #7987c8;
}
.b-equipment dl:nth-of-type(4) dt {
    background-color: #8776c4;
}
.b-equipment dl:nth-of-type(5) dt {
    background-color: #906ac0;
}
.b-equipment dl:nth-of-type(6) dt {
    background-color: #a94bb8;
}
.b-equipment dl:nth-of-type(7) dt {
    background-color: #bc33b1;
}

.b-education section {
    width: 100%;
    position: relative;
    background-color: #edf3f7;
    margin-top: 180px;
    padding: 150px 0 5% 0;
}
.b-education section h1 {
    width: 360px;
    position: absolute;
    font-size: 8rem;
    line-height: 100%;
    font-weight: 500;
    color: #FFF;
    text-align: center;
    background-color: #1b8bb9;
    top: 0;
    left: 50%;
    -webkit-transform: translate(-50%, -50%); 
    transform: translate(-50%, -50%);
    z-index: 1;
    padding-top: 30px;
}
.b-education section span {
    display: block;
    font-size: 2.4rem;
    text-align: center;
}
.b-education section .inner {
    width: 90%;
    max-width: 1000px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;

    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-flow: row nowrap;
    flex-flow: row nowrap;
    
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center; 
    
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    
    margin: 0 auto;
}
.b-education section .inner img {
    width: 100%;
	max-width: 100%;
	height: auto;
}
.b-education section .inner p {
    width: 50%;
}
.b-education section .inner .photo {
    width: 45%;
}

.soft-banner {
    width: 100%;
    max-width: 1000px;
    border: 3px solid #edf3f7;
    margin: 80px auto 0;
}
.soft-banner dl {
    width: 100%;
    display: table;
}
.soft-banner dl dt {
    width: 30%;
    display: table-cell;
    font-size: 2.4rem;
    text-align: center;
    font-weight: 700;
    vertical-align: middle;
    background-color: #edf3f7;
    padding: 0;
}
.soft-banner dl dd {
    display: table-cell;
    padding-bottom: 3%;
}
.soft-banner dl dd ul {
    text-align: center;
}
.soft-banner dl dd ul li {
    width: 35%;
    display: inline-block;
    margin: 15px 5% 0;
}
.soft-banner dl dd ul li img {
	width: 100%;
	max-width: 100%;
	height: auto;
}
.access-map {
    position: relative;
}

@media only screen and (min-width:1px) and (max-width: 768px) {
	
    #about p {
        -moz-font-feature-settings: "palt";
        -webkit-font-feature-settings: "palt";
        font-feature-settings: "palt";
        text-align: justify;
    }
    #about p br {
        display: none;
    }
    #about ul {
        width: 100%;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-flow: row nowrap;
        flex-flow: row nowrap;

        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;

        background-image: url("../../images/bg_about.png");
        background-position: center bottom;
        background-repeat: no-repeat;
        background-size: 100% 40%;
        padding-bottom: 6%;
    }
    #about ul li {
        width: 40%;
        max-width: 240px;
        margin: 6% 5% 0;
    }
    #about ul li a {
        width: 100%;
        display: block;
        color: #333;
        text-align: center;
        text-decoration: none;
    }
    #about ul li a dl {
        width: 100%;
    }
    #about ul li a dl dd {
        font-size: 1.6rem;
        background-color: #edf3f7;
        padding: 10% 1em;
    }
    
    #works .inner {
        background-color: #edf3f7;
        margin-top: 6%;
    }
    #works ul {
        width: 90%;
        max-width: 1200px;
        display: block;

        margin: 0 auto;
        padding: 5% 0;
    }
    #works ul li {
        width: 100%;
        max-width: 360px;
        margin: 6% auto 0;
    }
    #works ul li a {
        width: 100%;
        display: block;
        color: #333;
        text-align: center;
        text-decoration: none;
    }
    #works ul li dl {
        width: 100%;
    }
    #works ul li dl dd {
        background-color: #edf3f7;
        padding: 6% 1em 6%;
    }

    .philosophy {
        width: 100%;
        display: block;
    }
    .philosophy li {
        width: 100%;
        color: #FFF;
        margin-bottom: 8%;
        padding: 10% 8%;
    }
    .philosophy li h2 {
        margin-bottom: 5%;
    }
    .philosophy li h2 span {
        font-size: 5rem;
        display: block;
        padding-bottom: 5%;
    }

    .access {
        width: 100%;
        display: block;
    }
    .access li {
        width: 100%;
        max-width: 100%;
        margin-top: 6%;
    }
    .access li h2 {
        font-size: 1.6rem;
        text-align: center;
        background-color: #edf3f7;
        margin-bottom: 5%;
        padding: 1em;
    }
    
    .message {
        display: block;
        margin: 0 auto;
    }
    .message .txt {
        width: 100%;
    }
    .message .txt p.name {
        margin-top: 2em;
    }
    .message .txt p.name strong {
        font-size: 2rem;
    }
    .message .photo {
        width: 100%;
        max-width: 300px;
        margin: 6% auto 0;
    }

    .ceo-history {
        margin: 8% auto 0;
    }
    .ceo-history h2 {
        font-weight: 500;
        text-align: center;
        background-color: #FFF;
        padding: .5em 1em;
    }
    .ceo-history ul {
        margin-top: 5%;
    }
    .ceo-history ul li {
        margin-top: .5em;
    }
    
    .bim .op-txt {
        text-align: left;
        margin: 0 auto 8%;
    }
    .bim section {
        width: 90%;
        display: block;
        margin: 0 auto;
    }
    .bim section .txt {
        width: 100%;
        padding: 0 0 6%;
    }
    .bim section .photo {
        width: 100%;
        padding-bottom: 10%;
    }
    .bim-means {
        margin: 8% auto;
    }
    .bim-means .photo {
        width: 100%;
        max-width: 720px;
        margin: 8% auto 0;
    }

    .equipment-bim {
        padding: 8% 0;
    }
    .equipment-bim h2 {
        text-align: center;
    }
    .equipment-bim .button {
        margin: 5% auto 0;
    }

    .education-banner {
        margin: 10% auto 0;
    }
    .education-banner .head {
        color: #FFF;
        background-image: url("../../bim/images/bim_bg2.jpg");
        background-position: center center;
        background-repeat: no-repeat;
        background-size: cover;
        padding: 8%;
    }
    .education-banner .head h1 {
        font-size: 2rem;
        font-weight: 700;
        margin-bottom: 5%;
    }
    .education-banner ul {
        width: 100%;
        display: block;
    }
    .education-banner ul li {
        width: 100%;
        color: #FFF;
        text-align: center;
        background-color: #1bb999;
        padding: 6% 5%;
    }
    .education-banner ul li .button {
        margin: 20px auto 0;
    }
    
    .case-index ul {
        width: 100%;
        display: block;
    }
    .case-index ul li {
        width: 100%;
        max-width: 360px;
        margin: 0 auto 6%;
    }
    .case-index ul li p {
        text-align: center;
        margin: 20px 0 0;
    }
    
    .case-item h2 {
        width: 100%;
        max-width: 650px;
        text-align: center;
        background-color: #FFF;
        border-radius: 36px;
        margin: 0 auto;
        padding: .6em 1em;
    }

    .case-item section {
        display: block;
        margin-top: 6%;
    }
    .case-item section p {
        width: 100%;
    }
    .case-item section .photo {
        width: 100%;
        max-width: 525px;
        margin: 6% auto 0;
    }
    
    .company-banner {
        padding: 8% 0;
    }
    .company-banner h2 {
        text-align: center;
    }
    .company-banner .button {
        margin: 5% auto 0;
    }
    
    .business-item .opt-txt {
        margin: 0 auto 8%;
    }
    .business-item section {
        display: block;
    }
    .business-item section:nth-of-type(even){
        margin-top: 10%;
    }
    .business-item section .txt {
        width: 100%;
        padding: 0 5%;
    }
    .business-item section .txt h2 {
        text-align: center;
    }
    .business-item section .txt .button {
        margin: 0 auto;
    }
    .business-item section .txt p {
        margin: 5% 0;
    }
    .business-item section .photo {
        width: 90%;
        max-width: 720px;
        background-image: none;
        margin: 8% auto 0;
    }
    .business-item section .photo img {
        display: block;
    }

    .b-equipment {

    }
    .b-equipment dl {
        width: 100%;
        background-color: #edf3f7;
        display: block;
        margin-top: 8%;
    }
    .b-equipment dl dt {
        display: block;
        font-size: 4rem;
        padding: 5%;
    }
    .b-equipment dl dd {
        width: 100%;
        padding: 5% 5%;
    }
    .b-equipment dl dd:nth-of-type(2) {
        padding: 0 5% 5%;
    }
    .b-equipment dl dd p {
        margin-top: 5%;
    }

    .b-equipment dl:nth-of-type(2) dt {
        background-color: #6e96cc;
    }
    .b-equipment dl:nth-of-type(3) dt {
        background-color: #7987c8;
    }
    .b-equipment dl:nth-of-type(4) dt {
        background-color: #8776c4;
    }
    .b-equipment dl:nth-of-type(5) dt {
        background-color: #906ac0;
    }
    .b-equipment dl:nth-of-type(6) dt {
        background-color: #a94bb8;
    }
    .b-equipment dl:nth-of-type(7) dt {
        background-color: #bc33b1;
    }
    
    .b-education section {
        width: 100%;
        position: relative;
        background-color: #edf3f7;
        margin-top: 28%;
        padding: 80px 0 5% 0;
    }
    .b-education section h1 {
        width: 90%;
        position: absolute;
        font-size: 4rem;
        line-height: 100%;
        font-weight: 500;
        color: #FFF;
        text-align: center;
        background-color: #1b8bb9;
        top: 0;
        left: 50%;
        -webkit-transform: translate(-50%, -50%); 
        transform: translate(-50%, -50%);
        z-index: 1;
        padding: 15px 0;
    }
    .b-education section span {
        display: block;
        font-size: 2rem;
        text-align: center;
        margin-top: 3%;
    }
    .b-education section .inner {
        width: 100%;
        display: block;
        margin: 0 auto;
        padding: 0 5% 5%;
    }
    .b-education section .inner p {
        width: 100%;
    }
    .b-education section .inner .photo {
        width: 100%;
        max-width: 450px;
        margin: 5% auto 0;
    }

    .soft-banner {
        margin: 10% auto 0;
    }
    .soft-banner dl {
        width: 100%;
        display: block;
    }
    .soft-banner dl dt {
        width: 100%;
        display: block;
        font-size: 2rem;
        padding: 5%;
    }
    .soft-banner dl dd {
        display: block;
        padding-bottom: 5%;
    }
    .soft-banner dl dd ul {
        text-align: center;
    }
    .soft-banner dl dd ul li {
        width: 40%;
        display: inline-block;
        margin: 15px 2.5% 0;
    }
    
}

@media only screen and (min-width:1px) and (max-width: 568px) {
	


}
	
@media only screen and (min-width:1px) and (max-width: 480px) {
	
   
    
}