@charset "utf-8";

/****************************************************************************************************************************************
공통 시작
*****************************************************************************************************************************************/
body {position: relative; margin:0; padding:0; width: 100%;}


/****************************************************************************************************************************************
header 시작
*****************************************************************************************************************************************/
header {position: fixed; top:0; left:0; right:0; z-index: 999; margin:0 auto; padding:0 100px; width: 100%; background: url('../img/topback.png') center no-repeat; background-size: cover;}
.mo-left,
.mo-right {display: none;}

/* top-logo */
.top-logo {position:absolute; top: 3px; left: 50%; z-index: 1; padding:10px 0; height: 140px; display: block; transform: translateX(-50%);}
.top-logo > img {width: 100%; height: 100%; cursor: pointer;}

/* tnb */
.tnb {position: relative; margin:0 auto; padding:0; width: 100%; height: 50px; display: flex; justify-content: space-between; align-items: center;}

.left-tnb {position: relative; display: flex; align-items: center;}
.openBtn {display: none;}
.tnb-notice {position: relative; margin:0; padding:5px 10px; display: flex; justify-content: flex-start; align-items: center; gap: 5px; background: #dfcdb5;}
.tnb-notice > img {width: 20px;}
.tnb-notice > marquee {font-size:13px; color: #4f5051;}

.right-tnb {position: relative;}
ul.tnb-list {position: relative; margin:0; padding:0; display: flex; justify-content: flex-end; align-items: center; gap:15px;}
ul.tnb-list > li {font-weight: 500; transition:all 0.2s; color: #724d42; cursor: pointer;}

/* nav */
.nav {position: relative; margin:0 auto; padding:0; width: 100%; height: 95px; display: flex; justify-content: space-between; gap: 200px; align-items: center;}
.left-nav {position: relative; margin:0; padding:0; display: flex; justify-content: flex-start; align-items: center;}
.right-nav {position: relative; display: flex; justify-content:flex-end; align-items: center;}
.left-nav,
.right-nav {width: calc(100% / 2 - 200px);}
ul.nav-list {position: relative; margin:20px 0 0 0; padding:0; width: 100%; display: flex; justify-content: space-between; align-items: center; gap:15px;}
ul.nav-list > li {font-size:18px; font-weight: 500; transition:all 0.2s; color: #724d42; cursor: pointer;}

@media (hover: hover) and (pointer: fine) {
    ul.tnb-list > li:hover,
    ul.nav-list > li:hover {transform: scale(1.05);}
}

/****************************************************************************************************************************************
contents 시작
*****************************************************************************************************************************************/
.contents {position: relative; margin-top: 145px; padding:10px 0; min-height: calc(100% - 145px); display: flex;}


/****************************************************************************************************************************************
left-side 시작
*****************************************************************************************************************************************/
.left-side {order:1; position: relative; margin:0 auto; padding:0; width: 280px;}
.leftSide-inner {position: relative; margin:0 auto; padding:0 5px 0 0; width: 100%; background: #fff;}

ul.left-menuList {position: relative; margin: 0; padding:0 5px; width: 100%; display: flex; justify-content: center; gap:10px; flex-wrap: wrap;}
ul.left-menuList > li {width: calc(100% / 3 - 10px); cursor: pointer;}
ul.left-menuList > li > img {transition: 0.2s ease;}

@media (hover: hover) and (pointer: fine) {
    ul.left-menuList > li:hover > img {transform: scale(1.03);}
}

/* left-spotList */
ul.left-spotList {position: relative; margin:10px auto; padding:0 10px; width: 100%;}
ul.left-spotList > li {position: relative; margin:3px auto; padding:10px 10px; width: 100%; text-align: left; color:#5a5a5a; background: #fff; border: 2px #f3ede5 solid; border-radius: 8px; transition: 0.2s ease; cursor: pointer;}
ul.left-spotList > li > svg {color:#bda380;}
ul.left-spotList > li > span {position: absolute; right:10px; width: 35px; font-size: 12px; text-align: center; color:#fff; background: #7f6154; border-radius: 5px;}

@media (hover: hover) and (pointer: fine) {
    ul.left-spotList > li:hover {transform: scale(1.03);}
}

/* left-banner */
.left-banner {position: relative; margin:10px auto; padding:0 10px; width: 100%;}
.left-banner > a {display: block; position: relative; margin:5px 0; padding:0; width: 100%;}
.banner-txt {position: absolute; bottom:3px; left:90px; z-index: 1; margin:0 auto; width: 160px; text-align: center; font-size: 25px; font-weight: 900; letter-spacing: -1px; color:#d13030;}

/****************************************************************************************************************************************
center-wrap 시작
*****************************************************************************************************************************************/
.center-wrap {order:2; position: relative; width: calc(100% - 560px);}
.page-tit {position:relative; margin-bottom: 8px; padding:0; width: 100%; height: 40px; display: flex; justify-content: space-between; align-items: center; font-size: 18px; font-weight: bold; color: #6f4304; border-bottom: 1px solid #ece7e0;}

/****************************************************************************************************************************************
right-side 시작
*****************************************************************************************************************************************/
.right-side {order:3; position: relative; margin:0 auto; padding:0; width: 280px; height: 100%; background: #fff;}
.right-inner {position: absolute; top: 0; right:0; z-index: 2; padding:0 2px 0 10px; width:100%; transition: 0.5s;}

/* right-info */
.right-info {position: relative; margin:0; padding: 15px 10px; width: 100%; border: 3px solid #ece7e0;}

.info-top {position: relative; margin:0; padding:0; width: 100%; display: flex; align-items: center;}
.info-top > img {margin-right:10px; width: 50px;}
.info-nickname {font-size: 20px; font-weight: 900; color: #5b0000;}

ul.info-list {position: relative; margin:15px 0 0 0; padding: 5px 15px; width: 100%; background: #f0f0f0;}
ul.info-list > li {position: relative; margin:0; padding:3px 0; width: 100%; display: flex; align-items: center; font-weight: 500; color: #7f6154;}
ul.info-list > li > img {margin-right:5px; width: 18px;}
ul.info-list > li > b {margin:0 3px;}

ul.mo-rightBtn,
.mo-logoutBtn,
.mo-partnerBtn {display: none;}

.mo-logoutBtn {margin:10px auto; padding:10px 0; width: 100%; text-align: center; font-size: 15px; font-weight: 600; color:#999; background: #fff; border: 2px solid #cacaca;}
.mo-partnerBtn {margin:10px auto 0 auto; padding:10px 0; width: 100%; text-align: center; font-size: 15px; font-weight: 600; color:#fff; background: #8b5cf6; border: 2px solid #6d28d9;}

/* right-cart */
.right-cart {position: relative; margin:10px 0; padding: 15px 10px 5px 10px; width: 100%; background: #fff; border: 3px solid #ece7e0;}
.cart-tit {position: relative; margin:0; padding:0; width: 100%; display: flex; justify-content: space-between; align-items: center;}
.cart-tit > span {font-size:18px; color: #6f4304;}

/* btn-cartMove */
.btn-cartMove {position: relative; display: inline-block; width: 50px; height: 26px;}

/* 실제 체크박스 숨김 */
.btn-cartMove input {opacity: 0; width: 0; height: 0;}

/* 스위치 배경 */
.btn-cartMove-slider {position: absolute; inset: 0; background: #ddd; border-radius: 38px;transition: background-color 0.25s; cursor: pointer;}

/* 동그란 버튼 */
.btn-cartMove-slider::before {content: ""; position: absolute; width: 18px; height: 18px; left: 4px; top: 4px; background: #b6b6b6; border-radius: 50%; transition: transform 0.25s;}

/* 체크되었을 때 배경색 */
/* .btn-cartMove input:checked + .btn-cartMove-slider {background-color: #4CAF50;} */

/* 체크되었을 때 동그라미 이동 */
.btn-cartMove input:checked + .btn-cartMove-slider::before {transform: translateX(24px); background: #fff;}

/* cartList */
.choice-txt {margin:0 auto; padding:10px 10px; width: 100%; text-align: center; font-size: 12px; color: #6f4304;}

.cartList-box {position: relative; width: 100%;}
ul.cart-list {position: relative; margin-top: 5px; padding: 8px 4px; width: 100%; background: #f7f7f7; border: 1px #ece7e0 solid;}
ul.cart-list > li.list-date {justify-content: space-between;}   
ul.cart-list > li {position: relative; margin:0; padding:2px 0; width: 100%; display: flex; gap:3px; justify-content: flex-start; align-items: center; color:#000;}
ul.cart-list > li,
ul.cart-list > li div,
ul.cart-list > li span {font-size: 12px; font-weight: 500;}

ul.cart-list > li:nth-child(2),
ul.cart-list > li > font {font-size: 11px; font-weight: 500; color:#062764;}
.list-close {margin-left:3px; cursor: pointer;}

/* cart-money */
.cart-money {position: relative; margin:5px 0; padding:3px 3px; width: 100%; border: 6px solid #f0f0f0;}
.cart-moneyTit {margin:-3px -3px; padding:2px 0 5px 0; text-align: left; color: #6f4304; background:#f0f0f0;}

.cart-input {margin:3px 0; width: 100%; height: 36px; display: flex; align-items: center; background: #f9f9f9;}
.cart-input > input {padding:0 10px; width:100%; text-align:left; color: #714430; font-weight: 500; background: none; border: none;}
.cart-input > hr {width: 2px; height: 11px; background: #ae987a;}
.cart-input > button {padding:7px 15px; font-weight: 500; color: #714430; background: none; border: none;}

ul.cartmoney-list {position: relative; margin:4px 0; padding: 0; width: 100%; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 4px;}
ul.cartmoney-list > li {position: relative; width: calc(100% / 3 - 4px);}
ul.cartmoney-list > li > a {display: block; margin:0 auto; line-height: 35px; text-align: center; color: #714403; background: #eee6d9;}

.cart-btns {position: relative; margin:4px 0; padding:0; width: 100%; display: flex; justify-content: space-between; align-items: center;}
.cart-btns > button {position: relative; margin:0 ; padding:0; line-height: 35px; text-align: center; font-weight: 500; color:#fff; border: none; transition: 0.4s; overflow: hidden;}
.btn-del {width:49%; background: #737373;}
.btn-max {width:49%; background: #c25151;}
.btn-clear {width:39%; background: #6ca7d1;}
.btn-betting {width:60%; background: #c18162;}
.btn-clear::before,
.btn-betting::before {content: ""; position: absolute; top: 0; left: -200%; width: 100%; height: 150%; background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.4),transparent);transform: skewX(-20deg);}

ul.cart-table {position: relative; margin:6px 0; padding:0; width: 100%; display: flex; justify-content:space-between; align-items: center; flex-wrap: wrap;}
ul.cart-table > li {position: relative; margin:0; padding: 0 5px; width: calc(100% / 2); height: 30px; line-height: 30px; font-weight: 500; color:#714430; border-bottom: 1px #f3ede6 solid;}
ul.cart-table > li:nth-child(1n) {text-align: left;}
ul.cart-table > li:nth-child(2n) {text-align: right;}

@media (hover: hover) and (pointer: fine) {
    .cart-input > button:hover {background:#efefef;}
    ul.cartmoney-list > li > a:hover {background: #eee6d9aa;}
    .btn-del:hover {background: #a2a2a2;}
    .btn-max:hover {background: #d68b8b;}
    .btn-clear:hover {background: #9dc4e0;}
    .btn-betting:hover{background: #d6ab96;}
    .btn-clear:hover::before,
    .btn-betting:hover::before{animation: shine 1s ease 0s;}
}

.right-banner {display: none;}

/****************************************************************************************************************************************
footer 시작
*****************************************************************************************************************************************/
footer {position: relative; margin:0 auto; padding: 10px 0; width: 100%; height: 213px; text-align: center; color: #4d3730; background: #f3f3f3;}
footer > h3 {margin:0 auto; padding: 10px 0; width: 100%; text-align: center;}
footer > h3 > img {width: 100px;}
footer > .copyright {position: relative; margin:10px auto; padding:0; width: 100%; text-align: center;}
footer > .copyright > p {margin:0 auto; padding:0; width: 100%; text-align: center; font-size:11px; color: #4d3730;}

/* mo-footer */
.mo-footer {display: none;}

/****************************************************************************************************************************************
미디어쿼리문 시작
*****************************************************************************************************************************************/
@media (max-width:1400px) {  
    header {padding:0 20px;}    
}/* 미디어쿼리문 끝 */

@media (max-width:1280px) {  
    /* tnb */
    ul.tnb-list > li {font-size: 13px;}

    /* nav */
    .nav {gap:120px}
    .left-nav, 
    .right-nav {width: calc(100% / 2 - 120px);}
    ul.nav-list > li {font-size: 14px;}

    /* left-side */
    .openBtn {display:inline-block; margin-right: 10px;}
    .openBtn > svg {font-size: 20px; cursor: pointer;}

    .left-side {position: fixed; top: 0; left: -120%; bottom:0; z-index: 99; display: block; padding:0; width:100%; height:100%; background: rgba(0,0,0,0.5);}
    .left-side.active {left: 0; width:100%;}

    .leftSide-inner {position: fixed; top: 0; left: -120%; z-index: 99; display: block; padding:10px 0 0 0; width:100%; height:100%; overflow-y: auto;}
    .leftSide-inner.active {left: 0; width:280px;}
    
    /* center-wrap */
    .center-wrap {width: calc(100% - 280px);}
}/* 미디어쿼리문 끝 */

@media (max-width:992px) { 
    /* header */
    header {padding:0 10px; height: 60px;}

    .top-logo {padding:0; width: 50px; height: unset;}

    .mo-left {position: absolute; top:19px; left:10px; z-index: 1; display: flex; justify-content: flex-start; align-items: center; gap:10px;}
    .mo-messageBtn > img {width: 28px; cursor: pointer;}
    .mo-barBtn {display: block; position: relative; width: 27px; cursor: pointer;}
    .mo-barBtn > span {display: block; margin: 0 auto 6px auto; width:100%; height: 3px; background: #663e35;}
    .mo-barBtn > span:first-child {position: relative; margin-top: 0; top: 0; transition: top .2s .2s, transform .2s 0s;}
    .mo-barBtn > span:nth-child(2) {opacity: 1; transition: opacity .3s;}
    .mo-barBtn > span:last-child {position: relative; top: 0; margin-bottom: 0; transition: top .15s .15s, transform .15s 0s;}
    .mo-barBtn.active > span:first-child {top: 9px; transform: rotate(-44deg); transition: top .15s 0s, transform .15s .15s, color .2s .2s;}
    .mo-barBtn.active > span:nth-child(2) {opacity: 0}
    .mo-barBtn.active > span:last-child {top: -9px; transform: rotate(44deg); transition: top .15s 0s, transform .15s .15s;}

    .mo-right {display: block; position: absolute; top:15px; right:10px; z-index: 1;}
    .mo-userBtn > img {width: 25px; cursor: pointer;}

    /* tnb */
    .tnb {position: fixed; top: 88px; right: -120%; z-index: 99999; display: block; align-items: unset; margin:0 auto; padding:10px 10px; width:100%; height:100%; background: #fff; overflow-y: auto;}
    .tnb.active {right: 0; width:100%;}
    
    .openBtn {display: none;}

    .tnb-notice {position: fixed; top:60px; left:0; right:0; width: 100%;}

    ul.tnb-list {margin:20px 0; justify-content: center; gap:5px;}
    ul.tnb-list > li.mo-hid {display: none;}
    ul.tnb-list > li {margin:0 auto; padding:8px 5px; width: calc(100% / 2 - 5px); text-align: center; font-size: 15px; font-weight: 600; color:#fff; cursor: pointer;}
    ul.tnb-list > li.tnb-mypage {background: #6ca7d1;}
    ul.tnb-list > li.tnb-logout {background: #c25151;}

    /* nav */
    .nav {display: none;}

    /* contents */
    .contents {margin-top:88px; padding:0 0 65px 0;}
    .page-tit {margin-top:10px; padding:0 10px;}


    /* left-side */
    .left-side {top: 88px; background:none;}

    .leftSide-inner {top: 88px; padding: 10px 0 65px 0; height: calc(100% - 88px); transition: all 0.3s;}
    .leftSide-inner.active {width:100%;}

    ul.left-spotList {display: none;}

    .left-banner > a > img {width: 100%;}

    /* right-side */
    .right-side {position: fixed; top: 88px; right: -120%; z-index: 99; display: block; padding: 10px 0 65px 0; width:100%; height: calc(100% - 88px); transition: all 0.3s; overflow-y: auto;}
    .right-side.active {right: 0; width:100%;}

    .right-inner {position: static; top: auto !important; transition:unset; padding:10px 10px;}

    ul.mo-rightBtn {position: relative; margin:10px auto; padding:0; width: 100%; display: flex; justify-content: space-between; align-items: center; gap:5px}
    ul.mo-rightBtn > li {margin:0 auto; padding:0; width: calc(100% / 3 - 5px); text-align: center; cursor: pointer;}

    .right-cart {display: none;}

    /* right-banner */
    .right-banner {display:block; position: relative; margin:10px auto; padding:0; width: 100%;}
    .right-banner > a {display: block; position: relative; margin:5px 0; padding:0; width: 100%;}
    .right-banner > a > img {width: 100%;}
    .banner-txt {position: absolute; bottom:3px; right:0; z-index: 1; margin:0 auto; width: 160px; text-align: center;  font-size:25px; font-weight: 900; letter-spacing: -1px; color:#d13030;}

    .mo-logoutBtn {display: block;}
    .mo-partnerBtn {display: block;}

    /* center-wrap */
    .center-wrap {width: 100%;}

    /* footer */
    footer {display: none;}
    .mo-footer {position:relative; display: block; position: fixed; bottom:0; left:0; right:0; z-index: 999; margin:0; padding:0; width: 100%; background: #fff; box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.15);}

    ul.mo-ft-menu {position:relative;  display:flex; justify-content: center; align-items: center; margin:0 auto; width: 100%; height: 60px;}
    ul.mo-ft-menu > li {position:relative; margin:0 auto; padding:5px 5px; width: calc(100% / 5); display: flex; align-items: center; justify-content: center; flex-direction: column;}
    ul.mo-ft-menu > li > img {height: 45px; cursor: pointer;}
}/* 미디어쿼리문 끝 */