@charset "utf-8";
body {min-width:1200px; font-family:'맑은 고딕','malgun gothic','돋움',dotum,Helvetica,AppleSDGothicNeo,sans-serif; font-size:14px;}

/*********************************section1_intro******************************************/
.section1 {height:1000px; overflow:hidden; margin:0 auto; position:relative;}
.section1 .intro {width:1200px; margin:0 auto;}
.section1 .intro .box {position:absolute; left:50%; top:15px; margin-left:-950px;}
.section1 .intro .logo {position:absolute; left:50%; top:50px; margin-left:-600px; transition-delay:1s;}
.section1 .intro .cup {position:absolute; left:50%; top:42%; margin-left:-180px;}

@keyframes spin {
	0% {transform:rotate(0deg); opacity:0.3;}
	50% {transform:rotate(90deg); opacity:1;}
	100% {transform:rotate(0deg); opacity:0.3;}
}

.section1 .intro .stain {position:absolute; left:50%; top:19%; margin-left:-260px; animation:spin 15s infinite;}
.section1 .intro .splash {position:absolute; left:50%; top:0; margin-left:-310px; margin-top:129px;}
.section1 .intro .copy {position:absolute; left:50%; top:0; margin-left:-450px; margin-top:550px;}
.section1 .intro .bg {position:absolute; left:50%; top:0; margin-left:400px;}
.section1 .intro .bg2 {position:absolute; left:50%; bottom:-250px; margin-left:400px;}
.section1 .intro p {text-align:center; font-size:17px; color:#d7cac0; margin-top:800px;}

@keyframes scroll {
	0% {opacity:0;}
	50% {opacity:1;}
	100% {opacity:0;}
}
	
.section1 .intro .btn_scroll a {width:43px; position:absolute; left:50%; bottom:50px; margin-left:-20px;}
.section1 .intro .btn_scroll .scroll .wave {animation:scroll 2s infinite; opacity:0; box-sizing: border-box;}
.section1 .intro .btn_scroll .scroll .wave1 {margin-left:5px; animation-delay:0s;} 
.section1 .intro .btn_scroll .scroll .wave2 {animation-delay:0.15s;}
.section1 .intro .btn_scroll .scroll .wave3 {animation-delay:0.3s;}
.section1 .intro .btn_scroll .scroll h1 {display:block; color:#ccc; margin-left:2px; font-weight:bold}
.section1 .intro .btn_scroll a:hover h1 {color:#cc0033;}

/*********************************section2_about*****************************************/
.section2 {height:1000px; margin:0 auto; background:url(../images/s2_bg.jpg) no-repeat center center;}
.section2 .about {width:1200px; height:1000px; margin:0 auto; position:relative;}
.section2 .about .con .tit {position:absolute; right:10px; top:150px;}
.section2 .about .con .circle {position:absolute; left:0; top:230px;}
.section2 .about .con .box {position:absolute; left:50%; top:400px; margin-left:-60px;}
.section2 .about .con h3 {position:absolute; left:50%; top:400px; margin-left:120px; font-size:16px; color:#cac8c8;}
.section2 .about .con p {position:absolute; left:50%; top:400px; margin-left:120px; font-size:14px; color:#cac8c8; line-height:25px; margin-top:35px; padding-left:10px;}
.section2 .about .con .con1 {opacity:0;}
.section2 .about .con .con5 {height:1000px;}
.section2 .about .con .certificate {float:right; margin-right:200px; margin-top:400px;}
.section2 .about .con .certificate ul li h3 {position:static; margin-bottom:10px;}
.section2 .about .con .certificate ul li p {position:static;margin-top:5px; margin-bottom:25px;}

.section2 .about .list {width:600px; height:195px; position:absolute; left:50%; top:750px; float:left;}
.section2 .about .list li {float:left; margin-right:30px;}
.section2 .about .list .list1 {width:95px; height:94px; background:url(../images/circle_s1_off.png) no-repeat; text-indent:-9999px;}
.section2 .about .list .list2 {width:56px; height:56px; background:url(../images/circle_s2_off.png) no-repeat; margin-top:75px; text-indent:-9999px;}
.section2 .about .list .list3 {width:71px; height:70px; background:url(../images/circle_s3_off.png) no-repeat; margin-top:-10px; text-indent:-9999px;}
.section2 .about .list .list4 {width:87px; height:86px; background:url(../images/circle_s4_off.png) no-repeat; margin-top:85px; text-indent:-9999px;}
.section2 .about .list .list5 {width:129px; height:128px; background:url(../images/circle_s5_off.png) no-repeat; margin-top:-40px; text-indent:-9999px;}

.section2 .about .list .list1:hover {background-image:url(../images/circle_s1.png);}
.section2 .about .list .list2:hover {background-image:url(../images/circle_s2.png);}
.section2 .about .list .list3:hover {background-image:url(../images/circle_s3.png);}
.section2 .about .list .list4:hover {background-image:url(../images/circle_s4.png);}
.section2 .about .list .list5:hover {background-image:url(../images/circle_s5.png);}

.section2 .about .list .list1.on {background-image:url(../images/circle_s1.png);}
.section2 .about .list .list2.on {background-image:url(../images/circle_s2.png);}
.section2 .about .list .list3.on {background-image:url(../images/circle_s3.png);}
.section2 .about .list .list4.on {background-image:url(../images/circle_s4.png);}
.section2 .about .list .list5.on {background-image:url(../images/circle_s5.png);}

/*********************************section3_skill******************************************/
.section3 {height:1000px; margin:0 auto; overflow:hidden;}
.section3 .skill_wrap {background:url(../images/s3_bg.png) no-repeat center bottom;}
.section3 .skill {width:1200px; height:1000px; margin:0 auto; position:relative;}
.section3 .skill .tit {position:relative; width:300px; height:989px; background:url(../images/s3_tit_bg.png) no-repeat; margin-left:890px;}
.section3 .skill .tit img {position:absolute; left:-30px; top:130px;}
.section3 .skill .drop .drop_w {position:absolute; left:220px; top:70px;}
.section3 .skill .drop .drop_d {position:absolute; left:568px; top:278px;}
.section3 .skill .drop .drop_h {position:absolute; left:0; top:400px;}
.section3 .skill .drop .drop_s {position:absolute; left:366px; top:600px;}

/*********************************section3_skill2 (click 했을때)******************************************/
.section3 .skill2_wrap {width:100%; height:100%; margin:0 auto; position:relative; display:none;}
.section3 .skill2_wrap .skill2_bg {position:absolute; left:50%; top:-190px; margin-left:-1270px;}

.section3 .skill2 {width:1200px; height:1000px; margin:0 auto; position:relative;}
.section3 .skill2 .tit {position:relative; width:300px; height:989px; background:url(../images/s3_tit_bg.png) no-repeat; margin-left:890px;}
.section3 .skill2 .tit img {position:absolute; left:-30px; top:130px;}

/*section3_skill2_inner*/
.section3 .skill2 .skill2_inner {width:1200px; float:left; margin:-800px auto 0; }

.section3 .skill2 .skill2_inner .box_left {width:400px; height:700px; float:left;}
.section3 .skill2 .skill2_inner .box_left ul li {width:390px; margin-bottom:70px;}
.section3 .skill2 .skill2_inner .box_left ul li a {font-size:18px; color:#333; text-align:center; line-height:90px;}
.section3 .skill2 .skill2_inner .box_left img {margin:0 30px 0 10px;}

.section3 .skill2 .skill2_inner .box_right {float:left; margin-top:10px;}
.section3 .skill2 .skill2_inner .box_right ul li {margin-bottom:93px;}
.section3 .skill2 .skill2_inner .box_right img {margin-right:5px;}

/*********************************section4_works_tit******************************************/
.section4 {width:100%; height:516px; margin:0 auto; overflow:hidden; position:relative;}
.section4 .s4_bg {position:absolute; left:50%; top:0; margin-left:-960px;}
.section4 .s4_txt {width:1200px; height:516px; margin:130px 0 0 0; position:absolute; left:50%; top:50px; opacity:0.5; overflow:hidden;}
.section4 .s4_txt h2 {color:#cd9d6d; font-size:18px; margin:40px 0 15px 120px; font-weight:bold;}
.section4 .s4_txt h3 {color:#cd9d6d; font-size:16px; margin:0 0 0 120px;}

/*********************************section5_work1******************************************/
.section5 {width:100%; height:3000px; margin:0 auto;}

.section5 .work1 {width:1200px; height:920px; margin:0 auto; position:relative;}
.section5 .work1 .work1_bg {position:absolute; right:50%; bottom:0; margin-right:-350px; z-index:-300;}
.section5 .work1 .con {width:1200px; height:920px; margin:0 auto;}
.section5 .work1 .con .tit {margin-top:160px; float:left;}
.section5 .work1 .con .coffeebean {width:420px; height:605px; margin:160px 0 0 30px; float:left; position:relative;}
.section5 .work1 .con .coffeebean .cover {background:url(../images/banner_bg.png); width:406px; height:593px; position:absolute; left:3.5px; top:0; display:none; font-size:25px; color:#fff; text-align:center; line-height:600px;}
.section5 .work1 .con .txt {float:left; margin:80px 0 0 50px;}
.section5 .work1 .con .txt h1 {font-size:40px; margin-bottom:4px;}
.section5 .work1 .con .txt h3 {margin-bottom:35px;}
.section5 .work1 .con .txt ul {width:600px; height:650px; float:left;}
.section5 .work1 .con .txt ul li {float:left; margin-bottom:15px;}
.section5 .work1 .con .txt ul li h2 {float:left; width:100px; font-weight:bold;}
.section5 .work1 .con .txt ul li p {float:left; width:485px; font-size:13px; margin-bottom:5px;}
.section5 .work1 .con .txt ul li p span {line-height:28px;}
.section5 .work1 .con .txt .color {margin-left:100px; padding-top:50px;}
.section5 .work1 .con .txt .color img {margin-right:10px;}

/*********************************section5_work2******************************************/
.section5 .work2 {height:970px; margin:0 auto; position:relative; overflow:hidden;}
.section5 .work2 .work2_bg {position:absolute; right:50%; top:0; margin-right:-960px; z-index:-300;}
.section5 .work2 .work2_bg2 {position:absolute; right:50%; bottom:110px; margin-right:-960px; z-index:-300;}
.section5 .work2 .con {width:1200px; height:970px ;margin:0 auto;}
.section5 .work2 .con .con_inner {width:1200px; height:750px; margin:0 auto; padding-top:225px;}
.section5 .work2 .con .con_inner .box {float:left; width:417px; height:600px; background:url(../images/work2_tit_box.png) no-repeat left top; margin-top:142px;}
.section5 .work2 .con .con_inner .box h2 {font-size:40px; color:#fff; margin-left:75px; padding-top:28px;}
.section5 .work2 .con .con_inner .box h3 {color:#fff; margin:0 0 80px 75px;}
.section5 .work2 .con .con_inner .box p {margin-left:100px; font-size:13px;}

.section5 .work2 .con .con_inner .mockup {float:left; position:relative;}
.section5 .work2 .con .con_inner .mockup .pc {position:absolute; left:90px; top:0;}
.section5 .work2 .con .con_inner .mockup .mobile {position:absolute; left:55px; top:200px;}
.section5 .work2 .con .con_inner .mockup .tablet {position:absolute; left:350px; top:200px;}
.section5 .work2 .con .con_inner .tit {float:right;}

/*********************************section5_work3******************************************/
.section5 .work3 {overflow:hidden; height:915px; margin:0 auto; background:url(../images/work3_bg.png) no-repeat center 120px; position:relative;}
.section5 .work3 .work3_bg {position:absolute; left:50%; top:550px; margin-left:-950px;}
.section5 .work3 .con {width:100%; height:915px; margin:0 auto;}
.section5 .work3 .con .con_inner {width:1200px; height:915px; margin:0 auto;}

.section5 .work3 .con .con_inner .left_box {width:600px; height:915px; float:left; position:relative;}
.section5 .work3 .con .con_inner .left_box .tit {position:absolute; right:70px; top:-30px;}
.section5 .work3 .con .con_inner .left_box ul {float:left; margin-top:190px;}
.section5 .work3 .con .con_inner .left_box ul li {float:left; margin:0 10px 10px 0;}
.section5 .work3 .con .con_inner .left_box ul li.photo2 {margin-right:15px;}
.section5 .work3 .con .con_inner .left_box a {color:#000; display:block; text-align:right; margin-right:10px;}

.section5 .work3 .con .con_inner .right_box {width:516px; height:915px; float:right;}
.section5 .work3 .con .con_inner .right_box h2 {font-size:40px; margin:50px 0 10px 50px;}
.section5 .work3 .con .con_inner .right_box h3 {margin:0 0 30px 50px;}
.section5 .work3 .con .con_inner .right_box p {margin-left:50px;}

/*********************************section6******************************************/
.section6 {width:100%; height:870px; margin:0 auto; background:url(../images/s6_bg.jpg) no-repeat center center;}

/*********************************section7_end******************************************/
@keyframes beansMove {
	100%{top:0}
}
.section7 {height:1300px; margin:0 auto; position:relative; overflow:hidden;}
.section7 .beans_wrap {width:1200px; margin:0 auto;}
.section7 .beans {width:100%; z-index:-1; position:absolute; left:0; top:-500px;}
.section7 .beans.on {animation:beansMove 4s ease-out;}
.section7 .end {width:1200px; height:958px; margin:0 auto; position:relative;}
.section7 .end .pipe {margin:250px 0 100px 250px;}
.section7 .end .txt {position:absolute; right:298px; bottom:260px;}
.section7 .end .logo {margin:30px 0 25px 500px;}
.section7 .end p {color:#766c69; text-align:center;}

/*********************************section8_cookie******************************************/
.section8 {height:1000px; background:#d7cac0; position:relative;}

@keyframes pourMove {
	0% {right:-1300px}
}
.section8 .pour_wrap { width:100%; height:100%; position:absolute; left:0; top:-430px; overflow:hidden; z-index:1000;}
.section8 .pour {width:1500px; position:absolute; right:0; top:0; display:none;}
.section8 .pour.on {animation:pourMove 2s ease-in-out; display:block; }
.section8 .cookie {width:1200px; height:1000px; margin:0 auto;}
.section8 .cookie .tit {margin:100px 0 25px 470px;}
.section8 .cookie h3 {font-size:18px; text-align:center; line-height:25px;}
.section8 .cookie .box {margin:50px 0 0 335px;}
.section8 .cookie p {text-align:center; margin-top:30px;}