@charset "utf-8";
/* CSS Document */

*{
	margin:0 auto;
	padding:0;
	list-style:none;
	font-family:"arial";
	color:#ffffff;
}
html, body{
	min-width:1400px;
	background-color:#171717;
	font-size:20px;
}
a{
	text-decoration:none;
	display:block;
}
header{
	width:100%;
	height:600px;
}
.wrap{
	width:1400px;
}
.logo{
	float:left;
	width:250px;
	height:47px;
	margin-top:30px;
	margin-left:45px;
	position:absolute;
	z-index:2;
}
.logo img{
	width:100px;
	height:100px;
}
.menu{
	float:right;
	width:600px;
	height:60px;
	z-index:2;
	position:relative;
	margin-top:25px;
	margin-right:60px;
	text-shadow: 0 10px 10px rgba(0, 0, 0, 0.5);
}
.navi{
	float:right;
	margin-top:13px;
}
.navi>li{
	float:left;
}
.navi>li>a{
	width:120px;
	height:40px;
	line-height:40px;
	font-size:18px;
	text-align:center;
	color:#F3F3F3;
}
.navi>li>a:hover{
	font-weight:bold;
	color:#FFFFFF;
}
.submenu{
	width:120px;
	height:160px;
	position:absolute;
	display:none;
	z-index:1;
}
.mainimage{
	position:absolute;
	margin-top:0px;
	z-index:1;
}
.mainimage img{
	width:1400px;
	height:600px;
}
.mainimage>a{
	display:block;
	position:absolute;
}
.text {
    position: absolute;
	bottom:-10%;
    left: 50%;
	text-align:center;
    transform: translate(-50%, -50%);
    opacity: 0;
    animation: fadeInUp 1s forwards;
	overflow:hidden;
	margin-bottom:170px;
	width:1000px;
}
.maintext{
	font-size:70px;
	color:#ffffff;
	font-family:Arial;
	text-shadow: 0 10px 10px rgba(0, 0, 0, 0.5);
}
.subtext{
	font-size:30px;
	color:#ffffff;
	font-family:Arial;
	padding: 10px;
	text-shadow: 0 10px 10px rgba(0, 0, 0, 0.5);
}
@keyframes fadeInUp {
    to {
        bottom: 0;
        opacity: 1;
    }
}
.bodywrap{
	width:1400px;
	height:7100px;
}
.contents{
	float:left;
	width:1400px;
	height:7100px;
	background-color:#ffffff;
}
.contentsitem-1title{
	font-weight:bold;
	color:#ffffff;
	text-align:center;
	font-size:50px;
	position:relative;
	margin-top:-70px;
	font-family:Gabriola;
	display:block;
	z-index: 1;
}
.ctibox-1{
	float:left;
	width:490px;
	height:600px;
	display:block;
	background-color:#cccccc;
}
.ctibox-2{
	float:right;
	width:490px;
	height:290px;
	display:block;
	background-color:#cccccc;
}
.ctibox-3{
	float:right;
	margin-top:20px;
	width:490px;
	height:290px;
	display:block;
	background-color:#cccccc;
}
.slidebox{
	width:1400px;
	height:500px;
}
[name="slide"] {display:none;}
.slidebox img {width:1400px;height:500px;}
.slidebox .slidelist {
	white-space:nowrap;
	font-size:0;
	overflow:hidden;
}
.slideitem {
	position:relative;
	display:inline-block;
	vertical-align:middle;
	width:100%;
	transition:all .35s;
}
.slidebox .slideitem label {
	position:absolute;
	z-index:1;
	padding:20px;
	border-radius:50%;
	cursor:pointer;
}
label.left {
	left:20px;
	background-image:url("../images/left.png");
	margin-top:250px;
	background-size:45%;
	background-repeat:no-repeat;
	background-position:center center;
}
label.right {
	right:20px;
	background-image:url("../images/right.png");
	margin-top:250px;
	background-size:45%;
	background-repeat:no-repeat;
	background-position:center center;
}
[id="slide01"]:checked ~ .slidelist .slideitem {transform:translateX(0);}
[id="slide02"]:checked ~ .slidelist .slideitem {transform:translateX(-100%);}
[id="slide03"]:checked ~ .slidelist .slideitem {transform:translateX(-200%);}
[id="slide04"]:checked ~ .slidelist .slideitem {transform:translateX(-300%);}
[id="slide05"]:checked ~ .slidelist .slideitem {transform:translateX(-400%);}
[id="slide06"]:checked ~ .slidelist .slideitem {transform:translateX(-500%);}

