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

section p{line-height: 1vw; font-size: 0.84vw;}
section h1{font-size: 1.93vw; text-align: center; color:#004274; margin-bottom: 1vw;}
section h1 span{color:#669835;}

.prlx{height:auto;}

.sec1{position:relative; top:0px; left:0px; width:100%; height:67.6vw; overflow:hidden; background-color:#fff;}
.sec1 ul li{position:absolute;}
.sec1 .hdr_1{top:10.3vw; left:0px; width:100%; text-align: center;}
.sec1 .hdr_1 p{width:38vw; margin:0 auto;}
.sec1 .hdr_2{top: 35.3vw; left: 23vw; width: auto; text-align: center; z-index: 4;}
.sec1 .hdr_2 p{width:21vw; margin:0 auto;}

.sec1 .l_frame{top:21.6vw; left:50%; width: 66.2vw; height: 34.8vw; background-color:#669835; opacity:1; -ms-transform: translateX(-50%); -webkit-transform: translateX(-50%); transform: translateX(-50%);}
.sec1 .l_frame .box{position:absolute; top:0px; left:0px; width:100%; height:100%; padding:0vw; display: block; -webkit-transition-duration: 0.3s; transition-duration: 0.3s;}
.sec1 .l_frame.on .box{padding:2.05vw; -webkit-transition-duration: 1s; transition-duration: 1s;}
.sec1 .l_frame .box span{position:relative; display: block; width:100%; height:100%; background-color:#fff;}
.sec1 .l_frame .l_leaves{position:absolute; top:0px; left:0px; width:100%; height:100%; background:url(../img/page_greenerliving/leaves.jpg) top left no-repeat; background-size:auto 100%; opacity:0; -webkit-transition-duration: 0.3s; transition-duration: 0.3s;}
.sec1 .l_frame.on .l_leaves{opacity:1; -webkit-transition-duration: 1s; transition-duration: 1s;}

.sec1 .l_elm1{top: 8.6vw; right: 0.8vw; width: 17.3vw; display: block;}
.sec1 .l_elm2{bottom: 3.8vw; left: 0vw; width: 15.3vw; display: block;}

.sec1 .l_eagle{top: 18vw; left: 12.4vw; width: 16.3vw; display: block; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; opacity:0;
    -ms-transform: translate(-3vw,3vw); -webkit-transform: translate(-3vw,3vw); transform: translate(-3vw,3vw);
}
.sec1 .l_eagle.on{-webkit-transition-duration: 1.3s; transition-duration: 1.3s; opacity:1; -ms-transform: translate(0vw,0vw); -webkit-transform: translate(0vw,0vw); transform: translate(0vw,0vw);}
.sec1 .l_plant1{bottom: -14.6vw; left: 38.7vw; width: 14.7vw; display: block; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -ms-transform: scale(0,0); -webkit-transform: scale(0,0); transform: scale(0,0);}
.sec1 .l_plant1.on{-webkit-transition-duration: 2s; transition-duration: 2s; -ms-transform: scale(1,1); -webkit-transform: scale(1,1); transform: scale(1,1);}
.sec1 .l_plant1 img{margin-bottom:100%;}
.sec1 .l_plant2{bottom: 5vw; right: 16vw; width: 16.2vw; display: block; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -ms-transform: scale(0,0); -webkit-transform: scale(0,0); transform: scale(0,0);}
.sec1 .l_plant2.on{-webkit-transition-duration: 2s; transition-duration: 2s; -ms-transform: scale(1,1); -webkit-transform: scale(1,1); transform: scale(1,1);}
.sec1 .l_plant2 img{margin-bottom:50%;}
.sec1 .l_brd1{bottom: 0vw; right: 27.5vw; width: 25vw; display: block;}
.sec1 .l_brd2{bottom: 0vw; right: 27.5vw; width: 25vw; display: block;}
.sec1 .l_brd3{top: 14.6vw; right: 0vw; width: 20.4vw; display: block;}
.sec1 .l_owl{bottom: 23.7vw; left: 0vw; width: 8.3vw; display: block; }
.sec1 .l_insect1{bottom: 22.3vw; right: 0vw; width: 8vw; display: block;}
.sec1 .l_monkey{top: 24.9vw; right: 18.3vw; width: 11vw; display: block;}

.sec1 .l_owl,
.sec1 .l_insect1,
.sec1 .l_monkey{opacity:0; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; transition-delay: 0s;}

.sec1.on .l_owl,
.sec1.on .l_insect1,
.sec1.on .l_monkey{opacity:1; -webkit-transition-duration: 0.6s; transition-duration: 0.6s;}

.sec1 ul i{position: absolute; font-size: 0.62vw; font-style: normal; line-height: 0.7vw;}
.sec1 .l_eagle i{top: 8.1vw; left: -4.1vw;}
.sec1 .l_plant1 i{top: 7.3vw; left: 0vw;}
.sec1 .l_plant2 i{top: -1vw; right: 3.5vw;}
.sec1 .l_brd1 i{bottom: 6.4vw; left: 11.2vw;}
.sec1 .l_brd3 i{top: 3vw; left: 4.9vw;}
.sec1 .l_owl i{top: 2.1vw; right: -0.6vw;}
.sec1 .l_insect1 i{top: 4.3vw; left: -2vw;}
.sec1 .l_monkey i{bottom: -2vw; right: 1.5vw;}



.sec2{position:relative; top:0px; left:0px; width:100%; height:64.5vw; overflow:hidden; background-color:#fff;}
.sec2 .bg1{overflow: hidden; position:relative; background-color:#f0f0f0;}
.sec2 .bg1 img{-webkit-transition-duration: 0.3s; transition-duration: 0.3s;}

.sec2 .bg1 h1{display: block; position:absolute; top:43.7%; right:3vw;  -ms-transform: translateY(-50%); -webkit-transform: translateY(-50%); transform: translateY(-50%); font-size:2.1vw; color:#004274; z-index:2;}
.sec2 .bg1 h1 font{display: block; position:relative; -webkit-transition-duration: 0.3s; transition-duration: 0.3s;}

.sec2 .icn_set{width:77.7vw; display: block; margin:0 auto; margin-top: 3.6vw;}
.sec2 .icn_set li{display: block; float:left; width:25%; height:15vw; text-align: center;}
.sec2 .icn_set li b{display: block; color:#004274; font-size:2.45vw; line-height:1.9vw;}
.sec2 .icn_set li p{color: #004274; font-weight: bold; font-size: 1.26vw; line-height: 1.6vw;}
.sec2 .icn_set li img{width:auto; height:5.8vw; display:block; margin:0 auto; margin-bottom:1.5vw;}
.sec2 .dvdr{position:absolute; display: block; bottom:0px; left:50%; width:75vw; height:1px; background-color:#bfbfbf; -ms-transform: translateX(-50%); -webkit-transform: translateX(-50%); transform: translateX(-50%);}

.sec3{position:relative; top:0px; left:0px; width:100%; height:80vw; overflow:hidden;}
.sec3 ul li, .sec3 .img1 div{position:absolute;}
.sec3 .hdr1{top:11.4vw; left:22vw; width:auto;}
.sec3 .hdr1 h1{font-size: 2.1vw; line-height: 2.4vw;}
.sec3 .hdr1 p{width:25.7vw; margin:0 auto; display: block;}
.sec3 .img1{top: 7.9vw; right: 20.44vw; width: 24.4vw;}
.sec3 .img1 div{top:0vw; right:-11vw; width:auto; text-align: left;}
.sec3 .img1 div p{font-weight:bold; font-size: 1.05vw; line-height:1.2vw; color:#004274;}
.sec3 .img1 div img{width:6.6vw; display:block; margin-bottom: 0.8vw;}

.sec3 .img2{top: 28.2vw; left: 25.8vw; width: 27.4vw;}
.sec3 .img2 div{position:absolute; top:0vw; left:-8.6vw; width:auto; text-align: right;}
.sec3 .img2 div strong{text-align: right; font-size: 2.5vw; line-height: 2.3vw; display: block; margin-bottom: 0.6vw; color:#004274;}
.sec3 .img2 div p{font-weight:bold; font-size: 1.05vw; line-height:1.2vw; color:#004274; text-align: right; margin-bottom:1.8vw;}
.sec3 .img2 div img{width:7vw; display:block; margin-bottom: 0.8vw;}

.sec3 .img3{top: 39.7vw; right: 24vw; width: 20.8vw;}
.sec3 .img3 div{position: absolute; top: 0.6vw; right: -7.7vw; width: auto; text-align: left;}
.sec3 .img3 div strong{font-size: 2.5vw; display: inline-block; text-align: left; color: #004274; line-height: 2.8vw;}
.sec3 .img3 div p{display: inline-block; text-align: left; font-weight:bold; font-size: 1.05vw; line-height:1.3vw; color:#004274;}
.sec3 .img3 div img{width:5.45vw; height:auto; display:block; margin-top:1vw;}

.sec3 .img4{top: 55vw; right: 24vw; width: 20.8vw;}

.sec3 .img4 .l_lvs{position: absolute; bottom: -3.7vw; left: -4.6vw; width: 7.6vw;}
.sec3 .img4 p{position: absolute; bottom: 2.1vw; right: -9.3vw; font-size: 1.05vw; line-height: 1.2vw; text-align: left; color:#004274;}

.sec3 .elm1{position: absolute; top: 22.4vw; left: 0vw; width: 2.6vw; height:auto;}
.sec3 .elm2{position: absolute; bottom: 21vw; right: 0vw; width: 15vw; height: auto;}



/*xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx MOBILE*/

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

.mob_sec{display: none!important; position:relative;}
.mob_sec .m_elm1{position: absolute; top: 5vw; right: -4vw; width: 42vw;}
.mob_sec .m_elm2{position: absolute; top: 212vw; left: 0vw; width: 32vw; z-index:0;}

.mobile .mob_sec{display: block!important;}
.mobile .mob_sec h1{font-size: 4.95vw; color:#004274; text-align: center; width:100%; margin-bottom:3.2vw;}
.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 section{display: none!important;}
.mobile .f_kv{height:134.2vw;}
.mobile .f_kv{display: block!important;}

.mobile .mob_sec .h1_1{padding-top: 25.6vw; padding-bottom:2.8vw; z-index:2;}
.mobile .mob_sec .h1_1 span{white-space: nowrap;}
.mobile .mob_sec .h1_1 span br{display: none!important;}
.mobile .mob_sec .frame_1{position:relative;}
.mobile .mob_sec  .frmborder{position: absolute; top: 3.8vw; left: 50%; width: 77%; height: 77.1%; border: 3.7vw solid #669835; -ms-transform: translateX(-50%); -webkit-transform: translateX(-50%); transform: translateX(-50%);}
.mobile .mob_sec .frame_1 .h1_2{position:absolute; top:44.7vw; left:0vw; width:100%; text-align: center;}
.mobile .mob_sec .frame_1 .h1_2 p{width: 58vw;}
.mobile .mob_sec .frame_1 .mob_frame{position:relative;}

.mob_sec .img1_1 h1{margin-top: 8.6vw; margin-bottom:4.1vw;}
.mob_sec .img1_1 .icn_set{width:84vw;  margin:0 auto;}
.mob_sec .img1_1 .icn_set li{float:left; width:50%; text-align: center; height: 34.3vw; margin-top:4vw}
.mob_sec .img1_1 .icn_set li b{font-size: 6vw; height: 4.7vw; line-height: 5vw; display: block; color:#004274; margin-bottom:2vw;}
.mob_sec .img1_1 .icn_set li p{text-align: center; width: 36.5vw; font-weight:bold; margin:0 auto;  color:#004274;}
.mob_sec .img1_1 .icn_set li p br{display: none!important; display: inline-block;}
.mob_sec .img1_1 .icn_set li img{width:33%; margin:0 auto; display: block; margin-bottom: 2.4vw;}
.mob_sec .img1_1 i.dvdr{display: block; width:100%; height:1px; background-color:#bfbfbf; margin-top: 6.6vw; clear: both;}

.mob_sec .h1_3{padding-top: 17.7vw; padding-bottom: 18.2vw;}
.mob_sec .h1_3 p{width: 79.5vw; margin:0 auto;}


.mob_sec .h1_3 p{width: 79.5vw;}

.mob_sec .h1_3 .minf{position:relative;}
.mob_sec .h1_3 .minf p{width:auto; font-weight:bold; color:#004274;}
.mob_sec .h1_3 .minf img{display: inline-block;}
.mob_sec .h1_3 .minf .m_info{position: absolute; width: auto;}

.mob_sec .h1_3 .h1_3_1{text-align: right;}
.mob_sec .h1_3 .h1_3_1 img{width: 66.7vw; padding-top: 7.8vw;}
.mob_sec .h1_3 .h1_3_1 .m_info{top: 8.7vw; right: 70.9vw;}
.mob_sec .h1_3 .h1_3_1 .m_info img{width: 14.5vw; height: auto; padding-top: 2.6vw;}
.mob_sec .h1_3 .h1_3_1 .m_info strong{font-size: 5.9vw; line-height: 5.4vw; display: block; margin-bottom: 0.8vw; color:#004274;}

.mob_sec .h1_3 .h1_3_2{text-align: left;}
.mob_sec .h1_3 .h1_3_2 img{width: 42.7vw; padding-top: 4.6vw; margin-left: 7.3vw;}
.mob_sec .h1_3 .h1_3_2 .m_info{top: 4.7vw; left: 54.6vw; text-align: left;}
.mob_sec .h1_3 .h1_3_2 .m_info p{text-align: left;}
.mob_sec .h1_3 .h1_3_2 .m_info img{width: 15.8vw; height: auto; display: inline-block; margin-left: 0vw; padding-top:0vw; margin-bottom: 2.1vw;}
.mob_sec .h1_3 .h1_3_2 .m_info strong{font-size: 5.9vw; line-height: 5.4vw; display: block; margin-bottom: 0.8vw;}
.mob_sec .h1_3 .h1_3_2 .mob_elm1{position:absolute; bottom:-2.4vw; right:0vw; width:36vw;}

.mob_sec .h1_3 .h1_3_3{text-align: right;}
.mob_sec .h1_3 .h1_3_3 img{width: 42.7vw; padding-top: 4.6vw; margin-right: 7.3vw;}
.mob_sec .h1_3 .h1_3_3 .m_info{top: 9.4vw; right: 54.4vw; text-align: right;}
.mob_sec .h1_3 .h1_3_3 .m_info p{text-align: right;}
.mob_sec .h1_3 .h1_3_3 .m_info img{width: 12.5vw; height: auto; display: inline-block; margin-left: 0vw; margin-right:0vw; padding-top:0vw; margin-bottom: 2.1vw; margin-top:3.7vw;}
.mob_sec .h1_3 .h1_3_3 .m_info strong{font-size: 7.4vw; line-height: 5.4vw; display: block; margin-bottom: 0.8vw; color:#004274;}
.mob_sec .h1_3 .h1_3_3 .m_info .strng2{margin-top:2.3vw;}
.mob_sec .h1_3 .h1_3_3 .m_info br{display: none!important; display: inline-block;}

.mob_sec .h1_3 .h1_3_4{text-align: right; padding:4.4vw 7.3vw 0vw 7.3vw; line-height: 4vw;}
.mob_sec .h1_3 .h1_3_4 img{width: 100%;}
.mob_sec .h1_3 .h1_3_4 .m_info{top: 48vw; left: 40.1vw; text-align: left; font-size: 3vw; width:41vw; line-height:3vw; color:#004274;}
.mob_sec .h1_3 .h1_3_4 .m_info p{text-align: left; color:#004274;}
.mob_sec .h1_3 .h1_3_4 .m_info strong{font-size: 7.4vw; line-height: 5.4vw; display: block; margin-bottom: 0vw; font-size: 3vw;}
.mob_sec .h1_3 .h1_3_4 .m_info br{display: none!important; display: inline-block;}

/* Mediaqueries */

@media (max-width:1366px){

   section p{line-height: 1.25vw; font-size: 1vw;}
   .sec1 .hdr_1{top: 8vw;}

}

@media (max-width:1024px){


}

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