/* CSS Document */

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

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

.top-image {
	width: 100%;
	position: relative;
    margin-top: 70px;
}

.top-image .photo {
	width: 100%;
	position: relative;
    z-index: 2;
}
.top-image .bg-photo {
	width: 100%;
	position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
}
.top-image .top-title {
	width: 90%;
	position: absolute;
    top: 50%;
	left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
	z-index: 3;
}
.top-image .top-title h1 {
    width: 13%;
    max-width: 152px;
    font-size: 5rem;
    color: #FFF;
    line-height: 0;
    margin: 0 auto;
}
.top-image .top-title p {
    width: 95%;
    position: absolute;
    font-size: 1.6rem;
    letter-spacing: .1em;
    line-height: 180%;
    color: #FFF;
    text-align: right;
    top: 45%;
	left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    z-index: 1;
}
.top-image .top-title p br {
    display: none;
}

.top-image img {
	width: 100%;
	max-width: 100%;
	height: auto;
}

.top-message {
    width: 100%;
    background-color: #e6f3fb;
    background-image: url("../../images/index2_04.png");
    background-position: left bottom;
    background-repeat: no-repeat;
    background-size: contain;
    padding-bottom: 200px;
}
.top-message h1 {
    width: 65%;
    max-width: 571px;
    line-height: 100%;
    margin: 0 auto 1em;
}
.top-message h1 img {
	width: 100%;
	max-width: 100%;
	height: auto;
}
.top-message p {
    width: 90%;
    max-width: 500px;
    font-size: 2.4rem;
    letter-spacing: .1em;
    color: #0043a9;
    line-height: 240%;
    margin: 0 auto;
}

.top-company {
    width: 100%;
    position: relative;
}
.top-company img {
    width: 100%;
	max-width: 100%;
	height: auto;
}
.top-company .head {
    position: relative;
}
.top-company h1 {
    width: 50%;
    position: absolute;
    font-size: 8rem;
    line-height: 100%;
    color: #FFF;
    text-align: center;
    font-family: 'Roboto', sans-serif;
    
    top: 58%;
    left: 0;
    -webkit-transform: translate(0, -50%); 
    transform: translate(0, -50%);
    
    z-index: 1;
    padding: 0 5%;
}
.top-company h1 span {
    display: block;
    font-size: 3rem;
    margin-top: 6%;
}
.top-company h2 {
    font-size: 3rem;
    text-align: center;
    line-height: 180%;
}
.top-company .banner {
    width: 90%;
    max-width: 1200px;
    display: block;
    position: relative;
    margin: 60px auto 0;
}
.top-company .banner .title {
    width: 50%;
    max-width: 562px;
    position: absolute;
    top: 35%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%); 
    transform: translate(-50%, -50%);
    z-index: 1;
}
.readmore-b {
    width: 18%;
    max-width: 215px;
    position: absolute;
    left: 50%;
    bottom: 8%;
    -webkit-transform: translate(-50%, 0); 
    transform: translate(-50%, 0);
    z-index: 2;
}
.readmore-b .arrow {
    width: 5%;
    position: absolute;
    top: 30%;
    right: 8%;
    z-index: 1;
    
    /* animation */
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
}
.banner:hover .readmore-b .arrow {
    top: 30%;
    right: 10px;
}

.top-factory {
    width: 100%;
    position: relative;
    margin-top: 80px;
}
.top-factory img {
    width: 100%;
	max-width: 100%;
	height: auto;
}
.top-factory .head {
    position: relative;
}
.top-factory h1 {
    width: 50%;
    position: absolute;
    font-size: 8rem;
    line-height: 100%;
    color: #FFF;
    text-align: center;
    font-family: 'Roboto', sans-serif;
    
    top: 58%;
    left: 0;
    -webkit-transform: translate(0, -50%); 
    transform: translate(0, -50%);
    
    z-index: 1;
    padding: 0 5%;
}
.top-factory h1 span {
    display: block;
    font-size: 3rem;
    margin: 3% 0;
}
.top-factory h1 span.icon {
    width: 30%;
    max-width: 175px;
    min-width: 120px;
    line-height: 100%;
    margin: 0 auto 3%;
}
.top-factory h2 {
    font-size: 3rem;
    text-align: center;
    line-height: 180%;
    margin-bottom: 80px;
}
.top-factory .banner {
    width: 90%;
    max-width: 1200px;
    display: block;
    position: relative;
    margin: 0 auto;
    z-index: 1;
}
.top-factory .banner .photo {
    width: 50%;
}
.top-factory .banner.re {
    z-index: 0;
}
.top-factory .banner.re .photo {
    margin: -7% 0 0 auto;
    padding-bottom: 7%;
}
.top-factory .banner .photo a {
    width: 100%;
    display: block;
    position: relative;
}
.top-factory .banner .txt {
    width: 50%;
    position: absolute;
    top: 0;
    right: 0;
    -webkit-transform: translate(0, -19%); 
    transform: translate(0, -19%);
    z-index: 1;
}
.top-factory .banner.re .txt {
    top: initial;
    top: auto;
    left: 0;
    bottom: 0;
    -webkit-transform: translate(0, 0); 
    transform: translate(0, 0);
}
.top-factory .banner .txt .inner {
    width: 100%;
    position: absolute;
    top: 55%;
    left: 0;
    -webkit-transform: translate(0, -50%); 
    transform: translate(0, -50%);
    padding: 0 8%;
    z-index: 1;
}
.top-factory .banner .txt .inner h3 {
    font-size: 3rem;
    color: #0043a9;
}
.top-factory .banner .txt .inner p {
    font-size: 1.8rem;
    line-height: 180%;
    margin-top: 5%;
}