@keyframes slide01 {
	0% {left:0%;}
	15% {left:0%;}
	16% {left:-100%;}
	31% {left:-100%;}
	32% {left:-200%;}
	49% {left:-200%;}
	50% {left:-300%;}
	65% {left:-300%;}
	66% {left:-400%;}
	81% {left:-400%;}
	82% {left:-500%;}
	97% {left:-500%;}
	100% {left:0%;}
}
[id="slide01"]:checked ~ .slidelist .slideitem {transform:translateX(0);animation:slide01 50s infinite;}

@keyframes slide02 {
	0% {left:0%;}
	15% {left:0%;}
	16% {left:-100%;}
	31% {left:-100%;}
	32% {left:-200%;}
	49% {left:-200%;}
	50% {left:-300%;}
	65% {left:-300%;}
	66% {left:-400%;}
	81% {left:-400%;}
	82% {left:100%;}
	97% {left:100%;}
	100% {left:0%;}
}
[id="slide02"]:checked ~ .slidelist .slideitem {transform:translateX(-100%);animation:slide02 50s infinite;}

@keyframes slide03 {
	0% {left:0%;}
	15% {left:0%;}
	16% {left:-100%;}
	31% {left:-100%;}
	32% {left:-200%;}
	49% {left:-200%;}
	50% {left:-300%;}
	65% {left:-300%;}
	66% {left:200%;}
	81% {left:200%;}
	82% {left:100%;}
	97% {left:100%;}
	100% {left:0%;}
}
[id="slide03"]:checked ~ .slidelist .slideitem {transform:translateX(-200%);animation:slide03 50s infinite;}

@keyframes slide04 {
	0% {left:0%;}
	15% {left:0%;}
	16% {left:-100%;}
	31% {left:-100%;}
	32% {left:-200%;}
	49% {left:-200%;}
	50% {left:300%;}
	65% {left:300%;}
	66% {left:200%;}
	81% {left:200%;}
	82% {left:100%;}
	97% {left:100%;}
	100% {left:0%;}
}
[id="slide04"]:checked ~ .slidelist .slideitem {transform:translateX(-300%);animation:slide04 50s infinite;}

@keyframes slide05 {
	0% {left:0%;}
	15% {left:0%;}
	16% {left:-100%;}
	31% {left:-100%;}
	32% {left:400%;}
	49% {left:400%;}
	50% {left:300%;}
	65% {left:300%;}
	66% {left:200%;}
	81% {left:200%;}
	82% {left:100%;}
	97% {left:100%;}
	100% {left:0%;}
}
[id="slide05"]:checked ~ .slidelist .slideitem {transform:translateX(-400%);animation:slide05 50s infinite;}

