@charset "utf-8";
/* CSS Document */
#zj_ma17-top ul {
    display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
#zj_ma17-top ul li { width:50%; height: 39vw;}
#zj_ma17-top ul li:nth-child(1) { background-color: #1F7F9B; position: relative;}
#zj_ma17-top ul li:nth-child(2) { background-image: url("../images/dc97/1.jpg"); background-size: cover; background-position: center; background-repeat: no-repeat;}
#zj_ma17-top ul li:nth-child(1) img { width: auto; height: 60%; position: absolute; top:50%; left: 50%; transform: translate(-50%,-50%);}

.image { position: relative; height: 45vw; background-position: center; background-repeat: no-repeat; background-size: cover;}
#zj_ma17-top .image { height: 51.25vw; background-image: url("../images/dc99/1.jpg");}
#zj_ma17-top .image h2 {
    position: absolute; left: 15.4vw; top:6.6vw;
}
#zj_ma17-top .image h2 img { width: 34.2vw; height: auto;}
.image1 { background-image: url("../images/dc99/2.jpg"); background-position: center bottom; height: 53.1063321385902vw;}
.image h3 { font-size: 5vw; color: #32ADC6; position: absolute; bottom:4vw; left: 10vw; line-height: 1.4;font-weight: bold}
.image h3 span { font-size: 40%; display: block; color: #000;}
.image h3 em { font-style: normal; font-size: 20%;}
.image h3 p { font-size: 1vw;}
.image1 h3 { }
.image2 { background-image: url("../images/dc99/3.jpg"); background-position: center bottom; height: 53.1063321385902vw;}
.image.image2 li { position: relative;}


.clmImage {  height: 100%;
    display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.clmImage li { height: 100%; width: 50%; background-repeat: no-repeat; background-size: cover; background-position: center;}
.clmImage li:nth-child(1){ background-image: url("../images/dc97/3.jpg");}
.clmImage li:nth-child(2){ background-image: url("../images/dc97/4.jpg");}

.clmImage.clm2 li:nth-child(1){ background-image: url("../images/ac98/5.jpg"); width: 60%;}
.clmImage.clm2 li:nth-child(2){ background-image:none; width: 40%; position: relative;}
.image .clmImage.clm2 li h3 span { display: inline;}

.h3 { background-color: rgba(255,255,255,.6); padding: 2vw; position: absolute; top:50%; left: 50%; transform: translate(-50%,-50%); width: 30vw; box-sizing: border-box; }
.h3 h3 { position: static;}
.h3 p { font-size: 1vw;}

.image2 .h3 {
    background-color: transparent;
    padding: 0;
    top: 4vw;
    left: 4vw;
    transform: translate(0%,0%);
    width: auto;
}

#zj_ma17-feature section { padding: 5vw 0 0 0; }
#zj_ma17-feature section.last { padding: 5vw 0 ; }
#zj_ma17-feature section h2 { text-align: center; font-size: 5vw; font-weight: bold; margin-bottom: .7em; color: #32ADC6; line-height: 1.4;}
#zj_ma17-feature section h2 span { font-size: 40%; color: #000; display: block;}
#zj_ma17-feature section .clmImage { padding: 0 .5vw;}
#zj_ma17-feature section .clmImage li { color: #FFF; text-align: center; font-size: 2vw;}
#zj_ma17-feature section .clmImage li:nth-child(1){ background-color: #1F7F9B; margin:0 .5vw; }
#zj_ma17-feature section .clmImage li:nth-child(2){ background-color: #1F7F9B;  margin:0 .5vw;}
#zj_ma17-feature section .clmImage li { padding: 2vw; box-sizing: border-box; background-image: none;}
#zj_ma17-gNav.fixed { z-index: 2600;}

.photo6 { padding: 1vw;
     display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.photo6 li { width: 31.5vw; margin-bottom: 1.166666666666667vw;}
.photo6 li img { width: 100%; height: auto;}

.clm3 { max-width: 1200px; margin: 0 auto;
    display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
    justify-content: space-between;
}
.clm3 li { width: 33.3333%; padding: 3vw; box-sizing: border-box; text-align: center;}
.clm3 li img { width: 100%; height: auto;}
.clm3 li:nth-child(2) img { width: 70%; height: auto;}

@media screen and  (max-width:736px){
    #zj_ma17-top ul { flex-direction: column;}
    #zj_ma17-top ul li { width: 100%; height: 70vw;}
    .image h3 { font-size: 8vw; line-height: 1.2; margin-bottom: .3em;}
    .image1 h3 {
    text-shadow: 1px 1px 0 #000;
}
    .h3 { width: 100%;padding: 0 6vw;}
    .image2 .h3 {
    padding: 4vw;
    position: static;
    transform: translate(0%,0%);
    width: auto;
}
    .image.image2 { }
    .image.image2 .clmImage { height: 45vw;}
    #zj_ma17-feature section h2 {
    font-size: 8vw;
}
    .image.image2 li h3 { font-size: 6vw;}
    .photo6 li { width: 49.5%; margin-bottom: 1.166666666666667vw;}
    .clmImage.sign {}
    #zj_ma17-feature section .clmImage.sign li { margin-bottom: 1vw; font-size: 3.5vw;}
    .spHeader {z-index: 1100;}
    
    #zj_ma17-top .image h2 img {
    width: 38.2vw;
    height: auto;
}
    
    .clm3 { flex-wrap: wrap;
}
.clm3 li { width: 50%;}
    .clm3 li:nth-child(3) { width: 100%;}
.clm3 li:nth-child(3) img { width: 60%; height: auto;}
}