@charset "utf-8";
@import url(http://fonts.googleapis.com/css?family=Poiret+One);

/*  Reset CSS  */
* { margin:0;  padding:0;}
ol,ul { list-style: none; }
a { outline:0; text-decoration:none; color:#555; }
img { border:0;}
body { width:100%;  height:4000px; font-family:poiret one; background:#f5f9fe;} 




h1.logo { margin:40px 0px 60px 250px; letter-spacing:4px; color:#999; text-align:left;}

#kkk { text-align:center; width:1450px; margin : 0 auto;}



/*슬로건*/
.txt { position:absolute; right:10px; margin-top:390px;  font-size:40px; color:#fff; text-align:right; line-height:0.5;}

/*레이아웃*/
section { position:relative; top:50%; left:0px; margin-top:-80px; height:700px;  }
article { position:relative; top:50%; width:330px; height:600px; margin:12px; margin-top:-300px; box-sizing:border-box; float:left; border-radius:25px; box-shadow:3px 3px 3px #bbb; overflow:hidden; transition:all 0.7s; cursor:pointer; }

/*포폴 제목*/
article h2 { position:absolute; right:0px; width:330px; height:600px; box-sizing:border-box; padding-left:20px; opacity:0; z-index:2; cursor:pointer; transition:all 0.5s; }


article:hover h2 { opacity:0;}
article h2 a { font-size:14px; font-weight:bold; line-height:3.5; color:#fff; letter-spacing:2px; transition:all 0.5s;}

/*포폴 썸네일*/
article strong { display:block; position:absolute; left:0px; top:0px;  width:100%; height:600px; opacity:1; overflow:hidden; text-align:center; transition:all 0.5s; }
article:hover strong { opacity:1; }
article strong img {height:600px; width:auto;}


/*포폴 이미지*/
article p { position:absolute; top:50%; right:0%; z-index:1; margin-top:0px; width:100%; height:0px; text-align:center; overflow:hidden; opacity:0; transition:all 0.8s; }
article p img { width:auto; height:100%; }

/*포폴 설명*/
article em { position:absolute; bottom:50px; right:-300px; z-index:2; display:inline-block; box-sizing:border-box; padding:10px 20px; background:#ff0000; color:#fff; opacity:0.8; transition:all 0.8s;}




/*copyright*/
.copyright { position:fixed; bottom:20px; right:30px; font:12px/1.5 arial; letter-spacing:4px; color:#999; text-align:center;}

/*클릭시 변형된 모습*/
article.on { width:700px; height:500px; margin-top:-250px; }
article.on h2 {  opacity:1;}	/* 사진1 텍스트 */

article.on strong { opacity:0;}
article.on p { height:500px; margin-top:-250px; opacity:1;}
article.on em { right:390px; }
article.on em.k2 { right:70px; }
article.on span { right:20px;}


article.on button.bbt1-1 { top:370px; right:160px; }
article.on button.bbt1-2 { top:314px; left:155px; }


article.on button.bbt2 { top:420px; right:0px; }
/*article.on button.bbt3 { top:370px; right:20px; }*/
article.on button.bbt3 { top:400px; right:20px; }


/* CSS 1번째 지역별 버튼 */
button.bbt1-1 {
 z-index:1;
 right:-1330px; 
opacity:1; transition:all 1s;

 display:inline-block;
text-align: center;

letter-spacing: 1px; /* 글 가로 간격 */
position: relative;

  padding: 10px 30px 14px; /* 버튼 내부 여백 */
  font-size: 22px; /* 폰트 크기 */
  font-weight: bold; /* 폰트 굵기 */
  color: #072a60; /* 폰트 색상 */
  text-decoration: none; /* 밑줄제거 */
  background-image: linear-gradient(to right, #ffb700 0%, #ffb700 100%); /* 버튼 색상 */
  border-radius: 50px; /* 모서리 라운드 */
  transition: transform 0.2s ease-in-out; /* 애니메이션 속도 */
  border: none; /* 태두리 */
  cursor: pointer;

}

button.bbt1-1:hover {
  transform: scale(1.2); /* 버튼 확대 */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
}




/* CSS 1-1 오늘의 BEST 매장 버튼 */
button.bbt1-2 {
 z-index:2;
 right:-1330px; 
opacity:1; transition:all 1s;

 display:inline-block;
text-align: center;

letter-spacing: 1px; /* 글 가로 간격 */
position: relative;


  padding: 10px 30px 14px; /* 버튼 내부 여백 */
  font-size: 22px; /* 폰트 크기 */
  font-weight: bold; /* 폰트 굵기 */
  color: #000; /* 폰트 색상 */
  text-decoration: none; /* 밑줄제거 */
  background-image: linear-gradient(to right, #fff 0%, #fff 100%); /* 버튼 색상 */
  border-radius: 50px; /* 모서리 라운드 */
  transition: transform 0.2s ease-in-out; /* 애니메이션 속도 */
  border: none; /* 태두리 */
  cursor: pointer;

}

button.bbt1-2:hover {
  transform: scale(1.2); /* 버튼 확대 */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
}





/* CSS 2번째 회사소개 버튼 */
button.bbt2 {
  z-index:2;
  right:-1330px; 
  opacity:1; transition:all 1s;
  display:inline-block;
  text-align: center;
  letter-spacing: 1px; /* 글 가로 간격 */
  position: relative;

  padding: 10px 30px 14px; /* 버튼 내부 여백 */
  font-size: 22px; /* 폰트 크기 */
  font-weight: bold; /* 폰트 굵기 */
  color: #fff; /* 폰트 색상 */
  text-decoration: none; /* 밑줄제거 */
  background-image: linear-gradient(to right, #0d227e 0%, #182450 100%); /* 버튼 색상 */
  border-radius: 50px; /* 모서리 라운드 */
  transition: transform 0.2s ease-in-out; /* 애니메이션 속도 */
  border: none; /* 태두리 */
  cursor: pointer;
}

button.bbt2:hover {
  transform: scale(1.2); /* 버튼 확대 */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
}


/* CSS 정관장 버튼 */
button.bbt3 {
  z-index:2;
  right:-1330px; 
  opacity:1; transition:all 1s;
  display:inline-block;
  text-align: center;
  letter-spacing: 1px; /* 글 가로 간격 */
  position: relative;

  padding: 10px 30px 14px; /* 버튼 내부 여백 */
  font-size: 22px; /* 폰트 크기 */
  font-weight: bold; /* 폰트 굵기 */
  color: #fff; /* 폰트 색상 */
  text-decoration: none; /* 밑줄제거 */
  background-image: linear-gradient(to right, #313131 0%, #000 100%); /* 버튼 색상 */
  border-radius: 50px; /* 모서리 라운드 */
  transition: transform 0.2s ease-in-out; /* 애니메이션 속도 */
  border: none; /* 태두리 */
  cursor: pointer;

}


button.bbt3:hover {
  transform: scale(1.2); /* 버튼 확대 */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
}






































/* 버튼 3 */
.grow-button-3 { 
 z-index:2;
 opacity:0.8; transition:all 1s;
position:absolute;
 display:inline-block;
text-align: center;
text-transform: uppercase;
cursor: pointer;

  padding: 10px 30px; /* 버튼 내부 여백 */
  font-size: 18px; /* 폰트 크기 */
  font-weight: bold; /* 폰트 굵기 */
  color: #fff; /* 폰트 색상 */
  text-decoration: none; /* 밑줄제거 */
  background-image: linear-gradient(to right, #313131 0%, #ff0000 100%); /* 버튼 색상 */
  border-radius: 50px; /* 모서리 라운드 */
  transition: transform 0.2s ease-in-out; /* 애니메이션 속도 */
  border: none; /* 태두리 */
}

.grow-button-3:hover { 
  transform: scale(1.1); /* 버튼 확대 */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
}  




/* CSS 버튼19 */
button.click-me-button18 {
 z-index:2;
 opacity:0.8; transition:all 1s;
position:absolute;
 display:inline-block;
text-align: center;
text-transform: uppercase;
cursor: pointer;
font-size: 16px; /* 폰트 크기 */
letter-spacing: 1px; /* 글 가로 간격 */
position: relative;
background-color: #16a085;
border: none;
color: #fff;

width: 200px; 
height: 55px;
text-align: center;
transition-duration: 0.4s;
overflow: hidden;
box-shadow: 0 5px 15px #193047;
border-radius: 4px;
}


button.click-me-button18:hover {
background: #fff;
box-shadow: 0px 2px 10px 5px #1abc9c;
color: #000;
}

button.click-me-button18:after {
content: "";
background: #1abc9c;
display: block;
position: absolute;
padding-top: 300%;
padding-left: 350%;
margin-left: -20px !important;
margin-top: -120%;
opacity: 0;
transition: all 0.8s
}

button.click-me-button18:active:after {
padding: 0;
margin: 0;
opacity: 1;
transition: 0s
}

button.click-me-button18:focus { outline:0; }
/* CSS 버튼19 끝 */



/* 버튼 1 */
.grow-button-1 { 
  display: inline-block; 
  padding: 10px 30px; /* 버튼 내부 여백 */
  font-size: 18px; /* 폰트 크기 */
  font-weight: bold; /* 폰트 굵기 */
  color: #fff; /* 폰트 색상 */
  text-decoration: none; /* 밑줄제거 */
  background-image: linear-gradient(to right, #43e97b 0%, #38f9d7 100%); /* 버튼 색상 */
  border-radius: 50px; /* 모서리 라운드 */
  transition: transform 0.2s ease-in-out; /* 애니메이션 속도 */
  border: none; /* 태두리 */
}

.grow-button-1:hover { 
  transform: scale(1.1); /* 버튼 확대 */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
}  

/* 버튼 2 */
.grow-button-2 { 
  display: inline-block; 
  padding: 10px 30px; /* 버튼 내부 여백 */
  font-size: 18px; /* 폰트 크기 */
  font-weight: bold; /* 폰트 굵기 */
  color: #fff; /* 폰트 색상 */
  text-decoration: none; /* 밑줄제거 */
  background-image: linear-gradient(to right, #4facfe 0%, #00f2fe 100%); /* 버튼 색상 */ 
  border-radius: 50px; /* 모서리 라운드 */
  transition: transform 0.2s ease-in-out; /* 애니메이션 속도 */
  border: none; /* 태두리 */
}

.grow-button-2:hover { 
  transform: scale(1.1); /* 버튼 확대 */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
}  



/* 버튼 4 */
.grow-button-4 { 
  display: inline-block; 
  padding: 10px 30px; /* 버튼 내부 여백 */
  font-size: 18px; /* 폰트 크기 */
  font-weight: bold; /* 폰트 굵기 */
  color: #fff; /* 폰트 색상 */
  text-decoration: none; /* 밑줄제거 */
  background-image: linear-gradient(to right, #6a11cb 0%, #2575fc 100%); /* 버튼 색상 */
  border-radius: 50px; /* 모서리 라운드 */
  transition: transform 0.2s ease-in-out; /* 애니메이션 속도 */
  border: none; /* 태두리 */
}

.grow-button-4:hover { 
  transform: scale(1.1); /* 버튼 확대 */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
}  

/* 버튼 5 */
.grow-button-5 { 
  display: inline-block; 
  padding: 10px 30px; /* 버튼 내부 여백 */
  font-size: 18px; /* 폰트 크기 */
  font-weight: bold; /* 폰트 굵기 */
  color: #fff; /* 폰트 색상 */
  text-decoration: none; /* 밑줄제거 */
  background-image: linear-gradient(to right, #f78ca0 0%, #f9748f 19%, #fd868c 60%, #fe9a8b 100%); /* 버튼 색상 */
  border-radius: 50px; /* 모서리 라운드 */
  transition: transform 0.2s ease-in-out; /* 애니메이션 속도 */
  border: none; /* 태두리 */
}

.grow-button-5:hover { 
  transform: scale(1.1); /* 버튼 확대 */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
}  

/* 버튼 6 */
.grow-button-6 { 
  display: inline-block; 
  padding: 10px 30px; /* 버튼 내부 여백 */
  font-size: 18px; /* 폰트 크기 */
  font-weight: bold; /* 폰트 굵기 */
  color: #fff; /* 폰트 색상 */
  text-decoration: none; /* 밑줄제거 */
  background-image: linear-gradient(to right, #7028e4 0%, #ea6db5 100%); /* 버튼 색상 */
  border-radius: 50px; /* 모서리 라운드 */
  transition: transform 0.2s ease-in-out; /* 애니메이션 속도 */
  border: none; /* 태두리 */
}

.grow-button-6:hover { 
  transform: scale(1.1); /* 버튼 확대 */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
}  

/* 버튼 7 */
.grow-button-7 { 
  display: inline-block; 
  padding: 10px 30px; /* 버튼 내부 여백 */
  font-size: 18px; /* 폰트 크기 */
  font-weight: bold; /* 폰트 굵기 */
  color: #fff; /* 폰트 색상 */
  text-decoration: none; /* 밑줄제거 */
  background-image: linear-gradient(to right, #6a85b6 0%, #bac8e0 100%); /* 버튼 색상 */
  border-radius: 50px; /* 모서리 라운드 */
  transition: transform 0.2s ease-in-out; /* 애니메이션 속도 */
  border: none; /* 태두리 */
}

.grow-button-7:hover { 
  transform: scale(1.1); /* 버튼 확대 */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
}  

/* 버튼 8 */
.grow-button-8 { 
  display: inline-block; 
  padding: 10px 30px; /* 버튼 내부 여백 */
  font-size: 18px; /* 폰트 크기 */
  font-weight: bold; /* 폰트 굵기 */
  color: #fff; /* 폰트 색상 */
  text-decoration: none; /* 밑줄제거 */
  background-image: linear-gradient(to right, #16a085 0%, #f5c400 100%); /* 버튼 색상 */
  border-radius: 50px; /* 모서리 라운드 */
  transition: transform 0.2s ease-in-out; /* 애니메이션 속도 */
  border: none; /* 태두리 */
}

.grow-button-8:hover { 
  transform: scale(1.1); /* 버튼 확대 */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
}  

/* 버튼 9 */
.grow-button-9 { 
  display: inline-block; 
  padding: 10px 30px; /* 버튼 내부 여백 */
  font-size: 18px; /* 폰트 크기 */
  font-weight: bold; /* 폰트 굵기 */
  color: #fff; /* 폰트 색상 */
  text-decoration: none; /* 밑줄제거 */
  background-image: linear-gradient(-60deg, #ff5858 0%, #f09819 100%); /* 버튼 색상 */
  border-radius: 50px; /* 모서리 라운드 */
  transition: transform 0.2s ease-in-out; /* 애니메이션 속도 */
  border: none; /* 태두리 */
}

.grow-button-9:hover { 
  transform: scale(1.1); /* 버튼 확대 */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
}  

/* 버튼 10 */
.grow-button-10 { 
  display: inline-block; 
  padding: 10px 30px; /* 버튼 내부 여백 */
  font-size: 18px; /* 폰트 크기 */
  font-weight: bold; /* 폰트 굵기 */
  color: #fff; /* 폰트 색상 */
  text-decoration: none; /* 밑줄제거 */
  background-image: linear-gradient(220.55deg, #FADD76 0%, #9F3311 100%); /* 버튼 색상 */
  border-radius: 50px; /* 모서리 라운드 */
  transition: transform 0.2s ease-in-out; /* 애니메이션 속도 */
  border: none; /* 태두리 */
}

.grow-button-10:hover { 
  transform: scale(1.1); /* 버튼 확대 */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
}