@keyframes slide06 {
	0% {left:0%;}
	15% {left:0%;}
	16% {left:500%;}
	31% {left:500%;}
	32% {left:400%;}
	49% {left:400%;}
	50% {left:300%;}
	65% {left:300%;}
	66% {left:200%;}
	81% {left:200%;}
	82% {left:100%;}
	97% {left:100%;}
	100% {left:0%;}
}
[id="slide06"]:checked ~ .slidelist .slideitem {transform:translateX(-500%);animation:slide06 50s infinite;}
.contentsitem-2{
	width:1400px;
	height:500px;
	display:inline-block;
	background-color:#4A4A4A;
}
.contentsitem-2title{
	font-weight:bold;
	color:#ffffff;
	text-align:center;
	font-size:50px;
	position:relative;
	margin-top:30px;
	font-family:Gabriola;
	display:block;
}
.contentsitem-2item>ul{
	margin-top:70px;
	width:1400px;
	height:300px;
	float:left;
	position:relative;
}
.contentsitem-2item>ul>li{
	width:200px;
	height:300px;
	float:left;
	margin-left:200px;
}
.contentsitem-2item > ul > li > a {
  width: 200px;
  height: 100px;
  margin-top: 10px;
  font-size: 30px;
  font-family: Arial;
  color: #ffffff;
  text-align: center;

  display: flex;              /* flex로 바꿈 */
  justify-content: center;    /* 가로 중앙 */
  align-items: center;        /* 세로 중앙 */

  overflow-wrap: break-word;  /* 긴 단어 줄 바꿈 */
  word-break: break-word;     /* 호환성용 */
  
  box-sizing: border-box;     /* 패딩 포함 크기 계산 */
}
.contentsitem-2item img{
	width:200px;
	height:200px;
}
.contentsitem-3{
	width:1400px;
	height:3500px;
	background-color:#232323;
}
.logo_banner{
	width:1400px;
	height:250px;
	margin-top:0px;
	overflow:hidden;
	background-color:#cccccc;
}
.logo_banner_logo{
	width:600px;
	height:200px;
	z-index:1;
	margin-top:25px;
	margin-left:550px;
	position:absolute;
}
.logo_banner_logo img{
	width:300px;
	height:200px;
}
.logo_banner_background{
	width:1400px;
	height:250px;
	position:absolute;
	margin-top:0px;
}
.contentsitem-3contents{
	width:1300px;
	height:600px;
	margin-top:20px;
	margin-left:50px;
}
.ct-3_menu_title{
	width:500px;
	height:100px;
	text-align:center;
	font-size:70px;
	font-family:Gabriola;
	color:#DFB65D;
	margin-top:10px;
}
.ct-3_menu_sub_title{
	width:500px;
	height:100px;
	text-align:center;
	font-size:23px;
	color:#ffffff;
}
.season_menu{
	width:1300px;
	height:700px;
	overflow:hidden;
}
.season_menu_banner{
	width:1300px;
	height:450px;
	margin-top:10px;
	display:inline-block;
	overflow:hidden;
}
.season_menu_banner-1{
	float:left;
	width:300px;
	height:450px;
	display:block;
	background-color:#cccccc;
	border-radius:10px;
	margin-left:156px;
}
.season_menu_banner-1>ul{
	width:300px;
	height:450px;
}
.season_menu_banner-1>ul>li{
	width:300px;
	height:230px;
}
.season_menu_banner-1 img{
	width:300px;
	height:230px;
	border-top-left-radius:10px;
	border-top-right-radius:10px;
}
.season_menu_banner-1 img:hover{
	opacity:0.9;
}
.smbt-1{
	width:300px;
	height:220px;
	background-color:#3E3E3E;
	border-bottom-left-radius:9.9px;
	border-bottom-right-radius:9.9px;
}
.smbt-1_title{
	width:250px;
	height:20px;
	padding-top:20px;
	padding-bottom:10px;
	font-size:20px;
	color:#ffffff;
}
.smbt-1_subtitle{
	width:250px;
	height:40px;
	font-size:20px;
	color:#ffffff;
}
.smbt-1_introduce{
	width:250px;
	height:80px;
	font-size:20px;
	color:#ffffff;
}
.smbt-1_VM{
	width:150px;
	height:30px;
	float:right;
	margin-right:10px;
}
.smbt-1_VM>ul>li{
	width:150px;
	height:30px;
	border-bottom:2px solid #DFB65D;
}
.smbt-1_VM>ul>li>a{
	width:150px;
	height:30px;
	font-size:30px;
	color:#DFB65D;
}
.season_menu_banner-2{
	float:left;
	width:300px;
	height:350px;
	display:block;
	background-color:#cccccc;
	border-radius:10px;
	margin-left:156px;
	margin-left:40px;
}
.season_menu_banner-2>ul{
	width:300px;
	height:450px;
}
.season_menu_banner-2>ul>li{
	width:300px;
	height:230px;
}
.season_menu_banner-2 img{
	width:300px;
	height:230px;
	border-top-left-radius:10px;
	border-top-right-radius:10px;
}
.season_menu_banner-2 img:hover{
	opacity:0.9;
}
.smbt-2{
	width:300px;
	height:220px;
	background-color:#3E3E3E;
	border-bottom-left-radius:9.9px;
	border-bottom-right-radius:9.9px;
}
.smbt-2_title{
	width:250px;
	height:20px;
	padding-top:20px;
	padding-bottom:10px;
	font-size:20px;
	color:#ffffff;
}
.smbt-2_subtitle{
	width:250px;
	height:40px;
	font-size:20px;
	color:#ffffff;
}
.smbt-2_introduce{
	width:250px;
	height:80px;
	font-size:20px;
	color:#ffffff;
}
.smbt-2_VM{
	width:150px;
	height:30px;
	float:right;
	margin-right:10px;
}
.smbt-2_VM>ul>li{
	width:150px;
	height:30px;
	border-bottom:2px solid #DFB65D;
}
.smbt-2_VM>ul>li>a{
	width:150px;
	height:30px;
	font-size:30px;
	color:#DFB65D;
}
.season_menu_banner-3{
	float:left;
	width:300px;
	height:350px;
	display:block;
	background-color:#cccccc;
	border-radius:10px;
	margin-left:156px;
	margin-left:40px;
}
.season_menu_banner-3>ul{
	width:300px;
	height:450px;
}
.season_menu_banner-3>ul>li{
	width:300px;
	height:230px;
}
.season_menu_banner-3 img{
	width:300px;
	height:230px;
	border-top-left-radius:10px;
	border-top-right-radius:10px;
}
.season_menu_banner-3 img:hover{
	opacity:0.9;
}
.smbt-3{
	width:300px;
	height:220px;
	background-color:#3E3E3E;
	border-bottom-left-radius:9.9px;
	border-bottom-right-radius:9.9px;
}
.smbt-3_title{
	width:250px;
	height:20px;
	padding-top:20px;
	padding-bottom:10px;
	font-size:20px;
	color:#ffffff;
}
.smbt-3_subtitle{
	width:250px;
	height:40px;
	font-size:20px;
	color:#ffffff;
}
.smbt-3_introduce{
	width:250px;
	height:80px;
	font-size:20px;
	color:#ffffff;
}
.smbt-3_VM{
	width:150px;
	height:30px;
	float:right;
	margin-right:10px;
}
.smbt-3_VM>ul>li{
	width:150px;
	height:30px;
	border-bottom:2px solid #DFB65D;
}
.smbt-3_VM>ul>li>a{
	width:150px;
	height:30px;
	font-size:30px;
	color:#DFB65D;
}
.beer_menu{
	width:1300px;
	height:760px;
	margin-top:100px;
}
.beer_banner_box{
	width:380px;
	height:450px;
	display:inline-block;
	float:left;
	margin-left:156px;
	margin-top:30px;
}
.beer_banner-1{
	width:180px;
	height:200px;
	float:left;
	background-color:#cccccc;
}
.beer_banner-2{
	width:180px;
	height:200px;
	float:right;
	background-color:#cccccc;
	margin-top:50px;
}
.beer_banner-3{
	width:180px;
	height:200px;
	float:left;
	background-color:#cccccc;
	margin-top:20px;
}
.beer_banner-4{
	width:180px;
	height:200px;
	float:right;
	background-color:#cccccc;
	margin-top:20px;
}
.beer_text_box{
	width:480px;
	height:400px;
	float:right;
	margin-right:156px;
	margin-top:30px;
}
.beer_text_title{
	width:480px;
	height:50px;
	float:left;
	font-family:Gabriola;
	color:#DFB65D;
	font-size:50px;
	margin-top:-30px;
	text-align:center;
}
.beer_text_contents{
	float:left;
	width:480px;
	height:340px;
	color:#ffffff;
	margin-top:30px;
}
.beer_text_contents>ul{
	width:480px;
}
.beer_text_contents>ul>li{
	float:left;
	width:480px;
	height:50px;
	color:#ffffff;
	font-size:34px;
	margin-top:20px;
}
.beer_text_contents>ul>li>a{
	float:right;
	width:70px;
	height:70px;
	margin-top:-10px;
}
.beer_text_contents img{
	width:70px;
	height:70px;
}
.bottom_card{
	width:1400px;
	height:680px;
	background-color:#cccccc;
}
.bottom_card-1{
	width:1400px;
	height:340px;
	background-color:#F9F9F9;
}
.bottom_card-2{
	width:1400px;
	height:340px;
	background-color:#DFDFDF;
}
.bottom_banner{
	width:1400px;
	height:700px;
	margin-bottom:0px;
	background-color:#cccffc;
}
.bottom_banner-1{
	width:350px;
	height:240px;
	float:left;
	background-color:#ff00ff;
}
.bottom_banner-2{
	width:350px;
	height:240px;
	float:left;
	background-color:#ff33ff;
}
.bottom_banner-3{
	width:350px;
	height:240px;
	float:left;
	background-color:#ff11ff;
}
.bottom_banner-4{
	width:350px;
	height:240px;
	float:left;
	background-color:#ff77ff;
}
.bottom_banner-1.bottom_banner-2.bottom_banner-3.bottom_banner-4 img{
	width:350px;
	height:240px;
}
.bottom_banner-5{
	width:1400px;
	height:460px;
	float:left;
	background-color:#171717;
}
.bottom_banner-5 img{
	width:1400px;
	height:460px;
	opacity:0.4;
}
.bottom_banner-5>ul{
	position:absolute;
	margin-left:400px;
	margin-top:-370px;
	width:600px;
	height:100px;
	text-align:center;
	font-size:100px;
	font-family:Gabriola;
	color:#ffffff;
}
.bottom_banner-5>ul>li{
	width:180px;
	height:50px;
	text-align:center;
	font-size:50px;
	font-family:Arial;
	color:#ffffff;
	border:3px solid #ffffff;
}
.bottom_banner-5>ul>li>a{
	margin-top:-7px;
}
footer{
	width:1400px;
	height:500px;
	background-color:#000000;
	margin-bottom:0px;
}


