@charset "UTF-8";
/* CSS Document */

.sec1{position:relative; top:0px; left:0px; width:100%; height:100vh; overflow: hidden; margin-top:2.4vw;}

section p{line-height: 1vw; font-size: 0.84vw;}

.sec1 p,
.sec2 p{text-align: center;}

.sec1 h1,
.sec2 h1{font-size: 1.93vw; text-align: center; color:#004274; margin-bottom: 1.4vh;}

.sec1 h1 span,
.sec2 h1 span{color:#669835;}

.sec1{background-color:#fff; position:relative;}
.sec1 .prlx{height:114%;}
.sec1 ul li{position:absolute; top:0px; height:100%; display: grid; align-content: center;}
.sec1 .sec1_img{left:0px; width:63.6vw;}
.sec1 .sec1_img .l_1{position:relative; height:70.5vh; overflow: hidden; display: grid; align-content: center;}
.sec1 .sec1_img img{width:100%; height:auto;}
.sec1 .sec1_h{right:6.1vw; width:27vw; top:50%; height:auto; display:block; -ms-transform: translateY(-50%); -webkit-transform: translateY(-50%); transform: translateY(-50%); text-align: left;}
.sec1 .sec1_h .btn1{margin-left:0px;}
.sec1 .sec1_ptrn1{position: absolute; top: 12.4vw; right: 0vw; width: 2.6vw; height: auto; display: block;}

.sec2{position:relative; height:auto; background-color:#fff; padding-bottom:13.3vw; overflow:hidden;}
.sec2 .sec2_1{position:relative; margin:0 auto; width:75vw; height:83.4vw;}
.sec2 ul li{position:absolute;}
.sec2 ul li.sec2_box{position:absolute; top:0px; left:0px; width:100%; height:100%; background-color:#004274; padding:0vw; display: block; -webkit-transition-duration: 0.3s; transition-duration: 0.3s;}
.sec2.on ul li.sec2_box{-webkit-transition-duration: 1s; transition-duration: 1s; padding:2.1vw;}

.sec2 ul li.sec2_box span{position:relative; width:100%; height:100%; background-color:#fff; display: block;}

.sec2 ul li.hdr1{top: 9vw; left: 8.7vw;}
.sec2 ul li.hdr1 h1{text-align:left;}

.sec2 ul li.hdr2{top: 45.6vw; left: 50%; -ms-transform: translateX(-50%); -webkit-transform: translateX(-50%); transform: translateX(-50%);}

.sec2 ul li.img1{width: 47.3vw; top: 0vw; right: 50%; -ms-transform: translateX(105.7%); -webkit-transform: translateX(105.7%); transform: translateX(105.7%);}
.sec2 ul li.img1 ._anote{bottom:12vw;}

.sec2 ul li.img1 p.txt1{position: absolute; bottom: 5.7vw; left: 0px; width: 20vw; text-align: left; line-height: 1vw; -ms-transform: translateY(5vh); -webkit-transform: translateY(5vh); transform: translateY(5vh);}
.sec2 ul li.img1 p.txt2{position: absolute; bottom: 3.2vw; left: 22vw; width: auto; text-align: center; line-height: 1vw;}

.sec2 ul li.img1 p{-webkit-transition-duration: 0.3s; transition-duration: 0.3s; transition-delay: 0s; opacity:0;}
.sec2 ul p.on{-webkit-transition-duration: 1s; transition-duration: 1s; opacity:1;}
.sec2 ul .img1 .txt1.on{transition-delay: 0.5s;  -ms-transform: translateY(0vh); -webkit-transform: translateY(0vh); transform: translateY(0vh);}
.sec2 ul .img1 .txt2.on{transition-delay: 1s;}

.sec2 ul li.img2{width: 43.4vw; top: 18vw; left: 2.1vw;}
.sec2 ul li.img2 p{position: absolute; bottom: 0.7vw; left: 15.6vw; width: auto; text-align: left; line-height: 1vw; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; transition-delay: 0s; opacity:0;}
.sec2 ul .img2 p.on{opacity:1; transition-delay: 1s;}

.sec2 ul li.img3{width: 58vw; bottom: -13.1vw; left: -12.6vw;}
.sec2 ul li.img3 ._anote{bottom: 13vw; right: 11vw;}
.sec2 ul li.img3 .flwr1{position: absolute; top: 0px; left: 5.6vw; width: 9vw; -ms-transform: translateY(-100%); -webkit-transform: translateY(-100%); transform: translateY(-100%);}

.sec2 ul li.elm1{bottom: -7.7vw; right: 50%; width: 49vw; -ms-transform: translateX(102%); -webkit-transform: translateX(102%); transform: translateX(102%); overflow: hidden;}
.sec2 ul li.elm1 p{position: absolute; top: 2.4vw; left: 25.3vw; width: auto;}

.sec2 ul li.elm2{right: 2vw; top: 40.3vw; width: 13vw;}

.sec2 ul li.e_txt1{bottom: 19vw; right: 5.8vw; width: 31vw;}

.sec2 .m_bee{position: absolute; top: 1vw; left: 0vw; width: 2.5vw; height: 2.5vw; background: url(../img/page_thedevelopment/bee.png) center no-repeat; background-size: 100% auto;}
.sec2 .m_bfly{position: absolute; top: 5vw; left: 5vw; width: 6vw; height: 6vw; background: url(../img/page_thedevelopment/butterfly-plaintiger.gif) center no-repeat; background-size: 100% auto;}
.sec2 .m_dfly{position: absolute; top: 1vw; left: 13vw; width: 6vw; height: 6vw; background: url(../img/page_thedevelopment/dfly.gif) center no-repeat; background-size: 100% auto;
    animation: dflymove 8s ease-out infinite;
}


.sec2 .m_light{position: absolute; top: -14.3vw; right: 0.3vw; width: 27vw;}
.sec2 .m_light img{-webkit-transition-duration: 0.3s; transition-duration: 0.3s; -ms-transform: scale(0,0); -webkit-transform: scale(0,0);  transform: scale(0,0); transition-delay: 0s;}
.sec2 .m_light.on img{-ms-transform: scale(1,1); -webkit-transform: scale(1,1);  transform: scale(1,1); -webkit-transition-duration: 2s; transition-duration: 2s; transition-delay: 1s;}

/*xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx MOBILE*/


.mobile .prlx_2{height:150%!important;}

.mob_sec{display: none!important;}
.mobile .mob_sec{display: block!important;}

.mobile section{display: none!important;}

.mobile .f_kv{height:134.2vw;}

.mobile .f_kv,
.mobile .sec1{display: block!important;}


.mobile .sec1 h1,
.mobile .mob_sec h1{font-size: 4.95vw; color:#004274; text-align: center; width:100%;}
.mobile .sec1 p,
.mobile .mob_sec p{width:86.5vw; margin:0 auto; line-height: 3.7vw!important; font-size: 3vw; text-align: center;}

.mobile h1 span,
.mobile h1 span{color:#669835;}

.mobile .sec1{height:153vw; background:none; background-color:#fff;}
.mobile .sec1 .sec1_h{right:auto; left: 0vw; width: 100%; top: 42vw;}
.mobile .sec1 .sec1_img{width: 100%; display: block; top:73.1vw;}
.mobile .sec1 .sec1_img .l_1{display: block; height:80vw;}
.mobile .img_ptrn{position:absolute; top:-5.5vw; left:50%; width:63vw!important; -ms-transform: translateX(-50%); -webkit-transform: translateX(-50%); transform: translateX(-50%);}

.mobile .mob_sec{position:relative; height:auto; overflow:hidden; margin-bottom:14vw;}
.mobile .mob_sec .mob_box{position:absolute; top:18.4vw; left:50%; width:85vw; height:90%; z-index:-1; padding:3.5vw;  -ms-transform: translateX(-50%); -webkit-transform: translateX(-50%); transform: translateX(-50%);  background-color:#004274;}
.mobile .mob_sec .mob_box span{position:relative; display: block; width:100%; height:100%; background-color:#fff;}
.mobile .mob_sec .h1_1{padding-top:29vw;}
.mobile .mob_sec .h1_2{padding-top:14vw;}
.mobile .mob_sec .h1_2 p{width: 75vw;}
.mobile .mob_sec .h1_2 h1{padding-bottom: 3.5vw;}
.mobile .mob_sec .img_1{padding-top: 6vw;}
.mobile .mob_sec .img_1 img{width:78.05vw; margin:0 auto; padding-bottom: 10.3vw;}
.mobile .mob_sec .img_1 p{width: 69vw; margin: 0 auto;}
.mobile .mob_sec .img_2{padding-top:5.6vw; position:relative;}
.mobile .mob_sec .img_2 .mob_elm{position: absolute; bottom: -15vw; right: 11vw; width: 24vw; height: 30vw; background:url(../img/page_thedevelopment/elm2.png) top right no-repeat; background-size:100% auto;}
.mobile .img_3{-ms-transform: translateY(-4.4vw); -webkit-transform: translateY(-4.4vw); transform: translateY(-4.4vw); position:relative;}

.mobile .mob_photo4_prlx{position:absolute; top:19.8vw; left:0vw; width:100%; height:auto; display: block; z-index:-1;}

@keyframes dflymove{
    0% {-ms-transform: translate(0vw,0vw); -webkit-transform: translate(0vw,0vw); transform: translate(0vw,0vw);}
    30% {-ms-transform: translate(0vw,0vw); -webkit-transform: translate(0vw,0vw); transform: translate(0vw,0vw);}
    31% {-ms-transform: translate(3vw,-1vw); -webkit-transform: translate(3vw,-1vw); transform: translate(3vw,-1vw);}
    60% {-ms-transform: translate(3vw,-1vw); -webkit-transform: translate(3vw,-1vw); transform: translate(3vw,-1vw);}
    61% {-ms-transform: translate(6vw,3vw); -webkit-transform: translate(6vw,3vw); transform: translate(6vw,3vw);}
    70% {-ms-transform: translate(6vw,3vw); -webkit-transform: translate(6vw,3vw); transform: translate(6vw,3vw);}
    71% {-ms-transform: translate(4vw,2vw); -webkit-transform: translate(4vw,2vw); transform: translate(4vw,2vw);}
    99% {-ms-transform: translate(4vw,2vw); -webkit-transform: translate(4vw,2vw); transform: translate(4vw,2vw);}
    100% {-ms-transform: translate(0vw,0vw); -webkit-transform: translate(0vw,0vw); transform: translate(0vw,0vw);}
  }


/* Mediaqueries */

@media (max-width:1366px){

    section p{line-height: 1.25vw!important; font-size: 1vw;}
    .sec2 ul li.img1 p.txt1{bottom: 1.7vw;}
    .sec2 ul li.img2 p{bottom:0.5vw;}
    .sec2 ul li.img1 p.txt2{left:21.3vw;}

}

@media (max-width:1024px){


}

@media (max-width:550px){
}