@import url(default.css);
@font-face {
    font-family: 'Binggrae';
    font-style: normal;
    font-weight: 400;
    src: url(font/Binggrae.eot);
    src: url(font/Binggrae.eot?#iefix) format('embedded-opentype'), url(font/Binggrae.woff) format('woff'), url(font/Binggrae.ttf) format('truetype');
}

@font-face {
    font-family: 'Binggrae-Bold';
    font-style: normal;
    font-weight: 700;
    src: url(font/Binggrae-Bold.eot);
    src: url(font/Binggrae-Bold.eot?#iefix) format('embedded-opentype'), url(font/Binggrae-Bold.woff) format('woff'), url(font/Binggrae-Bold.ttf) format('truetype');
}


body{font-family: 'Binggrae'; font-size:20px;}
h1,h2,h3,h4,h5,h6,strong{font-family: 'Binggrae-Bold';}
.tit{font-family: 'Binggrae-Bold';}

.layout{min-width:1200px; overflow:hidden; width:100%;}
.wrap{width:1200px; margin:0 auto;}

header{animation-name:55animate_ex1; animation-duration:3s; animation-iteration-count:infinite; animation-timing-function:linear; }

@keyframes animate_ex1{
	0% {transform:translate(0, 0);}
	20% {transform:translate(800px, 0) rotate(0deg) scale3d(0.5, 0.5, 0.5);opacity:0;}
	40% {transform:translate(800px, 800px) rotate(90deg)  scale3d(1, 1, 1);}
	60% {transform:translate(0, 800px) rotate(180deg)scale3d(0.5, 0.5, 0.5);}
	80% {transform:translate(0, 0); }
	100% {transform:translate(0, 0);}}
	
	

.skip{display:none;}
header{position:absolute; right:50%; top:25px; margin-right:600px;}
.visual{height:1220px; background:url(../images/visual_bg.png) center center no-repeat; background-size:cover; overflow:hidden;}
/*
	visual영역은 사이즈가 변경됨
	.visual position을 줘서 정렬의 기준으로 하고 그 안의 요소를 position:absolute;로 하고 top:50%;
	bottom:50%; 으로 가운데 정렬해서 좌우 margin으로 여백설정 [가운데 정렬일경우]

*/
.visual .txt_tit{margin:340px 0 0 0; position:absolute; bottom:50%;}
.visual .txt{margin:-240px 0 0 0; position:absolute; top:51%;}
/*애니메이션  제이쿼리가 .visual한테 on클래스줌*/
.visual .txt_tit{transform: translate(-50px, 0px); opacity:0; transition:0.7s;transition-delay:0.4s;}
.visual .txt{transform: translate(0px, 70px); opacity:0; transition:0.7s; }

.visual.on .txt_tit{transform: translate(0px, 0px); opacity:1;} 
.visual.on .txt{transform: translate(0px, 0px);opacity:1;}



.story{height:879px; background:url(../images/story_bg.png) center center no-repeat; margin-top:-340px;}
.story .power{margin-top:100px;}
.story .bana_txt{ position:relative; left:180px; bottom:520px;}
.story .bana_ico{ position:relative; left:280px; bottom:650px;}

.story .bana_txt{transform: translate(0px, -50px); opacity:0; transition:0.7s;transition-delay:0.5s;transition-timing-function:cubic-bezier(0,.31,.24,.82);}
.story .bana_ico{transform: translate(0px, -30px); opacity:0; transition:0.7s;}

.story.on .bana_txt{transform: translate(0px, 0px); opacity:1; transition:0.7s;transition-delay:0.5s;}
.story.on .bana_ico{transform: translate(0px, 0px); opacity:1; transition:0.7s;}


.cafe{}
.cafe .info{margin:95px 0 20px 0;}
.cafe .cafe_bg{margin:0;}
.cafe>.wrap>.cafe_bg{width:auto; margin-left:-400px;}
.cafe .back{margin:20px 0 95px 0;}

.sns{height:810px; background:url(../images/sns_bg.jpg) center center no-repeat; background-size:cover;}
.sns img{margin-top:80px;}
.sns_list{width:800px; float:right; margin-top:200px;}
.sns_list img{margin-top:0px;}
.sns_list ul li{width:796; float:left; margin-right:6px; }
.sns_list ul li:nth-child(4){margin-right:0px;}
.sns_list ul li:nth-child(6){margin-right:0px;}


footer{height:100px; background:url(../images/footer.png) center center no-repeat;}