.go-b {
    width: 35.8%;
    max-width: 215px;
    position: absolute;
    left: 0;
    bottom: 0;
    -webkit-transform: translate(0, 0); 
    transform: translate(0, 0);
    z-index: 2;
}
.go-b .arrow {
    width: 5%;
    position: absolute;
    top: 30%;
    right: 8%;
    z-index: 1;
    
    /* animation */
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
}
.banner a:hover .go-b .arrow {
    top: 30%;
    right: 10px;
}



@media only screen and (min-width:1px) and (max-width: 920px) {
    
    .top-image .top-title p {
        font-size: 1.4rem;
    }
    .top-image .top-title p br {
        display: block;
    }
    .top-message {
        padding-bottom: 20%;
    }
    
    .top-company h1 {
        font-size: 8vw;
    }
    .top-company h1 span {
        font-size: 2rem;
    }
    
    .top-factory h1 {
        font-size: 8vw;
    }
    .top-factory h1 span {
        font-size: 2rem;
    }
    
    .top-factory .banner .txt .inner h3 {
        font-size: 2rem;
    }
    .top-factory .banner .txt .inner p {
        font-size: 1.6rem;
        margin-top: 5%;
    }
}

@media only screen and (min-width:1px) and (max-width: 768px) {
	
	.top-image {
		margin-top: 70px;
	}
    .top-image .top-title {
        top: 45%;
    }
    .top-image .top-title p {
        width: 100%;
        position: relative;
        top: 0;
        left: 0;
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0);
        z-index: 1;
    }
    .top-message {
        padding-top: 5%;
    }
    .top-message p {
        width: 90%;
        max-width: 90%;
        font-size: 1.6rem;
        text-align: center;
        letter-spacing: .1em;
        line-height: 240%;
    }
    
    .top-company h1 {
        width: 50%;
        position: absolute;
        font-size: 8vw;
        top: 58%;
        left: 0;
        -webkit-transform: translate(0, -50%); 
        transform: translate(0, -50%);
    }
    .top-company h1 span {
        font-size: 1.6rem;
    }
    
    .top-company h2 {
        font-size: 2rem;
    }
    .top-company .banner {
        margin: 6% auto 0;
    }
    .top-company .banner .title {
        width: 70%;
        position: absolute;
        top: 35%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%); 
        transform: translate(-50%, -50%);
        z-index: 1;
    }
    .readmore-b {
        width: 18%;
        min-width: 120px;
        position: absolute;
        left: 50%;
        bottom: 0;
        -webkit-transform: translate(-50%, 15%); 
        transform: translate(-50%, 15%);
        z-index: 1;
    }
    
    .top-factory {
        width: 100%;
        position: relative;
        margin-top: 15%;
    }
    
    .top-factory h1 {
        width: 50%;
        position: absolute;
        font-size: 8vw;
        top: 45%;
        left: 0;
        -webkit-transform: translate(0, -50%); 
        transform: translate(0, -50%);
    }
    .top-factory h1 span {
        font-size: 1.6rem;
    }
    
    .top-factory h2 {
        font-size: 2rem;
        margin-bottom: 0;
    }
    
    .top-factory .banner {
        width: 90%;
        max-width: 600px;
        display: block;
        position: relative;
        margin: 8% auto 0;
        z-index: 1;
    }
    .top-factory .banner .photo {
        width: 100%;
    }
    .top-factory .banner.re {
        z-index: 0;
    }
    .top-factory .banner.re .photo {
        margin: 0;
        padding-bottom: 0;
    }
    .top-factory .banner .photo a {
        width: 100%;
        display: block;
        position: relative;
    }
    .top-factory .banner .txt {
        width: 100%;
        position: relative;
        top: 0;
        right: 0;
        -webkit-transform: translate(0, 0); 
        transform: translate(0, 0);
        z-index: 1;
    }
    .top-factory .banner.re .txt {
        top: initial;
        top: auto;
        left: 0;
        bottom: 0;
        -webkit-transform: translate(0, 0); 
        transform: translate(0, 0);
    }
    .top-factory .banner .txt .inner {
        width: 100%;
        position: relative;
        top: 0;
        left: 0;
        -webkit-transform: translate(0, 0); 
        transform: translate(0, 0);
        padding: 0 8%;
        z-index: 1;
    }
    .top-factory .banner .txt .inner h3 {
        font-size: 2rem;
        color: #0043a9;
        text-align: center;
    }
    .top-factory .banner .txt .inner p {
        font-size: 1.6rem;
        line-height: 180%;
        text-align: center;
        margin-top: 5%;
    }

}

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

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

}