@charset "utf-8";

/*css animation*/
/* @-webkit-keyframes kenburns-top {
  0% {

    -webkit-transform: scale(1) translateY(0);
            transform: scale(1) translateY(0);
    -webkit-transform-origin: 50% 16%;
            transform-origin: 50% 16%;

  }
  100% {

    -webkit-transform: scale(1.25) translateY(-15px);
            transform: scale(1.25) translateY(-15px);
    -webkit-transform-origin: top;
            transform-origin: top;

  }
}
@keyframes kenburns-top {
  0% {

    -webkit-transform: scale(1) translateY(0);
            transform: scale(1) translateY(0);
    -webkit-transform-origin: 50% 16%;
            transform-origin: 50% 16%;

  }
  100% {

    -webkit-transform: scale(1.25) translateY(-15px);
            transform: scale(1.25) translateY(-15px);
    -webkit-transform-origin: top;
            transform-origin: top;

  }
} */



/* --------------------------------------------
 * wrap1
/* ------------------------------------------ */

/* 메인 비주얼 */
#main #wrap1 {padding-bottom: 70px; background: var(--color-background);}
#main .main-visual{height: 385px; border-radius: var(--radius-xl); background-image: url(../images/main_visual.png); background-position: center; background-repeat: no-repeat; background-size: cover; box-shadow: var(--shadow-lg); color: var(--color-primary-foreground);}
#main .visual-txt{padding: 90px 0 0 100px; font-weight: 400; letter-spacing: -2px;}
#main .visual-txt h3{font-size: 24px;}
#main .visual-txt h1{padding-top: 20px; font-size: 45px; line-height: 60px;}
#main .visual-txt h1 span{font-weight: 800;}
#main .visual-txt p{padding-top: 30px; color: var(--color-muted-foreground); font-size: 18px; line-height: 24px; letter-spacing: -1px;}

/* 당첨 */
#main .win{width: 100%; margin-top: 20px;}
#main .win-record{width: 390px; height: 390px; padding: 30px; border-radius: var(--radius-xl); background: var(--color-foreground); box-shadow: var(--shadow-lg);}
#main .win-result{width: 790px; height: 390px; padding: 30px; border-radius: var(--radius-xl); background: var(--color-card); box-shadow: var(--shadow-lg);}
/* #main .win-info{gap: 20px;} */
#main .win h3{font-size: 24px; font-weight: 700;}
#main .win-record h3{display:flex; align-items:center; justify-content:space-between; color: var(--color-card-foreground);}
#main .win-record h3 .sm {color: var(--color-card-foreground); font-size:14px;  font-weight:400; vertical-align:baseline; letter-spacing:0; opacity:0.7;}

#main .win-result h3{color: var(--color-foreground); font-weight: 600;}
#main .lotto-date{color: var(--color-muted-foreground); font-size: 14px; font-weight: 400; vertical-align: baseline;}
#main .win .list-tit{width: 100%; height: 40px; margin: 20px 0 10px 0; padding: 20px; border-radius: var(--radius-lg); color: var(--color-primary-foreground); font-size: 15px; font-weight: 600; text-align: center;}
#main .win-record .list-tit{background: var(--color-primary);}
#main .win-result .list-tit{background: var(--color-foreground);}
#main .win-list{padding: 0 20px; border-radius: 10px; font-size: 14px;}
#main .win-record .win-list{background: #fff;}
#main .win-result .win-list{background: #f9f9f9;}
#main .win-list li{display: flex; justify-content: space-between; padding: 15px 0; border-bottom: 1px dotted #ddd;}
#main .win-record .list-tit span:nth-child(1){width: 20%;}
#main .win-record .list-tit span:nth-child(2){width: 50%;}
#main .win-record .list-tit span:nth-child(3){width: 30%;}
#main .win-record .win-list li span:nth-child(1){width: 20%;}
#main .win-record .win-list li span:nth-child(2){width: 50%;}
#main .win-record .win-list li span:nth-child(3){width: 30%;}
/*  */
#main .win-result .list-tit span:nth-child(1){width: 10%;}
#main .win-result .list-tit span:nth-child(2){width: 25%;}
#main .win-result .list-tit span:nth-child(3){width: 20%;}
#main .win-result .list-tit span:nth-child(4){width: 20%;}
#main .win-result .list-tit span:nth-child(5){width: 25%;}
#main .win-result .win-list li span:nth-child(1){width: 10%;}
#main .win-result .win-list li span:nth-child(2){width: 25%;}
#main .win-result .win-list li span:nth-child(3){width: 20%;}
#main .win-result .win-list li span:nth-child(4){width: 20%;}
#main .win-result .win-list li span:nth-child(5){width: 25%;}
#main .win-list li:last-child{border-bottom: none;}

/* 로또볼 */
#main .win-num{gap: 8px;}
#main .win-num .ball{width: 31px; border-radius: 50%; color: #fff; font-size: 17px; font-weight: 600; line-height: 31px;}
#main .win-num .num1, .num2, .num3, .num4, .num5, .num6, .num7, .num8, .num9, .num10 {background: #fbc400;}
#main .win-num .num11, .num12, .num13, .num14, .num15, .num16, .num17, .num18, .num19, .num20 {background: #69c8f2;}
#main .win-num .num21, .num22, .num23, .num24, .num25, .num26, .num27, .num28, .num29, .num30 {background: #ff7272;}
#main .win-num .num31, .num32, .num33, .num34, .num35, .num36, .num37, .num38, .num39, .num40 {background: #aaa;}
#main .win-num .num41, .num42, .num43, .num44, .num45 {background: #b0d840;}