/*여*/

/* 카드 슬라이더 전용 */
.card-slider-wrap {
  width:100%;
  padding:100px 0;
  background:#111;
  overflow:hidden;
  user-select: none;
}

.card-slider {
  position: relative;
  width: 300px;
  height: 420px;
  transform-style: preserve-3d;
  cursor: grab;
}

.card-item {
  position: absolute;
  width: 300px;
  height: 420px;
  left: 0;
  top: 0;
  transform-style: preserve-3d;
  backface-visibility: hidden;
}

.card-slider .card-item img {
  width:300px;
  height:450px;
  object-fit:cover;
  border-radius:16px;
}

.card-slider .card-info {
  position:absolute;
  bottom:0;
  width:300px;
  height:210px;
  background:#444;
  margin-bottom: -40px;
  border-bottom-right-radius:16px;
  border-bottom-left-radius:16px;
}
.carousel {
  position: relative;
  width: 300px;
  height: 450px;
  transform-style: preserve-3d;
  transition: transform 0.4s ease;
}

.card {
  position: absolute;
  width: 300px;
  height: 450px;
  backface-visibility: hidden;
}
.scene {
  perspective: 400px;
}

.carousel {
  position: relative;
  width: 300px;
  height: 450px;
  transform-style: preserve-3d;
  transition: transform 0.35s ease;
}

