@charset "utf-8";

ul, ol{list-style:none;}
img{border:none;}
a{text-decoration:none;}

#gnb .gnb_flavor .gnb_sub {padding-top:29px;padding-right:200px; display:none;}
#gnb .gnb_flavor .hover {padding-top:29px;padding-right:200px; display:block;-webkit-transition:opacity .3s ease; transition:opacity .3s ease;}

#gnb .gnb_flavor .gnb_sub a {padding:0;}

#gnb .gnb_wrap > ul:after {display:table; clear:both; content:"";}
#gnb .gnb_wrap > ul > li {float:left; position:relative;}
#gnb .gnb_main a {display:block;}
#gnb .gnb_flavor .gnb_main a {padding-left:0;}
#gnb .gnb_about .gnb_main a {padding-right:0;}
#gnb .gnb_main span {display:block; height:76px; line-height:53px; }
#gnb .gnb_main {padding-left:75px;padding-top:20px;}
#gnb .gnb_menu .gnb_sub {margin-left:0;}
#gnb .gnb_event .gnb_sub {margin-left:0;}
#gnb .gnb_store .gnb_sub {margin-left:0;}
#gnb .gnb_about .gnb_sub {margin-left:0;}
#gnb .gnb_about .gnb_sub {text-align:right; margin-left:0; width:100%; padding-left:30px;}
#gnb .gnb_sub li {white-space:nowrap; text-align:center;}

#gnb .gnb_sub {overflow:hidden; position:absolute; top:100%; left:0; height:0;  z-index:1000; font-size:14px; font-weight:300; text-align:center; -webkit-transition:height .5s ease; transition:height .5s ease;}
#gnb .gnb_sub li {padding-bottom:12px;padding:0 13px;}
#gnb .gnb_sub .storewhere {padding-left:42px;}
#gnb .gnb_sub .storestr {padding-left:32px; text-align:center;}
#gnb .gnb_sub .storestr:first-child,#gnb .gnb_sub .storestr:last-child {padding-left:46px; text-align:center;}
#gnb .gnb_sub li:first-child {padding-top:10px;}
#gnb .gnb_sub a {display:block; padding:10px 0; color:#7b7b7b; line-height:1.2; opacity:0; text-transform:uppercase; -webkit-transition:opacity .3s linear; transition:opacity .3s linear;}
#gnb .gnb_bg {overflow:hidden; position:absolute; top:80px; left:0; height:0; z-index:999; min-width:100%; background:#242424; -webkit-transition:height .5s ease; transition:height .5s ease;}
#gnb .gnb_bg div {width:1200px; height:204px; margin:0 auto; background:url(/assets/images/common/img_happypoint_app.jpg) no-repeat 0 65px;}
#gnb:hover .gnb_sub,
#gnb:hover .gnb_bg {height:275px;}
#gnb:hover .gnb_bg {margin-top:1px;}
#gnb:hover .gnb_sub {overflow:visible;}
#gnb:hover .gnb_sub a {color:#948780; opacity:1; -webkit-transition:opacity .5s linear; transition:opacity .5s linear;}
#gnb:hover .gnb_sub a:hover {color:#a63538;}
#gnb:hover .gnb_flavor .gnb_sub {margin-left:-54px; opacity:1; -webkit-transition-delay:.3s; transition-delay:.3s;}

.topimg, .mainevent	{max-width: 100%; position: relative;  /*height:auto;*/
	height: 400px;background-size:contain;background-position:center center;height:auto; border:none; vertical-align:bottom;}

.longin {width:auto; height:auto;}