/* 중간 메뉴 버튼 */
#main .middle-btn{width: 100%; margin-top: 20px; padding: 40px 0; border-radius: var(--radius-xl); background: var(--color-card); box-shadow: var(--shadow-lg);}
#main .middle-btn .display-flex{gap: 20px;}
#main .notice-btn{flex: 1; padding: 0 30px 0 60px;}
#main .membership-btn{flex: 1; padding: 0 60px; border-left: 1px solid var(--color-border); border-right: 1px solid var(--color-border);}
#main .inquiry-btn{flex: 1; padding: 0 60px 0 30px;}
#main .middle-btn h3{color: var(--color-foreground); font-size: 22px; font-weight: 600;}
#main .middle-btn p{margin-top: 5px; color: var(--color-muted-foreground); font-size: 15px; font-weight: 400;}

/* 배너 */
#main .banner{width: 100%; height: 240px; position: relative; justify-content: flex-end; margin-top: 50px; padding: 40px 50px; border-radius: var(--radius-xl); background: var(--color-primary); box-shadow: var(--shadow-xl); color: var(--color-primary-foreground);}
#main .banner-img{position: absolute; bottom: 0; left: 40px;}
#main .banner-txt{align-items: flex-end; gap: 30px;}
#main .banner p{color: var(--color-primary-foreground); font-size: 16px; font-weight: 500;}
#main .banner h2{margin-top: 10px; font-size: 30px; font-weight: 700; line-height: 40px;}
#main .banner form{align-items: flex-start;}
#main .banner .form-tel{width: 240px; height: 40px; margin: -2px 0 10px 0; padding: 20px; border-radius: var(--radius-xl); background: var(--color-card);}
#main .banner #bn-tel{width: 100%; padding-left: 20px;}
#main .banner form label{font-size: 15px; font-weight: 300;}
#main .banner form a{color: var(--color-primary-foreground);}
#main .banner button{width: 110px; line-height: 40px; margin: -3px 0 0 5px; border-radius: var(--radius-xl); background: var(--color-foreground); color: var(--color-card-foreground); font-size: 16px; font-weight: 700;}



/* --------------------------------------------
 * wrap2
/* ------------------------------------------ */
#main #wrap2 {padding: 90px 0; background: var(--color-card);}

/* 멤버십 */
#main .member h2{color: var(--color-foreground); font-size: 30px; font-weight: 600;}
#main .member p{margin-top: 5px; color: var(--color-muted-foreground); font-size: 16px; font-weight: 400;}
#main .member-img{position:relative; width: 285px; height: 225px;}
#main .member-img .img { border-radius: var(--radius-lg); overflow: hidden;}
#main .member-img .soldout {position:absolute; top:50%; left:50%; width:120px; transform:rotate(-30deg);}

#main .member-list{margin-top: 40px;}
#main .member-list .display-flex{align-items: flex-start; margin-top: 20px;}
#main .member-info h5{color: var(--color-foreground); font-size: 20px; font-weight: 600;}
#main .member-info p{margin-top: 10px; color: var(--color-muted-foreground); font-size: 16px; font-weight: 500;}
#main .member-info .member-price{margin-top: 15px; color: var(--color-foreground); font-size: 30px; font-weight: 800;}
#main .member-btn{width: 50px; line-height: 50px; border-radius: var(--radius-lg); background: var(--color-secondary); color: var(--color-secondary-foreground); font-size: 15px; font-weight: 600; transition: all 0.5s ease-in-out;}
#main .member-btn:hover{background: var(--color-foreground);}
#main .member-soldout{color: var(--color-destructive) !important;}
#main .member-inquiry{background: var(--color-destructive);}
#main .member-inquiry:hover{background: var(--color-destructive);}
a.actNone {pointer-events: none; cursor: default;}
.img-responsive {width:100%;}


/* login */
#main .user-login input{width: 100%; border: 1px solid #eaeaea; font-size: 14px;}
#main .find-join{justify-content: flex-start; gap: 12px; margin-bottom: 8px;}
#main .find-join a{color: #444; font-size: 14px;}
#main .login-btn{width: 100%; margin-bottom: 6px; background: #135197; font-weight: 700;}
/* #main .member-btn{width: 100%; background: #3b9c50; font-weight: 700;} */
/* #main .sns-login{gap: 6px;}
#main .naver-btn{width: 50%; background: #35b227; font-size: 13px; font-weight: 600;}
#main .kakao-btn{width: 50%; background: #f8dc3b; color: #3a2223; font-size: 13px; font-weight: 600;} */
#main .account p{margin-bottom: 12px; font-size: 17px; font-weight: 700; line-height: 24px;}
#main .account span{font-size: 13px; font-weight: 400; line-height: 18px;}

/* login after */
#main .m_my {justify-content: center; gap: 24px; margin-bottom: 24px;}
#main .m_my .my_p_name {align-items: flex-start; flex-direction: column; gap: 5px;}
#main .m_my .mb_normal {display: block; width: 75px; height: 75px;}
#main .m_my .mb_normal.mb_0 {background: url(../images/level_basic.png) no-repeat center; background-size: cover;}
#main .m_my .mb_normal.mb_1 {background: url(../images/level_economy.png) no-repeat center; background-size: cover;}
#main .m_my .mb_normal.mb_2 {background: url(../images/level_gold.png) no-repeat center; background-size: cover;}
#main .m_my .mb_normal.mb_3 {background: url(../images/level_vip.png) no-repeat center; background-size: cover;}
#main .m_my .mb_normal.mb_4 {background: url(../images/level_vvip.png) no-repeat center; background-size: cover;}
#main .user-login ul{padding: 18px 24px; border: 1px solid #eee;}
#main .user-login ul li a{color: #999; font-size: 15px;}
#main .mybtn{justify-content: space-around; padding: 24px;}
#main .mybtn a{color: #444; font-size: 15px;}