.card {
  position: absolute;
  width: 300px;
  height: 450px;
  backface-visibility: hidden;
  transition: filter 0.3s ease;
}

.card.center img {
  box-shadow: 0 30px 60px rgba(0,0,0,0.55);
}
.card-info h3 {
  margin: 0 0 6px;
  margin-top:20px;
  font-size: 40px;
  text-align:center;
}

.price {
  margin: 0 0 8px;
  margin-left:28px;
  font-size: 20px;
}
.desc {
  margin: 0 0 6px;
  margin-left:28px;
  font-size: 20px;
  opacity: 0.9;
}
.card-link {
  display: inline-block;
  margin-top: 20px;
  margin-left:180px;
  font-size: 20px;
  color: #f0c36d;
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: pointer;
}
.card-item img {
  pointer-events: none;
  user-drag: none;
  -webkit-user-drag: none;
}
.card-slider {
  touch-action: pan-y;
  user-select: none;
}

.card-item img {
  pointer-events: none;
  -webkit-user-drag: none;
}
/* ===== 카드 슬라이더 ===== */
.card-slider-wrap {
  width: 100%;
  padding: 100px 0;
  background: #111;
  overflow: hidden;
}

.card-slider {
  position: relative;
  width: 300px;
  height: 420px;
  transform-style: preserve-3d;
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
}

.card-item {
  position: absolute;
  width: 300px;
  height: 420px;
  top: 0;
  left: 0;
  transform-style: preserve-3d;
  backface-visibility: hidden;
}

/* 이미지 드래그/클릭 차단 */
.card-item img {
  width: 300px;
  height: 450px;
  object-fit: cover;
  border-radius: 16px;
  pointer-events: none;
  -webkit-user-drag: none;
}

/* 카드 정보 */
.card-info {
  position: absolute;
  bottom: 0;
  width: 300px;
  height: 210px;
  background: #444;
  margin-bottom: -40px;
  border-radius: 0 0 16px 16px;
}

/* 링크는 반드시 클릭 가능 */
.card-link {
  display: inline-block;
  margin-top: 20px;
  margin-left: 180px;
  font-size: 20px;
  color: #f0c36d;
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: pointer;
  pointer-events: auto;
  position: relative;
  z-index: 10;
}

.card.center img {
  box-shadow: 0 30px 60px rgba(0,0,0,0.55);
}