@import url(reset.css);
@import url(font.css);
html { font-size: 62.5%; font-family: 'Pretendard', sans-serif; background: #111219; } 
body,
button,
input,
select,
table,
textarea { font-family: 'Pretendard', sans-serif; color: #fff; } 
* { margin: 0; padding: 0; box-sizing: border-box; } 
body { font-size: 1.8rem; line-height: 1.4; } 
button { border: 0 none; cursor: pointer; background: none; } 
a,
a:active { text-decoration: none; color: inherit; } 
img { max-width: 100%; vertical-align: top; } 
ul,
ol,
li { list-style: none; } 
input { -webkit-appearance: none; -moz-appearance: none; appearance: none; border: 0 none; } 

textarea::placeholder,
input::placeholder { color: #737379; opacity: 1; } 
input::-moz-placeholder,
input::-webkit-input-placeholder { color: #737379; opacity: 1; } 

.hidden,
caption { position: absolute; clip: rect(0 0 0 0); width: 1px; height: 1px; margin: -1px; overflow: hidden; } 

.underline { text-decoration: underline; } 
.common-inner { margin: 0 auto; max-width: 1100px; padding: 0 20px; } 
.common-check1 { display: flex; gap: 8px; align-items: center; cursor: pointer; } 
.common-check1 i { border-radius: 4px; border: 2px solid #2f3236; width: 24px; height: 24px; } 
.common-check1 input[type='checkbox']:hover + i { border-color: #2792d1; } 
.common-check1 input[type='checkbox']:checked + i { background: url(../images/icon-checked.png) no-repeat 0 0; background-size: 100%; border: 0 none; border-radius: 0; } 

.common-checkbox { display: flex; margin-top: 1.5rem;}
.common-checkbox.right { justify-content: flex-end; }


/* 드롭다운 */
.dropdown-list { margin-top: 5rem; } 
.dropdown-box01 { position: relative; width: 100%; background: #fff; font-size: 15px; border-radius: 1.5rem;  } 
.dropdown-box01.type1 { width: 100%; } 
.dropdown-box01 + .dropdown-box01 { margin-top: 2rem; } 
.dropdown-box01 .dropdown-toggle { position: relative; text-align: left; color: #18191f; width: 100%; padding: 3rem; cursor: pointer; font-size: 2.2rem; font-weight: 500; } 
.dropdown-box01 .dropdown-toggle.open { border-radius: 8px 8px 0 0; } 
.dropdown-box01 .dropdown-toggle:before { content: ''; position: absolute; right: 20px; top: 50%; margin-top: -10px; width: 20px; height: 20px; background: url(../images/icon-arrow-down.png) no-repeat center; background-size: auto 2.4rem; transition: 0.3s; } 
.dropdown-box01 .dropdown-toggle.open:before { transform: rotateX(180deg); } 
.dropdown-box01 .dropdown-toggle:hover { color: #000; } 
.dropdown-box01 .dropdown-toggle:hover:before { filter: opacity(1); } 
.dropdown-box01 .dropdown-con { display: flex; align-items: center; padding: 0 3rem 3rem; color: #999; cursor: pointer; } 

/* 팝업 */
.popup { height: 100vh; position: fixed; z-index: 5; top: 0; left: 0; right: 0; 
	background: rgba(0, 0, 0, 0.7); display: flex; align-items: center; 
	justify-content: center; visibility: hidden; opacity: 0; transition: 0.3s; 
} 
.popup.on { visibility: visible; opacity: 1; } 
.popup.on .popup-body { transform: translateY(0); transition: 0.3s 0.2s; } 
.popup .mask { position: absolute; left: 0; right: 0; bottom: 0; top: 0; } 
/* .popup-body { transition: 0.3s; width: 100%; max-width: 1800px; padding: 0 20px; transform: translateY(100%); box-shadow: -10px 10px 20px 0px rgba(0, 0, 0, 0.1); }  */
.popup-inner {  } 
.popup-body .btn-wrap { margin-top: 60px; } 

@media (min-width: 768px) {  /* pc */
	.popup-body { 
		transition: 0.3s; width: 50%; max-width: 1800px; height: 80%; 
		padding: 0 20px; transform: translateY(100%); 
		box-shadow: -10px 10px 20px 0px rgba(0, 0, 0, 0.1); 
	}
}

/* 모바일에서 팝업 크기 설정 */
@media (max-width: 767px) {
	.popup-body { 
		transition: 0.3s; width: 95%; max-width: 1800px; 
		padding: 0 20px; transform: translateY(100%); 
		box-shadow: -10px 10px 20px 0px rgba(0, 0, 0, 0.1); 
	}
}


.popup .youtube-box { position:relative; padding-top:56.25%}
/* .popup .youtube-box { position:relative; }  */  
.popup iframe { position: absolute; top: 0;left:0; width: 100%; height: 100%;}

.popup .popup-close-btn { position: absolute; right:22px; top: 6px; width: 20px; height: 20px; background: url(../images/icon-close1.png) no-repeat ; opacity: 0; background-size: cover; transition: 0.3s 0.3s;}
.popup.on .popup-close-btn { opacity: 1;}

/*
.popup { height: 100vh; position: fixed; z-index: 5; top: 0; left: 0; right: 0; background: rgba(0, 0, 0, 0.7); display: flex; align-items: center; justify-content: center; visibility: hidden; opacity: 0; transition: 0.3s; } 
.popup.on { visibility: visible; opacity: 1; } 
.popup.on .popup-body { transform: translateY(0); transition: 0.3s 0.2s; } 
.popup .mask { position: absolute; left: 0; right: 0; bottom: 0; top: 0; } 
.popup-body { transition: 0.3s; width: 100%; max-width: 1800px; padding: 0 20px; transform: translateY(100%); box-shadow: -10px 10px 20px 0px rgba(0, 0, 0, 0.1); } 
.popup-inner {  } 
.popup-body .btn-wrap { margin-top: 60px; } 

.popup .youtube-box { position:relative; }  
.popup iframe { position: absolute; top: 0;left:0; width: 100%; height: 100%;}

.popup .popup-close-btn { position: absolute; right:14px; top:-56px; width: 36px; height: 36px; background: url(../images/icon-close1.png) no-repeat ; opacity: 0; transition: 0.3s 0.3s;}
.popup.on .popup-close-btn { opacity: 1;}
*/


/* input */
.input-wrap { max-width: 580px; margin:0 auto; padding: 3rem 0 10rem; }
.input-wrap.full { max-width: 100%;}
.common-input-box { font-size: 15px; line-height: 1.8; position: relative; }
.common-input-box label { display: block; text-align: left; color: #929298; font-size: 1.8rem; font-weight: 300; padding-left: 6px; margin-bottom: 0.5rem;} 
.common-input-box input { display: block; width: 100%; border-radius: 8px; border: 1px solid #3c3c47; padding: 2rem; line-height: 1; font-size: 1.8rem; background: #101015; color: #fff;} 
.common-input-box input:focus { border-color: #2792d1; outline: none; }
.common-input-box .input-alert { color: #ff512a; margin-top: 10px; } 
.common-input__tit { position: relative; display: block; margin-bottom: 10px; width: fit-content; } 
.common-input-box + .common-input-box { margin-top: 20px; } 
.common-input-box.alert input { border-color: #ff512a; } 
.common-textarea {display: block; width: 100%; border-radius: 8px; border: 1px solid #3c3c47; padding: 2rem; line-height: 1; font-size: 1.8rem; background: #101015; color: #fff; height: 300px; resize: none; line-height: 1.8; }
input[type=password] { font-family: 'pass'; font-size: 2rem;}
.common-textarea::-webkit-scrollbar { background: #000;}
.common-textarea::-webkit-scrollbar-thumb { background: #333;}
button + .common-input-box { margin-top: 7rem;}

/* 헤더 */
.header { height: 60px; position: fixed; top: 0; left: 0; right: 0; z-index: 1; background: rgba(0, 0, 0, 0.3); } 
.header .common-inner { display: flex; justify-content: space-between; align-items: center; max-width: 1400px; width: auto; height: 100%; transition: 0.3s; } 
.header .header-logo { 
    position: absolute; 
    left: 5rem; 
    width: 120px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.header .header-logo img {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
}

.header .header-logo::after {
    content: "777슬롯";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #33ccff;
    font-size: 2.2rem;
    font-weight: bold;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
    background: rgba(17, 18, 25, 0.95);
    padding: 8px 15px;
    border-radius: 8px;
    border: 2px solid #33ccff;
    z-index: 999;
    pointer-events: auto;
    white-space: nowrap;
    display: block;
    width: auto;
    height: auto;
    cursor: pointer;
    transition: all 0.3s ease;
}

.header .header-logo::after:hover {
    background: rgba(51, 204, 255, 0.2);
    border-color: #66d9ff;
    color: #66d9ff;
    transform: translate(-50%, -50%) scale(1.05);
} 
.header .header__util { position: absolute; right: 5rem; display: flex; gap: 1rem; align-items: center; } 
.header .header__util--bar { height: 11px; width: 1px; background: #fff; margin-top: 1px; } 
.header .header__util a { font-size: 1.4rem; line-height: 1; display: flex; align-items: center; gap: 3px; }
.header .header__util img { vertical-align: middle;} 
.header__util-coin { color: #cd942f; font-size: 1.4rem; margin-right: 1rem;}

/* gnb */
.gnb-wrap { margin: 0 auto; height: 60px;  transition: 0.3s;} 
.gnb-wrap.active-2depth { padding-bottom: 60px; } 
.gnb-wrap.active-2depth:after { content: ''; position: absolute; left: 0; right: 0; height: 1px; background: #e9e9e9; top: 60px; } 
.gnb-wrap ul { justify-content: end; display: flex; gap: 8rem; height: 100%; align-items: center; transition: 0.3s; } 
.gnb-item a { display: block; padding: 1rem 0.5rem; font-weight: 500; font-size: 1.4rem; } 
.gnb-item a:hover { color: #33ccff; } 

.main { min-height: 100vh; margin-top: 60px;}
.main-section { padding: 7rem 0 5rem; } 
.section-tit { font-family: 'Jiugae'; font-size: 3rem; text-align: center; } 
.section-desc { font-size: 2.6rem; font-weight: 500; } 
.section-desc img { vertical-align: middle; } 

/* 버튼 */
[class*='btn-type'] { display: block; width: 100%; transition: 0.3s; text-align: center; font-family: 'Jiugae'; cursor: pointer;}
.btn-type1 { font-size: 2.6rem;  border-radius: 5rem; max-width: 580px; background: #529fd5; padding: 3rem 0 2.5rem 0; margin: 4.5rem auto auto; } 
.btn-type2 { font-size: 2.4rem;  border-radius: 2.5rem; padding: 2.3rem 0 2.1rem 0; margin: 0 auto; max-width: 320px; background: #2e78be; border: solid 2px #2e78be; background: linear-gradient(to bottom, #63afde, #2977bc); } 
.btn-type2:after { content: ''; position: absolute; left: 10px; top: 5px; width: 13px; height: 8px; background: rgba(255, 255, 255, 0.6); border-radius: 4px; }  
.btn-type3 { font-size: 2.4rem; border-radius: 5rem; max-width: 300px; background: #529fd5; padding: 2rem 0 1.8rem; margin: 3rem auto auto; }
.btn-underline1 { display: block; width: fit-content; color: #f04251; font-size: 1.8rem; text-decoration: underline; text-underline-offset: 4px; margin:0 auto; }
.btn-back { background: #212129; color: #fff; font-size: 1.8rem; font-weight: 700; padding:1.5rem 2.5rem; line-height: 1; border-radius: 1.2rem;}
[class*='btn-']:hover { opacity: 0.8 !important; } 


/* 텍스트 */
[class*=common-txt] { text-align: center; }
.common-txt1 {color: #6fb5e6; font-size: 6rem; font-family: 'Jiugae'; }
.common-txt2 { font-size: 3.2rem; }
.common-txt3 {color: #dd5232; font-size: 4.5rem; font-family: 'Jiugae'; }
.common-txt4 {color: #6fb5e6; font-size: 3.6rem; font-family: 'Jiugae';  }
.alert-txt1 { font-weight: 300; padding-left: 6px; color: #dd5232; font-size: 1.2rem; margin-top: 5px;}


/* 게임섹션 */
/*
.main-tab-wrap { display: flex; gap: 8rem; align-items: center; justify-content: space-between; } 
.main-tab__game-btn { position: relative; font-size: 8rem; font-family: 'Jiugae'; line-height: 1.2; text-align: center;  } 
.main-tab__game-btn .marble-con { color: #6fb5e6; } 
.main-tab__game-btn .yotgame-con { color: #c0974b; } 
.main-tab__game-btn a { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); transition: 0.3s; } 
.main-tab__game-btn a img { border-radius: 50%; box-shadow: 5px 30px 5px rgba(0, 0, 0, 0.3); } 
.main-tab__game-btn a:hover { top: 51%; } 

.main-tab__btn { transition: 0.3s;}
.main-tab__btn:hover { filter: opacity(0.8)}
*/

.main-tab-wrap { display: flex; gap: 8rem; align-items: center; justify-content: space-between; } 
.main-tab__game-btn { position: relative; font-size: 8rem; font-family: 'Jiugae'; line-height: 1.2; text-align: center;  } 
.main-tab__game-btn .marble-con { color: #6fb5e6; } 
.main-tab__game-btn .yotgame-con { color: #c0974b; } 
.main-tab__game-btn a { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); transition: 0.3s; } 
.main-tab__game-btn a img { border-radius: 50%; box-shadow: 5px 30px 5px rgba(0, 0, 0, 0.3); } 
.main-tab__game-btn a:hover { top: 51%; } 

.main-tab__btn { transition: 0.3s; border-radius: 20px; overflow: hidden;}
.main-tab__btn.not-video:after { content: 'COMING SOON'; position: absolute; left: 0; right: 0; bottom: 0; top: 0; background: rgba(0, 0, 0, 0.85); opacity: 0; transition: 0.3s; font-family: 'Pretendard', sans-serif; font-size: 3rem; font-weight: 700; color: #f1713e; display: flex; align-items: center; justify-content: center}
.main-tab__btn.not-video:hover:after { opacity: 1;  z-index: 2;}


.main-tab__btn video { position: absolute; left: 0; right: 0; bottom: 0; top: 0; width: 100%; height: 100%; z-index: -1; background: #000; }
.main-tab__btn img { position: relative; z-index: 1; height: 100%; width: 100%; object-fit: cover;}
/* .main-tab__btn:hover video { z-index: 2;} */
.main-tab__btn:hover a img { }


.main-tab-link { margin-top: 5rem; height: 8.2rem;}

.logo-list1 { position: relative; max-width: 100%; margin:7rem auto 4rem; display: flex; align-items: center;}
.logo-list1 .slick-track { display: flex; align-items: center;}
.logo-list1 .slick-slide { margin-right: 3rem; }
.logo-list1:after, .logo-list1:before { content: ''; top:0; bottom:0; position: absolute; width: 6rem; z-index: 1;}
.logo-list1:after { left: 0; background: linear-gradient(to right,  #111218, transparent 90%); }
.logo-list1:before { right:0; background: linear-gradient(to right,   transparent, #111218 90%); }

.dice-img-box { position: relative; text-align: center; margin:9rem auto 4rem auto; width: fit-content; }
.img-dice1 { position: absolute; left: 1%; bottom:10%; z-index: 2; width: 21.4%; animation: dice1 2s alternate infinite;}
.img-dice2 { position: absolute; left: 17%; bottom:27%; z-index: 1; width: 13.5%; animation: dice2 1.6s alternate infinite;}
@keyframes dice1 { 
    from { transform: translate3d(0, -25%, 0) skew(0); } 
    to { transform: translate3d(0, 20%, 0) rotate(10deg);  } 
}
@keyframes dice2 { 
    from { transform: translate3d(0, 15%, 0) skew(0); } 
    to { transform: translate3d(0, -10%, 0) rotate(-25deg);  } 
}

/* 공지섹션 */
.main-section.notice { background: #18191f;}

/* 문의하기섹션 */
.main-section.faq { background: #111219; text-align: center; } 
.main-section.faq .common-inner { position: relative;} 
.faq-list { margin:5rem auto 7rem; }
.faq-list__header { display: flex; color: #929298; padding: 1.5rem 3rem 1.5rem 2rem; }
.faq-list__body { }
.faq-list__item { display: flex; padding: 1.7rem 3rem 1.8rem 2rem; background: #1f2026; border-radius: 1.5rem; margin-top: 3px; }
.faq-list .faq-tit { flex: 1; text-align: left;}
.faq-list__body .faq-tit:hover { text-decoration: underline;}
.faq-list .faq-date { flex: 0.5; max-width: 260px; }
.faq-list .faq-state { width: 40px; }
.faq-list .faq-state .state-n {color: #f04251; }
.faq-list .faq-state .state-y {color: #33ccff; }
.main-section.faq .btn-back { position: absolute; top:10px; right:36px}

/* footer */
.footer { background: #0d0e12; color: #fff; padding: 5rem 0 6rem 0; font-size: 14px; font-weight: 200; } 
.footer-link { display: flex; gap: 40px; } 
.footer-link li { position: relative; line-height: 1; } 
.footer-link li + li:before { content: ''; position: absolute; height: 10px; width: 1px; background: #fff; opacity: 0.5; left: -20px; top: 3px; } 
.footer-link a { font-size: 14px; } 
.footer-link a:hover { text-decoration: underline; } 
.footer-sns { display: flex; gap: 10px; justify-content: center; gap: 17px; } 
.footer-sns li { } 
.footer-sns li a { width: 66px; height: 66px; border-radius: 50%; background-color: #1e1f25; display: flex; justify-content: center; align-items: center; } 
.footer-sns li a:hover { background: #292a31; } 
.footer-copy { margin-top: 3.5rem; color: #828282; font-weight: 500; text-transform: uppercase; font-size: 1rem; text-align: center; } 

.flex-col { display: flex; flex-direction: column; gap: 2rem; }

@keyframes fadeIn { 
 from { opacity: 0; } 
 to { opacity: 1; } 
 }

@keyframes fadeInUp { 
 from { opacity: 0; -webkit-transform: translate3d(0, 40%, 0); transform: translate3d(0, 40%, 0); } 
 to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 
}

.fadeIn { -webkit-animation-name: fadeIn; animation-name: fadeIn; } 
.fadeInUp { -webkit-animation-name: fadeInUp; animation-name: fadeInUp; } 

/* 로그인 */
.login-wrap { padding:14rem 20px 0 20px;  }
.login-wrap .login-logo { text-align: center; }
.login-wrap h1 { margin-top: -50px;}

@media screen and (max-width: 1080px) {
    html { font-size:49.8% }
    /* 
    56.25% 
    49.8%
    43.575% 
    37.35% 
    */
    .main-tab-wrap { gap: 4rem; }
    .main-tab__game-btn { flex:0.9; font-size:7vw;}
    .main-tab__btn { flex:1; border-radius: 10px;}
    .main-tab-wrap .flex-col { flex: 1; }
    .login-wrap { background-size: 55rem;}
    .main-tab__btn.not-video:after { font-size: 2.5vw;}

    .gnb-wrap ul { gap: 5rem; }
    .header .header__util a,
    .header__util-coin,
    .gnb-item a { font-size: 1.6rem; }

    .popup .popup-close-btn { zoom: 0.8;}
}
@media screen and (max-width: 800px) {
    html { font-size:46% }
    .gnb-wrap { display: none;}
    .main-tab-wrap { gap: 2rem; }
    .main-tab__game-btn a img { zoom: 0.8; }
    .logo-list1 .slick-slide { zoom: 0.9;}
    .section-desc { font-size: 2rem;}
    .common-txt1 { font-size: 5rem;}
    .common-txt2 { font-size: 2.6rem; }
    .common-txt3 { font-size: 3.6rem; ; }
    .common-txt4 { font-size: 3rem;}

    .footer-sns li a { zoom: 0.9}

    .header .header-logo { left: 20px; }
    .header .header-logo::after {
        font-size: 1.8rem;
        padding: 6px 12px;
        border-width: 1px;
    } 
    .header .header__util { right: 20px; } 
}
@media screen and (max-width: 640px) {
    /* html { font-size: 43.575% ;} */
    .main-tab__game-btn a img { zoom: 0.6}
    .logo-list1 .slick-slide { zoom: 0.8;}
    
    .common-txt2 br {display: none; }

    .section-desc img,
    .footer-sns li a { zoom: 0.8}
    
    .main-section.faq .btn-back { top: 0; right: 20px; transform:translateY(-100%); }

    .faq-list__header { display: none; }
    .faq-list__item { flex-wrap: wrap; justify-content: end; gap: 5px; }
    .faq-list .faq-tit { flex: none; width: 100%;}
    .faq-list .faq-date { flex: 1; text-align: right;}

    .main-tab-wrap .flex-col{ gap: 1rem;} /* 20250404 */  
    .popup .popup-close-btn { zoom: 0.6;} /* 20250404 */
    
    .header .header-logo::after {
        font-size: 1.6rem;
        padding: 4px 10px;
    }
}