@charset "utf-8";
.wrap{transition: 0.2s all}
.wrap.on{display: block; width: 100%; height: 100%; position: fixed; top: 0; left:0; background: rgba(0,0,0,0.8); z-index:100;}
header{position: fixed; z-index: 9999; text-align: center; width: 100%; background: #fff;box-shadow:3px 3px 3px rgba(0,0,0,0.12);}
header h1{position: absolute; display: inline-block; width:180px; left: 50%; margin-left: -90px; top: 25px; vertical-align: middle; z-index: 9999;}
header h1 a p{width: 180px; height: 110px; background: url(../img/yena-logo2.png) 0 0 no-repeat; text-indent: -9999em;}
header .over{position: absolute; left: 50%; margin-left: -110px; top: 0; z-index: 9990; }
header .circle{display: block; width: 225px; height: 150px; border-radius: 50%; background: #fff; box-shadow: 0px 3px 3px rgba(0,0,0,0.12); position: relative; top: 15px;}
header .square{display: block; width: 235px; height: 102px; background: #fff; position: absolute; top: 0; left: -5px; z-index: 8000;}
header ul{display: inline-block; vertical-align: middle; width: 100%; max-width: 1250px; background: #fff; padding: 20px; box-sizing:border-box;  text-align: center;}
header ul li{display:block; margin: 20px 0; width: 20%; float: left;}
header ul li a{font-size: 1rem; color: #555; border-bottom: 1px solid transparent; transition:0.2s all; transform: scale(1);}
header ul li.active a,header ul li a:hover{color: #ed7f33; border-bottom: 1px solid #ed7f33;}
header h1 a p.logo:hover,
header h1.active a p.logo{
	position: relative; 
	-webkit-animation-name: abc;
	animation-name: abc;
	-webkit-animation-duration:0.5s;
	animation-duration:0.5s;
	-webkit-animation-direction: alternate;
	animation-direction: alternate;
}
header .icon img{position: fixed; top: 118px; right: 0px; transform:scale(0.8); transition:0.2s;}
header .icon img:hover{
	transform:scale(0.85);
}
header .icon.active img{
	position: fixed; 
	bottom: auto;
	top: 220px;
	right: 100px; 
	transform:scale(1);
	-webkit-animation-name: abc;
	animation-name: abc;
	-webkit-animation-duration:2s;
	animation-duration:2s;
	-webkit-animation-direction: alternate;
	animation-direction: alternate;
}

@-webkit-keyframes abc{
	0%{transform:rotate(10deg);} 
	25%{transform:rotate(-10deg);} 
	50%{transform:rotate(5deg);} 
	75%{transform:rotate(-5deg);}
	100%{transform:rotate(0deg);}
}
@keyframes abc{
	0%{transform:rotate(10deg);} 
	25%{transform:rotate(-10deg);} 
	50%{transform:rotate(5deg);} 
	75%{transform:rotate(-5deg);}
	100%{transform:rotate(0deg);}
}
/* 섹션내 공통 */
section .w100{margin-top: 180px; padding: 0 20px; box-sizing:border-box; text-align: center;}
/* 인트로 섹션 */
.intro{background: url(../img/intro-bg.png) 50% 100% repeat-x;}
.intro .w100{display: table;}
.intro h2{display: table-cell; vertical-align: middle; position: relative;}
.intro h2 img{
	width:100%; vertical-align: middle; max-width: 620px; display: block; margin: 0 auto;
	position: relative;
	-webkit-animation-name: def;
	animation-name: def;
	-webkit-animation-duration:2s;
	animation-duration:2s;
	-webkit-animation-direction: ;
	animation-direction: infinite;
}
.intro h2 span{display: block; width:178px; height: 120px; padding-top:33px; background: url(../img/intro-span-bg.png) 0 0 no-repeat; position: absolute; top:auto; margin-top: -20px; left: 50%; margin-left: -80px; text-align: center; font-size: 1rem; color: #6d5536; font-weight: normal;}
.intro h2 span em{font-weight: bold; font-weight: bold; color: #6d5536; font-size: 1.2rem; line-height: 1.5em;}
.intro h1{display:table-cell; vertical-align:middle; width: 40%; text-align: center; padding: 50px; box-sizing:border-box;}
.intro h1 span{display: block; font-size: 1.3rem; color: #bb7b29; font-weight: normal; padding:20px 0 40px; word-break:keep-all; line-height: 1.3em;}
.intro h1 img{display: block; width: 100%;}

@-webkit-keyframes def{
	0%{transform:scale(0.9);} 
	100%{transform:scale(1);}
}
@keyframes def{
	0%{transform:scale(0.9);} 
	100%{transform:scale(1);}
}
/* 자료실버튼들 */
.download{display: block; position: fixed; top: 120px; right: 20px;}
.download li{display: block; width: 75px; height: 75px; line-height: 75px; background: #fff; color: #885c00; border-radius: 50%; text-align: center; box-shadow: 0px 0px 10px rgba(0,0,0,0.1); font-size: 18px; position: absolute; top: 0; right: 0; cursor: pointer; transition: 0.2s all;}
.download li a{color: #885c00; font-size: 18px;}
.download li.li1.on{top: 85px; z-index: 8;}
.download li.li2.on{top: 170px; z-index: 9;}
.download li.li3.on{top: 255px; z-index: 10;}
.download li.main{background: #ed7f33; color: #fff; z-index:11; width: 77px; height: 77px; line-height: 77px; bottom: -1px; right:-1px;}

/* h2 스타일 공통 */
.brush{display:inline-block; width:100%; max-width: 325px; margin: 0 auto; height: 85px; background: url(../img/h2-bg.png) 50% 0 no-repeat; text-indent: -9999em;}

/* 양육목표 섹션 */
.goal{position: relative; background: url(../img/goal-bg.png) 50% 100% repeat-x;}
.goal .w100{text-align: center;}
.goal .title-wrap{position: relative; z-index: 8900;}
.goal .title p{font-size: 1rem; color: #3e3e3e; padding-top: 70px;}
.goal .title>span{display:inline-block;  margin-top: 30px; background: rgba(200,239,230,0.8); padding: 20px; border-radius: 30px; box-sizing:border-box;}
.goal .title>span>span{font-size: 1.8rem; color: #01a368; border-bottom: 1px solid #01a368; line-height: 1.8em;}
.goal .title em{display: block; color: #2c2c2c; font-size: 1rem; width:100%; max-width: 480px;  word-break:keep-all; margin: 50px auto 130px; line-height: 1.5em; background: rgba(200,239,230,0.8); padding: 20px; border-radius: 30px; box-sizing:border-box;}
.goal .title em strong{font-size: 1rem; font-weight: normal; color: #000;}
.goal .tree{position: absolute; bottom:10px; left: 50px; z-index: 8000;}
.goal .jesus{position: absolute; bottom:10px; right: 100px; z-index: 8000;}


/* 핵심가치 WITH 섹션 */
.with .brush{background-position: 50% -85px;}
.with .w-title h2 span{vertical-align: bottom;}
.with .w-title h2 span.color-with{display: inline-block; margin-left: 20px;}
.with .w-title h2 span.color-with em{display:inline-block; color: #3f3a39; font-size: 2.5rem; font-family: 'Varela Round', sans-serif;}
.with .w-title h2 span.color-with em:nth-child(2){color:#8ec447;}
.with .w-title h2 span.color-with em:nth-child(3){color:#e0b41f;}
.with .w-title h2 span.color-with em:nth-child(4){color:#0091b2;}
.with .w-title .area{padding: 80px 20px;}
.with .w-title .title{display:inline-block; width:100%; max-width:450px; font-size: 1rem; line-height: 1.8em; }
.with .w-title .quotes{display: inline-block; width: 27px; height: 22px; background: url(../img/with-img.png) 0 0 no-repeat; vertical-align: top; margin: 10px;}
.with .w-title .quotes:last-of-type{background-position: -27px 0;}

.with .w-content{margin: 50px 0 100px;}
.with .w-content h2{width: 100%; text-align: left; font-size: 1.2rem; font-weight: normal; color: #3c3c3c;}
.with .w-content h2 .cuteimg{display:inline-block; width: 104px; height: 78px; background: url(../img/with-img.png) 0 -21px no-repeat; vertical-align: middle; margin: 15px;}
.with .w-content dl.box{width: 49%; background: #fff; float: left; padding: 30px; box-sizing:border-box; margin-bottom: 1%;}
.with .w-content dl.box:nth-of-type(even){margin-left: 1%;}
.with .w-content dl.box>dt{width: 100%; border-bottom:  1px solid #bfbab9; position: relative; margin-bottom: 30px;}
.with .w-content dl.box>dt span{display:block; font-family: 'Varela Round', sans-serif; font-size: 1.8rem; color:#636365; margin-bottom: -10px; float: left; text-shadow:1px 1px 0 #636365;}

.with .w-content dl.box>dt em{display:block; position: absolute; bottom:0; right:0; font-size: 2.5rem; font-weight: bold; line-height: 30px; color: #bfbab9;}
.with .w-content dl.box:nth-of-type(2)>dt{border-bottom: 1px solid #d6e8b9}
.with .w-content dl.box:nth-of-type(2)>dt span{color: #8ec447; text-shadow:1px 1px 0 #8ec447;}
.with .w-content dl.box:nth-of-type(2)>dt em{color: #d6e8b9;}
.with .w-content dl.box:nth-of-type(3)>dt{border-bottom: 1px solid #b7d0df}
.with .w-content dl.box:nth-of-type(3)>dt span{color: #0392b3; text-shadow:1px 1px 0 #0392b3;}
.with .w-content dl.box:nth-of-type(3)>dt em{color: #b7d0df;}
.with .w-content dl.box:nth-of-type(4)>dt{border-bottom: 1px solid #f3e0ac}
.with .w-content dl.box:nth-of-type(4)>dt span{color: #e1b51f; text-shadow:1px 1px 0 #e1b51f;}
.with .w-content dl.box:nth-of-type(4)>dt em{color: #f3e0ac;}

.with .w-content dl.box dl{text-align: left; padding-bottom: 15px;}
.with .w-content dl.box dl dt{font-size: 0.9em; line-height: 1.65em; padding-bottom: 10px;}
.with .w-content dl.box dl dd{font-size: 0.8em; line-height: 1.65em; padding: 0 20px; color: #555555;}
.with .w-content dl.box dl dd strong{font-size: 1em; font-weight: normal; color: #000;}

.song{background: url(../img/song-bg.png) 50% 100% repeat-x;}
.song .w100{padding-bottom: 200px;}
.song .brush{background-position: 50% -170px}
.song .title{text-align: center; padding: 90px 0 50px; position: relative; width:100%; max-width: 380px; margin: 0 auto;}
.song .title span{position: absolute; right: -174px; top: -9px; color: #ef5923; display: block; background: #fef1dc; padding: 35px 20px; border-radius: 50%; font-size: 0.8rem; line-height: 1.6em;}
.song .title span:after{content: "▲"; color: #fef1dc; display: block; position: absolute; left: 0; bottom: 7px; font-size: 2rem; transform:rotate(-10deg);}
.song .qr{width: 100%; max-width: 790px; margin: 0 auto; position: relative; margin-bottom: 20px;}
.song .qr img{position: absolute; left: 0; bottom: 0;}
.song .qr ul{display: inline-block; float: right; text-align: left; }
.song .qr ul li{color: #575757; font-size: 0.75rem; line-height: 1.5em;}
.song .movie{max-width: 790px; width: 100%; margin: 20px auto 40px; border: 20px solid #fff; box-sizing:border-box; border-radius: 25px; background: #fff; box-shadow:0px 0px 15px rgba(0,0,0,0.2);}
.song .movie .inner{width:100%; height:100%; padding-bottom: 56.25%; margin:0 auto; position: relative;}
.song .movie iframe{position: absolute; top:0; left:0; width: 100%; height: 100%; border-radius: 20px; border: 2px dashed #f4d120;}
.song .movie img{width:100%; border:2px dashed #f4d120; border-radius: 20px; margin-top: 20px;}

.doit .brush{background-position: 50% -255px; margin-bottom: 2%;}
.doit .no1 dl{width: 25%; float: left; padding: 100px 0;}
.doit .no1 dl dt{font-size: 1.5rem; color: #069a61; margin-bottom: 20px}
.doit .no1 dl dd{font-size: 1rem; color: #4e4e4e; margin-bottom: 20px; line-height: 1.4em; position: relative;}
.doit .no1 dl dd span{font-size: 1rem; color: #ed7f33; text-decoration: underline;}
.doit .doit-icon span{display:block; width: 190px; height: 190px;margin: 0 auto; background: url(../img/doit-icon.png) 0 0 no-repeat;}
.doit .doit-icon.no2 span{background-position: 0 -190px;}
.doit .doit-icon.no3 span{background-position: 0 -380px;}
.doit .doit-icon.no4 span{background-position: 0 -570px;}
.doit .no1 dl dd.doit-icon:after{content: ""; display: block; background: url(../img/doit-icon.png) 0 -760px; width: 30px; height: 40px; position: absolute; right: -15px; top: 50%; margin-top: -20px;}
.doit .no1 dl dd.doit-icon.no4:after{display: none;}
.doit h3{text-align: center; display: table; width: 60%; margin: 0 auto;}
.doit h3>strong{display:table-cell; color: #069a61; font-size: 1.8rem; font-weight: normal; vertical-align: middle; padding-right: 20px;}
.doit h3 em{display:table-cell; font-size: 1.5rem; color: #4e4e4e; font-weight: normal; vertical-align: middle; line-height: 1.4em;}
.doit h3 em>strong{color: #ed7f33; font-size: 1em; text-decoration: underline; font-weight: normal; vertical-align: baseline;}
.doit h3.doit-icon span{display: table-cell; vertical-align: middle; margin-left: 40px;}

.doit .paper{text-align: center; background: #f9ffd7;}
.doit .paper a img{height: 400px;margin:5% 0; width: auto; display: inline-block; border:3px solid #129f67;}

.doit .fp-controlArrow{background: url(../img/doit-arrow.png) 0 0 no-repeat; width: 60px; height: 60px;}
.doit .fp-controlArrow.fp-prev{background-position: 0 0; border: 0;}
.doit .fp-controlArrow.fp-next{background-position: 0 -60px; border: 0;}
#fp-nav ul li a span, .fp-slidesNav ul li a span{background: #c7d385;}


footer .sample{width: 100%; background: url(../img/footer-bg.jpg) 0 0 repeat-x; background-color: #fff;}
footer .sample .title{width: 100%;  background: #f3ede6; text-align: center;}
footer .sample .title span.wide{display: block; padding:220px 0 350px; color: #966a33; font-size: 1.2rem; line-height: 1.6em; background: url(../img/sample-bg.jpg) repeat-x 0 100%; position: relative;}
footer .sample .title span em{font-size: 1.2rem; font-weight: normal; color: #ed8725;}
footer .sample .title span a{font-size: 1.2rem; font-weight: normal; color: #e13b0f; text-decoration: underline; position: relative; z-index: 3;}
footer .sample .title span span{display: block; font-size: 14px; color: #999; margin-top: 5px; line-height: 1.5em;}
footer .sample .title span .img{position: absolute; bottom: 10px; left: 50%; margin-left: -484.5px; z-index: 1;}

footer .go-subscribe{width: 100%; padding: 20px 0; text-align: center; background: #66bad8;}

footer .foot-wrap{padding: 45px 0;}

footer .foot-wrap .left ul{padding-top: 40px}
footer .foot-wrap .left ul li{line-height: 1.8em; color: #d0d0d0; font-size: 0.65rem; font-weight: normal;}
footer .foot-wrap .right dl{padding: 0 20px; line-height: 1.4em;}
footer .foot-wrap .right dl dt{font-size: 0.65rem; color: #ececec; font-weight: normal;}
footer .foot-wrap .right dl dd a{font-size: 0.65rem; color: #d0d0d0; font-weight: normal;}
footer .foot-wrap .right dl dd a:hover{border-bottom: 1px solid #d0d0d0;}
footer .fp-tableCell{vertical-align: top; background: #7c7c7c;}


/*header .icon img{position: fixed; top: 302px; right: 50px;}*/







/* 미디어쿼리 */
@media screen and (max-width: 1023px){
	header ul{padding: 0; width: 90%}
	header ul li{width: 18%}
	header ul li.empty{width: 28%}
	header ul li a{}
	header .over{display: none;}
	header h1{width: 180px; margin-left: -75px; top: 13px;}
	header h1 a p{background: url(../img/yena-logo.png) 50% 50% no-repeat; width: 150px; height: 30px; background-size: 100%;}

	header .icon img{top: 50px; right: -14px; transform: scale(0.7);}
	header .icon.active img{top: 110px; right: 53px;}

	.download{top: 80px}

	section .w100{margin-top: 80px;}	

	.intro .w100{margin-top: 120px;}
	.intro h2{float: none; width: 60%; position: relative; margin: 0 auto;}
	.intro h1{float: none; width: 60%; position: relative; margin: 0 auto; padding: 110px 30px 200px;}

	.goal .jesus{right: 20px;}
	.goal .tree{left: -50px;}

	section.doit .w100{width: 80%}
	.doit .doit-icon span{width: 100px; height: 100px; background-size: 100px; background-position: 50% 0;}
	.doit .doit-icon.no2 span{background-position: 50% -100px;}
	.doit .doit-icon.no3 span{background-position: 50% -200px;}
	.doit .doit-icon.no4 span{background-position: 50% -300px;}
	.doit .no1 dl dd.doit-icon:after{width: 28px; height: 30px; background-position: 0 -480px; right:-15px; margin-top: -15px; z-index: 10; background-size: 120px;}
	.doit .paper a img{width: 100%; height: auto; box-sizing:border-box; display: block;}
	.doit h3.doit-icon span{margin:5% 20px; margin-right: 0; margin-bottom: 0;}
	.doit h3{display: table; width: 100%;}
	.doit h3>strong{display: table-cell; white-space: nowrap; width: auto; text-align: center;}
	.doit h3>em{display: table-cell; text-align: center; word-break:keep-all;}
	.doit h3>span{display: table-cell; text-align: center;}

	footer .foot-wrap{padding: 50px 20px;}


}



@media screen and (max-width: 768px){
	.intro{background-size: 1600px; background-position: 46% 100%;}
	.intro h2{display:block; float: none; width: 100%; position: relative; margin: 0 auto;}
	.intro h1{display:block; float: none; width: 100%; position: relative; margin: 0 auto; padding: 20px 50px 0px;}
	.intro h1 img{width: 70%; display: block; margin: 0 auto;}
	.intro h1 span{padding: 20px 0;}
	.intro h2 img{width: 90%;}
	.intro h2 span{padding-top: 40px}
	header .icon img{display: none;}
	header .icon.active img{display: block; /*margin-right:32px;*/ width: 150px; top: 53px;}
	header h1{width: 100%; background: rgba(255,255,255,1); margin: 0; padding: 11px 0; left: 0;top:0; text-align: center; box-shadow: 1px 1px 5px rgba(0,0,0,0.12)}
	header h1 a{display: inline-block;}
	header ul{position: absolute; right: 10px; background: transparent; width: auto; display: none;}
	header ul li{display:block!important; float: none; width: auto;}
	header ul li a{text-indent: -9999em; display: block; width:15px; height: 15px; background: #ed7f33; border-radius: 50%; margin: 0 auto; box-shadow: 1px 1px 5px #fff;}
	header ul li.active a,header ul li a:hover{background: transparent; border: 3px solid #ed7f33;}
	/*header .icon.active img{top: 64px; right: 50%; margin-right: -136.5px;}*/

	.download{top: auto; bottom: 20px;}
	.download li{top: auto; bottom: 0;}
	.download li.li1.on{top: auto; bottom: 85px;}
	.download li.li2.on{top: auto; bottom: 170px;}
	.download li.li3.on{top: auto; bottom: 255px;}


	.brush{width: 200px; height: 52.3px; max-width: none; background-size: 200px;}
	.goal .brush{background-position: 0px 0px;}
	.with .brush{background-position: 0px -52.3px;}
	.song .brush{background-position: 0px -104.6px;}
	.doit .brush{background-position: 0px -156.9px;}

	.goal .title em{margin-bottom: 280px;}
	.goal .tree{left: -210px;}

	.with .w-title .title{max-width: 323px;}
	.with .w-title img{width: 100%; max-width: 385px;}
	.with .w-title .area{padding: 35px 20px;}
	.with .w-title h2 span.color-with{margin-left: 5px;}
	.with .w-content dl.box{width: 100%; height: auto!important; margin-bottom: 20px}
	.with .w-content dl.box:nth-of-type(even){margin-left: 0;}
	.with .w-content dl.box dl{font-size: 18px}
	.with .w-content dl.box>dt span{margin-bottom: -8px; width: 150px; text-align: left;}
	.with .w-content dl.box>dt em{line-height: 23px;}
	.with .w-content h2{line-height: 1.4em; padding-bottom: 20px;}
	.with .w-content h2 .cuteimg{display: none;}

	.song{background-size: 525px;}
	.song .w100{padding-bottom: 50px;}
	.song .title{padding: 30px 0 80px;}
	.song .title span{display: none;}
	.song .title img{width: 85%; max-width: 380px;}

	.doit .no1 dl{width: 50%; padding: 30px 0;}
	.doit .no1 dl dd.doit-icon.no2:after{top: auto; right: auto; bottom: -122px; left: 50%; transform:rotate(90deg); margin-left: -15px;}
	.doit .no1 dl:nth-of-type(3){float: right;}
	.doit .no1 dl dd.doit-icon.no3:after{left: -15px; transform:rotate(180deg);}
	.doit .no1 dl:nth-of-type(4){float: left;}

	.doit .fp-controlArrow.fp-next{right: 70px; background-position: 0 -30px;}
	.doit .fp-controlArrow.fp-prev{left: 70px;}
	.doit .fp-controlArrow{width: 30px; height: 30px; background-size: 30px;}

}

@media screen and (max-width: 480px){
	.intro .w100{margin-top: 30px;}
	.intro h2 span{width: 120px; height: 80px; background-size: 120px; margin-left: -60px; padding-top: 20px;}
	.intro h1 span{font-size: 18px;}
	
	.goal .title em{margin-bottom: 200px; margin-top: 10px;}
	.goal .title>span>span{font-size: 28px;}
	.goal .tree{left: -100px; bottom: 90px;}
	.goal .tree img{width: 250px; }
	.goal .jesus{bottom: 30px;}
	.goal .jesus img{width: 150px;}


	.with .w-title img{width: 80%;}
	.with .w-title .area{padding: 35px 45px;}
	.with .w-title h2 span.color-with{display: inline-block;}
	.with .w-title h2 span.color-with em{font-size: 32px;}
	.with .w-content h2{font-size: 18px;}


	section.doit .w100{width: 100%;}
	.doit .w100 h2+div{padding: 30px 0;}
	.doit .fp-controlArrow.fp-prev{left: 20px; top:50%;}
	.doit .fp-controlArrow.fp-next{right: 20px; top:50%;}
	.doit .no1 dl{padding: 15px 0; width: 100%;}
	.doit .no1 dl dt{margin-bottom: 10px; font-size: 22px;}
	.doit .no1 dl dd{margin-bottom: 10px; font-size: 16px;}
	.doit .no1 dl dd.doit-icon.no1:after,
	.doit .no1 dl dd.doit-icon.no2:after,
	.doit .no1 dl dd.doit-icon.no3:after,
	.doit .no1 dl dd.doit-icon.no4:after{top: auto; right: auto; bottom: -90px; left: 50%; transform: rotate(90deg); margin-left: -15px;}
	.doit .fp-slidesNav.bottom{display: none;}

	.doit h3.doit-icon span{display: none;}
	.doit h3>strong{font-size: 1.5rem; padding-right: 0;}
	.doit h3 em{font-size: 1rem; padding: 0 20px; line-height: 1.4em;}
	.doit h3 em>strong{font-size: 1em;}

	.song .title{padding-bottom: 30px;}
	.song .title img{width: 60%;}
	.song .qr{text-align: center;}
	.song .qr ul{float: none; text-align: center; }
	.song .qr ul li{font-size: 0.9em;}
	.song .qr img{display: none;}
	

	footer .sample .title span .img{width: 100%; position: static; margin: 0; margin-top: -20px;}
	footer .sample .title span.wide{padding: 100px 20px 20px;}
	footer .go-subscribe img{width: 240px}
	footer .foot-wrap .right{float: left;}
	footer .foot-wrap .right dl{line-height: 1.2em;}
	footer .foot-wrap .right .left{ padding-left: 0; padding-top: 30px;}

}