.mainremen {animation-duration:3s;}
.mainslide {background-color:#fff}
.mainslide > div {padding:180px 80px;}
.mainslide > div .col-md-6 {padding:0 30px;}
.mainslide > div .col-md-6:nth-child(2) {padding-top:30px;}
.mainslidephoto {height:auto;position:relative;right:0;}
.mainslidephoto img:nth-child(1) {width:100%;max-width:450px; height:auto;}
.mainslidephoto img:nth-child(2) {position:absolute;}
.mainslidetext {height:400px;padding-top:35px;}
.mainslidetext div a {border:1px solid #242424; color:#242424; float:right; text-align:center; display:block; padding:10px 20px;}
.mainslidetext div a:hover {background:#242424; color:#fff; transition:all 0.2s;}

.mainpicto {z-index:999;padding:120px 80px;}
.mainpicto div a {color:#fff; font-size:23px; font-family: 'Markazi Text', serif; background:#000; opacity:0.8;text-align:center; display:block; padding:75px 20px 10px 20px; top:50%; height:400px;margin:30px;}
.mainpicto div {height:auto; padding:10px;}
.mainpicto div:hover img {transform:scale(1.1);transition:all 0.3s;}

.snsrow {background:#fff; height:auto;padding:100px 50px;}
.snsrow div {text-align:center;font-size:30px;}
.snsplist div { max-width:1270px; width:100%; height:auto;margin:0 auto;}
.snsplist div img {padding:10px 0;}

.manu1 div {text-align:center;}


.screen {
  display: block;
  overflow: hidden;
  position: relative;
  margin: 0 auto;
}

.screen img {
  height: auto;
  position: absolute;
  z-index: 0;
  margin: auto;
  left: 0;
  right: 0;
  padding: 0;
}
.slideslide {width:100%;height:auto;}


/* ¸ÅÀåÀ§Ä¡ */
.middlemenu {padding:10px 0;text-align:center;}
.form-inline {margin-top:40px;}
.formrow div {text-align:center;}
.snsicon {width:23px;margin-bottom: 10px;}
.footer {background-color:#242424; text-align: center; color:#e7e7e7;padding:30px 0;line-height:35px;}
.footer img {margin-left:5px; margin-right:5px;margin-top:27px;}

/* hover ¸Þ´º */
#productGrid { margin-left:70px; 
  display: grid;
  grid-template-columns: repeat(3,1fr); 
  grid-auto-rows: calc(173.2vw/3);
  width: 100%;
  overflow: hidden;
}
#productGrid li {
  grid-column-end: span 2;
  position: relative;
}

.product {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

.product>.details {
  grid-column: 1;
  grid-row: 1;
}
.product>.logo {
  grid-column: 2;
  grid-row: 1;
}


.product>.details h2, .product>.details p {font-family: 'Haan YGodic 230';}

.product>.logo, #productGrid > b:nth-child(2n){				/*µÞ¹è°æ (ºÐÈ«)*/
  background-color: #FFEFE5;
  clip-path: polygon(0% 0%, 100% 33.333%, 100% 100%, 0% 66.667%, 0% 0%);
  -webkit-clip-path: polygon(0% 0%, 100% 33.333%, 100% 100%, 0% 66.667%, 0% 0%);
} 

.product>.details, #productGrid > b:nth-child(2n+1){		/*µÞ¹è°æ (¹ÎÆ®)*/
  background-color: #E7FFF4;
  clip-path: polygon(0% 33.333%, 100% 0%, 100% 66.667%, 0% 100%, 0% 0%);
  -webkit-clip-path: polygon(0% 33.333%, 100% 0%, 100% 66.667%, 0% 100%, 0% 0%);
}

.product>.photo {
  grid-column-end: span 2;
  z-index: 1;
  text-align: center;
}

.product>.details>h2 {
  margin-top: 35%;
  margin-bottom: 0;
  text-align:center;
  font-size: 5vw;
}
.product>.details>p {
  margin-top: 0;
  transform: skewY(-33.7deg);
  font-size: 3.5vw;
  text-align:center;
}
.product>.logo>img {
    opacity: 0.4;
    position: absolute;
    max-width: 35%;
    top: 23%;
    right: 5%;
    transform: skewY(32deg);
}
.product>.photo>img {
  position:absolute;
  bottom: 20%;
  left: 19%;
  max-width: 62%;
  -webkit-filter: drop-shadow(0 2px 3px  rgba(0, 0, 0, 0.40));
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.40));
  transition-property: bottom, filter, -webkit-filter;
  transition-duration: .3s;
}
.product>.photo>img:hover { 
  bottom: 25%;
  -webkit-filter: drop-shadow(0 20px 5px  rgba(0, 0, 0, 0.05));
  filter: drop-shadow(0 20px 5px rgba(0, 0, 0, 0.05));
}





/* lightbox ¸Þ´º */

.lightimg {width:100%;max-width:280px;height:auto;}
.menulistbox span{font-size:23px; font-family: 'Haan YGodic 240',serif;; font-size:22px;color:#a63538; }

.short-animate {  -webkit-transition:.5s ease-in-out;  -moz-transition:.5s ease-in-out;
  -ms-transition:.5s ease-in-out;
  -o-transition:.5s ease-in-out;
  transition:.5s ease-in-out;}

.long-animate {  -webkit-transition: .5s .5s ease-in-out;
  -moz-transition: .5s .5s ease-in-out;
  -ms-transition: .5s .5s ease-in-out;
  -o-transition:.5s .5s ease-in-out;
  transition:.5s .5s ease-in-out;}

.lightbox {  position:fixed;  top:-100%;  bottom:100%;  left:0;  right:0;  background:rgba(36,36,36,.8);  z-index:501;  opacity:0;}
.lightbox img {	position:absolute;  margin:auto;  top:0;  left:0;  right:0;  bottom:0;  max-width:0%;  max-height:0%;padding:20px;}

#lightbox-controls {  position:fixed;  height:70px;  width:70px;  top:-70px;  right:0;  z-index:502;}

#close-lightbox {  display:block;  position:absolute;  overflow:hidden;  height:50px;  width:50px;  text-indent:-5000px;  right:20px;  top:100px;
  -webkit-transform:rotate(45deg);
  -moz-transform:rotate(45deg);
  -ms-transform:rotate(45deg);
  -o-transform:rotate(45deg);
  transform:rotate(45deg);}

#close-lightbox:before {	
content:'';  
display:block;  
position:absolute;  
height:0px;  
width:3px;  
left:24px;  
top:0;  
background:white;
border-radius:2px;
-webkit-transition: .5s .5s ease-in-out;
-moz-transition: .5s .5s ease-in-out;
-ms-transition: .5s .5s ease-in-out;
-o-transition:.5s .5s ease-in-out;
transition:.5s .5s ease-in-out;
}

