@import "reset.css";
@import "default.css";
@import "base.css";

@charset "utf-8";

#header { z-index: 9;}

#content_wrap { width: 100%;  height:1000px;  position: relative;}

.visual_wrap {width: 100%; height:900px; position: relative;margin:0;}

.visual_wrap .swiper-vs { width: 100%; position: relative;}
.visual_wrap .swiper-slide { position: relative; overflow: hidden;text-align:center;}
.visual_wrap .swiper-slide img.vsImg {display: block;	position: relative;	opacity: 1;  transform: scale(1.2); transition: all 2s; }
.visual_wrap .swiper-slide-active img.vsImg {transform: scale(1); transition: all 5s; }
.visual_wrap .tWrap01 { width: 600px; position: absolute; top: 15%; right: 35%; text-align: center; border:0px solid red;}
.visual_wrap .tWrap02 { width: 600px; position: absolute; top: 15%; left: 20%; text-align: center;}
.visual_wrap .pic { width: 100%; display: block; opacity: 0;}

.visual_wrap .swiper-slide-active  .pic1 { opacity: 1; transition: all 1s ease .9s;}
.visual_wrap .swiper-slide-active  .pic2 { opacity: 1; transition: all 1s ease .9s;}
.visual_wrap .swiper-slide-active  .pic3 { opacity: 1; transition: all 1s ease .9s;}
.visual_wrap .paging { width: 200px; position: absolute; left: 50%; margin-left: -100px; bottom: 120px; text-align: center; z-index: 8;}
.paging .swiper-pagination-bullet { width: 12px; height: 12px; opacity: 1; border: 2px solid #fff; background: none;}
.paging .swiper-pagination-bullet-active { background: #fff;}


@media all and (max-width: 1499px){
.visual_wrap .layout { }
}


@keyframes picMotion {0%{margin-left: 300px; opacity: .4;}100%{margin-left: -180px; opacity: 1;}}

.visual_wrap .vsbn { width: 1200px; height: 100px; position: absolute; bottom: 0px; left: 50%; margin-left: -600px; z-index: 6;}
.vsbn a { display: block; height: 100px; width: 242px; position: absolute; top: 0px; left: 0px; background: rgba(0,0,0,0); z-index: 1;}

.visual_wrap .open {
	width: 120px;
	height: 120px;
	display: block;
	position: absolute;
	top: 80px;
	right: 270px;
	animation:downMotion 2s;
	z-index: 3;}		
	
@keyframes downMotion {
	0%{top:150px; opacity: 0;}
	30%{opacity: 0.3;}
	100%{top: 80px; opacity: 1;}
	}		
 	
.pageLink { width: 23px; height: 120px; position: fixed; z-index: 8; top: 50%; margin-top: -70px; right: 105px;}	
.pageLink a {width: 100%; height: 23px; margin-top: 8px; margin-bottom: 8px; display: block; background: url("../images/bulit_t1_of.png") no-repeat center center; cursor: inherit;}
.pageDown a{  background-image: url("../images/bulit_t2_off.png");}
.pageLink a.on { background-image: url("../images/bulit_t1_on.png");}
.pageDown a.on{  background-image: url("../img/main/bulit_t2_on.png");}


.banner_wrap {
	width: 100%;
	margin: 0px auto;
	position: relative;}

/************premium contents************************/

#premium_wrap{position:relative;width:100%; height:700px;background:url('https://mybuzz.speedgabia.com/silkvalley-ic2/premium_bg.jpg') no-repeat 50% 50%; background-size:cover;margin-top:0; border :1px solid #fff}
.slider-container { width:100%; max-width: 1400px; margin: 50px auto;padding:50px 0; }

.slider-container .tit1{
	position:relative; text-align:center;
	 color:#442430; font-size:50px; line-height:65px;
	 font-weight: 400; letter-spacing: -1px;
	opacity:1; margin-bottom:30px;
}
.slider-container .tit1 span{font-weight:800;}
.slider-container .tit1 p {font-size: 16px; line-height: 25px; color: #999; font-family: "Noto Sans KR"; margin-top: 20px;}

.slick-slide { outline: none; }
.card {
  background: #fff;
  border-radius: 15px;
  padding: 24px;
  text-align: center;
  margin: 0 10px;
  transition: transform 0.4s, opacity 0.4s;
  opacity: 1.0;
  transform: scale(1.0);
  position: relative;
  min-height: 200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.slick-center .card {
  opacity: 1;
  transform: scale(1.0);
  /*box-shadow: 0 8px 16px rgba(0,0,0,0.09);*/
  z-index: 2;
  border: 2px solid #83173a;
}

.content { font-size: 2.4em; font-weight: 600; color: #000; margin-bottom: 20px;line-height:1.4; }
.slick-center .content { font-size: 2.4em; color: #83173a }

.card-number {
  font-size: 2em;
  font-weight: bold;
  color: #ccc; /* ±âº» »ö»ó */
  margin-bottom: 8px;
  transition: color 0.3s;
}
.slick-center .card-number {
  color: #83173a; /* slick-center(È°¼ºÈ­)ÀÏ ¶§¸¸ ÀÚÁÖ»ö */
}

.card-desc {
  font-size: 1.4em;
  color: #000;
  margin-bottom: 8px;
}

.slick-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255,255,255,1);
  border: 2px solid #83173a;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  cursor: pointer;
  z-index: 3;
  display: flex !important;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  font-size: 1.3em;
  user-select: none;
}
.slick-prev { left: -60px; }
.slick-next { right: -60px; }
@media (max-width: 900px) {
  .slider-container { width: 100%; }
  .card { padding: 16px; }
  .slick-prev { left: -30px; }
  .slick-next { right: -30px; }
}
@media (max-width: 600px) {
  .slider-container { padding: 18px 0; }
  .card { font-size: 1em; }
  .slick-prev, .slick-next { width: 30px; height: 30px; font-size: 1em; }
}

/*******************//*******************/

.visual-open{
	display: flex;flex-direction: column;align-items: center;justify-content: center;font-size: 19px;font-weight: 700; font-family: pretendard;
	background: #fff;border-radius: 50%;color : #06033C;position : absolute;width : 102px;height : 102px;right : 95px;bottom : 100px;
	transform: translateX(50px);opacity: 0;transition : transform 1s, opacity 1s;line-height : 1.1em;text-align : center;gap : 5px}
.type2 .visual-open{transform: translateX(0);opacity: 1;transition : transform 1s 1s, opacity 1s 1s}
.visual-open::after{position : absolute; content : ''; width : 133px;height : 133px;background: url('https://xn--9m1brsq4t8pat9h0tcc2a24n65di7ash673j0cc04a.com/assets/images/main/visual-bg-new2.jpg')no-repeat center / contain;animation : rotate-text 6s infinite linear}

@keyframes rotate-text {
    0%{transform: rotate(0);}
    100%{transform: rotate(360deg);}
}
.visual-open b{font-size: 22px;/* font-family : Ofelia-text; */}

 /* (ȸÀü /Áß¾Ó ¿ä¼Ò¸¦ °¨½Ó) */
        .relative-wrapper {
            position: relative;
            width: 133px; /* ::after Å©±â¿¡ ¸ÂÃã */
            height: 133px; /* ::after Å©±â¿¡ ¸ÂÃã */
            display: flex;
            align-items: center;
            justify-content: center;
        }

        /* 4. Áß¾Ó ÄÜÅÙÃ÷ (.visual-open Ŭ·¡½º ±¸Á¶ »ç¿ë) */
        .visual-open {
            /* »ç¿ëÀÚ°¡ ¿äûÇÑ CSS ½ºÅ¸ÀÏ */
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            font-size: 19px;
            font-weight: 700;
            /* font-family: pretendard; (Inter·Î ´ëü) */
            background: #fff;
            border-radius: 50%;
            color: #06033C;
            position: absolute;
            width: 102px;
            height: 102px;
            line-height: 1.1em;
            text-align: center;
            gap: 5px;
            z-index: 10;
            box-shadow: 0 5px 15px rgba(0,0,0,0.3);
            /* Áß¾Ó ¿øÀÇ »¡°£»ö Å׵θ® Ãß°¡ (¹Ì°ü»ó) */
            border: 4px solid #ef4444; 
        }

        /* 5. ȸÀüÇÏ´Â PNG À̹ÌÁö (::after °¡»ó ¿ä¼Ò) */
        .visual-open::after {
            position: absolute; 
            content: ''; 
            width: 133px;
            height: 133px;
            /* Ç÷¹À̽ºÈ¦´õ À̹ÌÁö URL: ȸÀü ÅؽºÆ® PNG¸¦ ´ë½ÅÇÔ */
            /* ½ÇÁ¦ »ç¿ë ½Ã¿¡´Â background: url('/assets/images/main/visual-rotate-text.png') ... ·Î ´ëüÇØ¾ß ÇÕ´Ï´Ù. */
            background: url('https://placehold.co/133x133/000000/2dd4bf?text=ROTATING+TEXT') no-repeat center / contain;
            /* ::after°¡ .visual-open Áß¾Ó¿¡ ¿Àµµ·Ï ¿ÀÇÁ¼Â °è»ê ( (133-102)/2 = 15.5px ) */
            top: -15.5px;
            left: -15.5px;
            z-index: -1; /* Áß¾Ó ¿ø µÚ·Î ¹èÄ¡ */
            animation: rotate-text 6s infinite linear; /* »ç¿ëÀÚ°¡ ¿äûÇÑ ¾Ö´Ï¸ÞÀÌ¼Ç */
        }
        
        /* 6. Áß¾Ó ÄÜÅÙÃ÷ ³»ºÎ ±½Àº ÅؽºÆ® */
        .visual-open b {
            font-size: 22px;
            color: #dc2626; /* ±½Àº ±Û¾¾ »ö»ó Á¶Á¤ */
        }

        /* 7. ȸÀü ¾Ö´Ï¸ÞÀÌ¼Ç Å°ÇÁ·¹ÀÓ */
        @keyframes rotate-text {
            0% { transform: rotate(0); }
            100% { transform: rotate(360deg); }
        }

        /* 8. ¹ÝÀÀÇü ŸÀÌƲ Á¶Á¤ */
        @media (min-width: 640px) {
            .main-title {
                font-size: 2.25rem;
                line-height: 2.5rem;
            }
        }













.bn_00 {width: 100%; padding-top: 75px; height: 850px; margin: 0px auto; position: relative; background: url("../images/bn_00_bg.jpg") no-repeat bottom center #fdf2f8;; }
.bn_00 h5 { width: 100%; text-align: center; height: 114px; position: relative;}
.bn_00 ul { width: 1200px; margin: 0px auto; position: relative;}
.bn_00 li { width: 389px; height: 459px; float: left; position: relative; margin-right: 16px;}
.bn_00 li:last-child { margin-right: 0px;}
.bn_00 li a { width: 100%; display: block; position: relative;}
.bn_00 li img { display: block; transition: all .5s; transform: scale(1.0);}
.bn_00 li .imgBox { width: 100%; height: 336px; display: block; position: relative; overflow: hidden;}
.bn_00 li a:hover .imgBox img { transform: scale(1.05);}

.bn_01 {width: 100%; height: 790px; margin: 0px auto; position: relative; background: #fdf2f8; }
.bn_01::after { width: 1344px; height: 659px; display: block; position: absolute; top: 0px; left: 50%; margin-left: -960px; background: #fff; content: ""; z-index: 0;}
.bn_01 h5 { widtH: 300px; position: absolute; top: 205px; left: 50%; margin-left: 256px; z-index: 1;}
.bn_01 .box_02 { width: 777px; height: 519px; position: absolute; top: 196px;  left:50%; margin-left: -600px; overflow: hidden; transition: all .3s; z-index: 1;}	
.bn_01 .box_02 ul{ position: relative;}
.bn_01 .box_02 li { width: 100%; height: 519px;}

.bn_01 .box_03 { width: 600px; height: 370px; position: absolute; top: 345px; left: 50%; margin-left: -10px; z-index: 3; box-shadow: 0px 0px 30px rgba(0,0,0,.16); transition: all .3s;}

.bn_01 .box_03 .wrap { width: 100%; height: 370px; overflow: hidden; position: absolute; top: 0px; left: 0px;}
.bn_01 .box_03 ul { width: 3000px; height: 370px; position: relative;}
.bn_01 .box_03 li { width: 600px; float: left;}
.bn_01 .box_03 li a { display: block; position: relative;}
.bn_01 .box_03 li a .nth_02 { display: block; position: absolute; top: 286px; left: 75px; transform: rotateX(0deg); transition: all .3s;}
.bn_01 .box_03 li a:hover .nth_02 { transform: rotateX(360deg);  transition: all .3s;}

.bn_01 .btn_wrap { width: 120px; height: 57px; position: absolute; bottom: 5px; left: 50%; margin-left: 470px;  z-index:1;}
.bn_01 .btn_wrap a { display: block; float: left; position: absolute; top: 0px;}
.bn_01 .btn_wrap a:nth-child(1) { left: 0px;}
.bn_01 .btn_wrap a:nth-child(2) { right: 0px;}

.bn_02 { width: 100%; height: 810px; padding-top: 130px; position: relative; background: url("../images/bn_02_bg.jpg") no-repeat bottom center #fdf2f8; }
.bn_02 h5 { widtH: 100%; position: relative; margin: 0px auto 0px; height: 130px; text-align: center;}

.bn_02 .wrap{ width: 1200px;  height: 405px; position: relative; margin: 0px auto; overflow: hidden;}
.bn_02 ul { width: 3000px; position: relative;}
.bn_02 li { width: 385px; height: 405px; margin-right: 22px; position: relative; float: left; }
.bn_02 li a{ display: block; overflow: hidden; position: relative;}
.bn_02 li .imgBox { width: 100%; height: 100%; display: block; position: relative; overflow: hidden;}
.bn_02 li a img { height: 405px; transform: scale(1); transition: all .3s;}
.bn_02 li a:hover .imgBox img { transform: scale(1.05); transition: all .3s;}
.bn_02 li .txtBox { width: 100%; height: 180px;position: absolute; left:0; bottom:0; text-align:center; background:rgba(256,256,256,.9); overflow: hidden;z-index:10;}
.bn_02 li .txtBox p{margin-top:50px;padding:0;font-size:26px;font-weight:bold;color:#aa2f5b;}
.bn_02 li .txtBox span{font-size:18px;color:#777;}



.bn_02 .btn_wrap { width: 1300px; height: 1px; position: absolute; top: 350px; left: 50%; margin-left: -650px; z-index: 2;}
.bn_02 .btn_wrap a:nth-child(1) { float: left; display: block; position: absolute; top: 0px; left: 0px; background: rgba(0,0,0,0);}
.bn_02 .btn_wrap a:nth-child(2) { float: left;  display: block; position: absolute; top: 0px; right: 0px; background: rgba(0,0,0,0);}
.bn_02 .btn_wrap a img { position: relative; left: 0px; transition: all .4s;}
.bn_02 .btn_wrap a:nth-child(1):hover img { left: -10px;}
.bn_02 .btn_wrap a:nth-child(2):hover img { left: 10px;}

.bn_03 { width: 100%; position: relative; background: #fff;}
.bn_03 ul { width: 1200px; position: relative; margin: 0px auto;}
.bn_03 li { width: 300px; float: left;}
.bn_03 a { width: 100%; display: block; position: relative;}



@keyframes rtMotion {0%{transform: rotateZ(0deg)}50%{transform: rotateZ(360deg)}100%{transform: rotateZ(720deg)}}		


.bn_04 { width: 0%; height: 331px; left: 50%; position: relative; overflow: hidden;}
.bn4On .bn_04{ width: 100%; left: 0%; transition: all .8s ease-out 0s;}
.bn_04 a{ width: 50%; height: 100%; display: block; position: absolute; top: 0px; color: #fff; text-align: center; overflow: hidden;transition: all .4s;}
.bn_04 a:nth-child(1) { right: 50%;}
.bn_04 a:nth-child(2) { left: 50%;}
.bn_04 a img { position: relative; display: block; left: 50%; margin-left: -480px; transform: scale(1); transition: all .3s;}
.bn_04 a:hover img { transform: scale(1.15); transition: all .3s;}
.bn_04 a .nth_01 { width: 80%; position: absolute; top: 80px; left: 10%; font-size: 36px; line-height: 1;}
.bn_04 a .nth_02 { width: 80%; position: absolute; top: 135px; left: 10%; font-size: 18px; line-height: 1.4;}
.bn_04 a .nth_03 { width: 180px; height: 42px; border: 1px solid #fff; position: absolute; top: 204px; left: 50%; margin-left: -91px; font-size: 18px; line-height: 42px;}

.bn_05 { width: 100%; height: 250px; position: relative;}
.bn_05 a { width: 50%; height: 100%; display: block; float: left; position: relative; overflow: hidden; background: #375940;}
.bn_05 a:nth-child(2) {background: #2c9498;}
.bn_05 a img { display: block; position: relative; left: 50%; margin-left: -480px;}



.quick_wrap {
	width: 270px;
	height: 270px;
	display: block;
	position: absolute;
	top: 255px;
	left: 50%;
	margin-left: 360px;
	background: url(../img/main/quick_off.png) no-repeat top left;}	
	
	.quick_wrap li {
		width: 131px;
		height: 131px;
		float: left;}
		
		.quick_wrap li a {
			width: 100%;
			height: 100%;
			display: block;
			background: url(../img/common/ir_img.gif) repeat top left;}
	
.prizeList {
	width: 230px;
	height: 100px;
	font-family: 'Nanum Gothic', sans-serif;
	color: #000;
	border: 1px solid #c5c5c5;
	overflow-y: scroll;}
	
	.prizeList th,
	.prizeList td { border-bottom: 1px solid #c5c5c5; border-right: 1px solid #c5c5c5; text-align: center; padding: 2px 0px;}
	
	.prizeList th { background-color: #eee; line-height: 14px;}
	
		.prizeList th span { display: block; color: #f36f21;}

#popup_04 .prizeList {
	display: block;
	position: absolute;
	top: 120px;
	left: 25px;}



/***** side-menu *****/
.side_menu{ 
	position: fixed; right:-100px; top:230px; width:90px; height:550px; z-index:99000; text-align:center; padding:0;
	background: #aa2f5b ;}

.side_menu h2{font-weight:100;  font-family: 'Noto Sans KR', sans-serif; font-size:24px; line-height:110%; color:#8dc63f; opacity:0.9; padding-top:120px;}
.side_menu h2 span{font-weight:400;font-size:24px;color:#eee; opacity:0.8; }

.side_menu p{font-weight:400;  font-family: 'Noto Sans KR', sans-serif; font-size:12.5px; line-height:160%; color:#fff; padding-top:25px; opacity:0.7;}

.side_menu ul{ padding-top:0px;}
.side_menu ul li{ padding-top:0px;}
.side_menu ul li>a>img{opacity:0.8; transition:0.1s;}
.side_menu ul li>a>img:hover{opacity:1;}

.side_menu ul li>a>span{text-align:center;font-size:12px;font-family:'Noto Sans KR';color:#ccc;border-bottom:1px solid #555; display:block; width:100%; height:40px; line-height:40px;}
.side_menu ul li>a>span:hover{color:#fff;}

.side_menu .custom{ text-align:center; background:#ab7b4a; color:#fff; font-size:14px;font-weight:400;  font-family: 'Noto Sans KR', sans-serif; height:30px; padding-top:10px; width:162px; margin:10px auto 0;}
.side_menu .jogam{position:absolute; bottom:120px; text-align:center;border-top:1px solid #555; border-bottom:1px solid #555; height:40px; line-height:40px; width:100%; margin:0 auto;}
.side_menu .jogam a{color:#ddd; font-size:12px;font-weight:400; display:block; font-family:'Noto Sans KR'; }
.side_menu .reserv{ text-align:center; background:#69a715; color:#fff; font-size:14px;font-weight:400;  font-family: 'Noto Sans KR', sans-serif; height:30px; padding-top:10px; width:162px; margin:10px auto;}
.side_menu .side_logo{position:absolute;bottom:0;}
.side_menu .btn_top{position:absolute;bottom:0;margin:0;padding:0;line-height:0;}
.side_inner{ position:fixed; right:-600px; opacity:1;z-index:998;filter:drop-shadow(5px 5px 5px rgba(0,0,0,0.3)); height:100%; background:#eeefef; overflow:scroll;}

.pb30{padding-bottom:30px:}