#close-lightbox:after {
content:'';
display:block;
position:absolute;
width:0px;
height:3px;
top:24px;
left:0;
background:white;
border-radius:2px;
-webkit-transition: .5s 1s ease-in-out;
-moz-transition: .5s 1s ease-in-out;
-ms-transition: .5s 1s ease-in-out;
-o-transition:.5s 1s ease-in-out;
transition:.5s 1s ease-in-out;
}

.lightbox:target {
  top:0%;
  bottom:0%;
  opacity:1;
}

.lightbox:target img {
  max-width:100%;
  max-height:100%;
}

.lightbox:target ~ #lightbox-controls {
  top:0px;
}

.lightbox:target ~ #lightbox-controls #close-lightbox:after {
  width:50px;
}

.lightbox:target ~ #lightbox-controls #close-lightbox:before {
  height:50px;
}


@media (max-width:599px) {
  #productGrid{ 
    grid-template-columns: repeat(5,1fr); 
    grid-auto-rows: calc(173.2vw/5);
  }
  .product>.details>h2 {
    font-size: 2vw;
	transform: skewY(-25.3deg);
  }
  .product>.details>p {
    font-size: 1.8vw;
	transform: skewY(-25.3deg);
  }
  #gnb .gnb_flavor {display:none;}
  #gnb:hover .navbar-nav,#gnb:active .navbar-nav {height:275px;overflow:hidden;}
  #gnb .gnb_bg {top:200px;}
  #gnb .gnb_main {padding-left:40px;}
}
@media (min-width:600px) {
  #productGrid{ 
    grid-template-columns: repeat(5,1fr); 
    grid-auto-rows: calc(173.2vw/5);
  }
  .product>.details>h2 {
    font-size: 2vw;
	transform: skewY(-25.3deg);
  }
  .product>.details>p {
    font-size: 1.8vw;
	transform: skewY(-25.3deg);
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .longin img {margin-top:180px;margin-bottom:40px;}
  .longin {margin-left:440px;}
  .product>.details>h2 {
    font-size: 2vw;
	transform: skewY(-25.3deg);
  }
  .product>.details>p {
    font-size: 1.8vw;
	transform: skewY(-25.3deg);
  }
  #gnb .gnb_flavor {display:none;}
  #gnb .gnb_bg {top:120px;}
}
@media (min-width: 992px) and (max-width: 1475px) {
  .longin {margin-top:50px;margin-bottom:40px;}
  #productGrid{ 
    grid-template-columns: repeat(8,1fr); 
    grid-auto-rows: calc(173.2vw/7);
  } 
  .product>.details>h2 {
    font-size: 1.05vw;
	margin-top:50%;
	transform: skewY(-33deg);
  }
  .product>.details>p {
    font-size: 0.85vw;
	transform: skewY(-33deg);
  }
  .product>.photo>img {
  bottom: 33%;
  }
  .product>.logo>img {
    opacity: 0.4;
    position: absolute;
    max-width: 35%;
    top: 23%;
    right: 5%;
    transform: skewY(34deg);
  }
}
@media (min-width: 1475px) {
  .longin {margin-top:90px;margin-bottom:40px;}
  #productGrid{ 
    grid-template-columns: repeat(9,1fr); 
    grid-auto-rows: calc(173.2vw/9);
  } 
  .product>.details>h2 {
    font-size: 1vw;
	margin-top:40%;
	text-align:center;
	transform: skewY(-25deg);
  }
  .product>.details>p {
    font-size: 0.81vw;
	text-align:center;
	transform: skewY(-25deg);
  }
}