@charset "UTF-8";

@import "layout.css";
@import "basic.css";

:root{
    --zeus-black:#040B11;
    --primary:#111E28;
    --point:#3366CC;
    --point-dark:#1C3C7D;
    --red:#cc3333;
    --red-dark: #9d0909;
    --white-100:#fff;
    --black-100:#000;
    --black-90:#111;
    --black-80:#222;
    --black-70:#333;
    --black-60:#444;
    --black-50:#555;
    --black-40:#666;
    --black-30:#777;
    --black-20:#888;
    --black-10:#999;
    --gray-50:#535353;
    --gray-30:#BFBFBF;
    --gray-20:#ddd;
    --gray-10:#F8F8F8;
     /* gradient */
    --bb-gradient:conic-gradient(from 0deg at 0% 100%, #06283B 0deg, #170D32 102.12deg, #401034 360deg);
    /* border */
    --border-white: 1px solid #fafafa;
    --border-Lgary:1px solid #ddd;
    --border-gray: 1px solid #535353;
    --border-primary : 1px solid #394045;
    /* border-radius */
    --round-xxlg:50%;
    --round-xlg:1.8rem;
    --round-lg:1.4rem;
    --round-md:0.8rem;
    --rouns-sm:0.3rem;
    --round-xsm:0.2rem;
    /* font-size */
    --title-xlg:4.2rem;
    --title-lg:3.2rem;
    --title-md:2.4rem;
    --title-sm:2rem;
    --title-xsm:1.8rem;
    --body-xlg:2rem;
    --body-lg:1.8rem;
    --body-md:1.6rem;
    --body-sm:1.5rem;
    --body-xsm:1.4rem;
}
html{font-size: 62.5%;}
body{ font-family: 'SCDream';font-weight: 400;font-size: var(--body-sm);color: var(--black-80);background-color: var(--zeus-black);}
.inner{max-width: 140rem;margin: 0 auto;box-sizing: border-box;transition: all 0.3s ease-in-out;}
/* header */
.gnb{position: relative;height: 8rem;border-bottom: var(--border-gray);background-color: var(--zeus-black);box-sizing: border-box;z-index: 10;}
.gnb .inner,.gnb .menu{height: inherit;}
h1.logo{position: absolute;top:50%;left: 50%;transform: translate(-50%, -50%);background: url(../../image/zeusfc/zeus_logo.svg) no-repeat;}
.gnb ul{display: flex;flex-direction: row;height: inherit;}
.gnb li{position: relative;display: flex;align-items: center;padding: 0 2rem;font-size: var(--body-md);font-weight: 500;color: var(--white-100);transition: all 0.3s ease-out;}
.gnb li:hover,.gnb li:active,.gnb li:focus{color: var(--point);}
.gnb li::after{content: "";position: absolute;bottom: 0;left: 0;width: 0;height: 3px;background-color: var(--point);transition: all 0.3s ease-in-out;}
.gnb li:hover::after{width: 100%;}
.gnb li:nth-child(5){margin-left: auto;}

.head-in{height: 3rem;background: var(--primary);}
.head-in .inner{height: inherit;}
.user-navi{display: flex;justify-content: flex-end;height: inherit;color: var(--white-100);}
.user-navi li{display: flex;align-items: center;margin-left: 2.2rem;font-size: var(--body-sm);}
/* header mobile */
.menu-closebtn{position: absolute;top: 1.2rem;right: 5rem;display: inline-block;width: 30px;height:30px;background:url(../../image/zeusfc/zeus_icon_wrap.png)-210px -30px no-repeat;}
.menu-openbtn{position: absolute;top: 50%;right: 5rem;transform: translateY(-50%);display: inline-block;width: 30px;height:23px;background:url(../../image/zeusfc/zeus_icon_wrap.png)-180px -30px no-repeat;}
.user-box{display: flex;justify-content: space-between;flex-wrap:wrap;gap:1rem;padding: 6rem 5rem 4rem 5rem;border-bottom: var(--border-gray);}
.user-info{width: 100%;padding-bottom: 4rem;color: var(--white-100);font-size: var(--title-sm);}
.user-box .btn{flex:1 0 30%;padding: 1.4rem 0;text-align: center;box-sizing: border-box;}
.user-box .blue-btn{color: var(--white-100);}
.user-box.dp_none{display: none;}
/* footer */
footer{background-color: var(--primary);padding-bottom: 4rem;letter-spacing:-0.5px;}
.footer-navlink{width: 100%;height: 6rem;border-bottom: var(--border-primary);}
.footer-navlink ul, .footer-textarea{display: flex;flex-direction: row;height: inherit;}
.footer-navlink li{display: flex;align-items: center;height: inherit;margin-left: 3.5rem;color: var(--white-100);}
.footer-navlink li:first-child{margin: 0;}
.footer-textarea{justify-content: space-between;padding: 1.5rem 0;}
.footer-textarea li{color: var(--gray-30);line-height: 2.4rem;font-size: var(--body-sm);font-weight: 300;}
.footer-textarea .logo{background: url(../../image/zeusfc/zeus_logo.svg) no-repeat; opacity:0.5;}
.copyright{margin: 0;color: var(--gray-30);font-size: var(--body-xsm);}
/* login */
.member-box{width: 42rem;padding: 8rem 4rem;border-radius: 0.8rem;margin: 10rem auto 0 auto;text-align: center;color: var(--black-50);font-size: var(--body-md);letter-spacing: -0.5px;background-color: var(--white-100);box-sizing: border-box;}
.member-box .title{position: relative;font-size: var(--title-sm);color: var(--zeus-black);padding: 5.8rem 0 3rem 0;}
.member-box .title::before{content: "";position: absolute;top: 0;left: 50%;transform: translateX(-50%);display: block;width:13.8rem;height:2.9rem;background: url(../../image/zeusfc/zeus_logo_b.svg) no-repeat;}
.member-box input{width: 100%;padding: 1.4rem 1.6rem;border: var(--border-Lgary);border-radius: 0.3rem;box-sizing: border-box;color: var(--black-30);font-family: 'SCDream';font-size: var(--body-xsm);letter-spacing: -0.5px;}
.member-box button{width: 100%;padding: 1.8rem;margin: 1.8rem 0;text-align: center;color: var(--white-100);font-size: var(--body-md);border-radius: 0.3rem;background-color: var(--point);}
.member-box .join-desc{display: flex;justify-content: space-between;font-size: var(--body-sm);}
.member-box .join-desc .joinus{font-weight: 500;color: var(--point);}
/* 마이페이지 */
.myInfo-box,.profile-box{display: flex;flex-direction: column;flex-wrap: wrap;align-content: stretch;width: 100%;padding: 4rem;border: var(--border-gray);border-radius: 0.8rem;box-sizing: border-box;}
.myInfo-box{align-items: center;color: var(--white-100);background-color: var(--zeus-black);}
.set-btn span::before,.set-btn span::after,.profile-box h3::before,.buy-list li span::after,.apply-list li span::after,.apply-list h3::before,.buy-list h3::before{content: "";position: absolute;top: 50%;transform: translateY(-50%);width: 1.5rem;height: 1.5rem;background:url(../../image/zeusfc/zeus_icon_wrap.png) -150px -90px;}
.profile-box{background-color: var(--white-100);}
.profile-img{width: 15rem;height: 15rem;border-radius: 50%;overflow: hidden;background-image: url(../../image/zeusfc/profile.jpg);background-size:contain;background-position:center;background-repeat:no-repeat;}
.set-btn{display: inline-block;width: 100%;padding: 2rem 3rem;border-radius: 0.8rem;text-align: left;box-sizing: border-box;}
.myInfo-box .set-btn{color: var(--black-80);background-color: var(--white-100);}
.profile-box .set-btn{color: var(--white-100);background-color: var(--zeus-black);}
.myInfo-box .user-name{padding: 3rem 0;font-size: var(--title-md);font-weight: 600;}
.profile-box h3::before{left: 0;width: 3rem;height: 3rem;background-position: 0 -90px;}
.profile-box h3::after{content: "";position: absolute;bottom: -2rem;left: 0;display: block;width: 100%;padding-bottom: 2rem;border-bottom: var(--border-primary);}
.profile-box table{margin: 4rem 0;text-align: left;}
.profile-box .tb_base td{padding: 0.8rem;}
.profile-box .tb_base th{font-weight: 500;}
.set-btn span{position: relative;display: inline-block;width: 100%;padding:0 2.5rem;box-sizing: border-box;}
.myInfo-box .set-btn span::before{left: 0;background-position: -150px -90px;}
.myInfo-box .set-btn span::after{right: 0;background-position: -180px -60px;}
.profile-box .set-btn span::before{left: 0;background-position: -120px -90px;}
.profile-box .set-btn span::before{left: 0;background-position: -120px -90px;}
.profile-box .Notregi .set-btn span::before{left: 0;background-position: -90px -90px;} /*미등록 아이콘*/
.profile-box .set-btn span::after,.buy-list li span::after,.apply-list li span::after{right: 0;background-position: -150px -60px;}
.profile-box h3,.buy-list h3,.apply-list h3{position: relative;padding-left: 4rem;font-size: var(--title-md);font-weight: 600;}
.apply-list, .buy-list{text-align: left;color: var(--white-100);}
.buy-list li a, .apply-list li a{position: relative;display: block;padding: 1.4rem 3rem;border-radius: 0.8rem;border: var(--border-primary);margin-bottom: 1rem;}
.buy-list h3::before{width: 30px;height: 30px;;left: 0;background-position: -30px -90px;}
.apply-list h3::before{width: 30px;height: 30px;;left: 0;background-position: -60px -90px;}
.apply-list li span,.buy-list li span{position: relative;display: inline-block;width: 100%;padding-right:2.5rem;box-sizing: border-box;}
/* 회원가입 */
.signup-step{position: relative;display: flex;justify-content: space-between;align-items: center;text-align: center;}
.signup-step li{width: calc(100% / 3);;font-size: var(--body-md);font-weight: 500;color: var(--gray-50);}
.signup-step::after{content: "";position: absolute;top:2.5rem;left:0;;width: 100%;height: 0.5rem;background-color: var(--gray-10);z-index: 0;}
.signup-step .circle{position: relative;width: 5rem;height: 5rem;margin: 0 auto 1rem auto;border-radius: 50%;color: var(--gray-30);font-weight: 600;font-size: var(--title-sm);text-align: center;line-height: 5rem;background-color: var(--gray-10);z-index: 1;}
.signup-step li.on{color: var(--black-80);}
.signup-step li.on .circle{color: var(--white-100);;background-color: var(--point);}
.signup .tb_base{text-align: left;}
.check{position: relative;padding-top: 0.8rem;color: var(--gray-30);font-size: var(--body-xsm);font-weight: 500;}
.check::before{content: "";display: inline-block;width: 12px;height: 12px;padding-right: 0.4rem;background: url(../../image/zeusfc/zeus_icon_wrap.png) -270px -30px no-repeat;}
.check.on{color: var(--point);}
.check.on::before{background-position: -270px -60px;}
.complete.titleTop{position: relative;padding-top: 8rem;}
.complete.titleTop::before{content: "";position: absolute;top: 0;left: 50%;transform: translateX(-50%);width: 6rem;height: 6rem;background: url(../../image/zeusfc/zeus_icon_wrap.png) 0 -180px no-repeat;}
.agreeBox .tb_base{text-align: center;}
.agreeBox .tb_base th, .agreeBox .tb_base td{padding: 1rem 0;}
.agreeBox .tb_base th{background-color: var(--gray-10);border-top: var(--border-Lgary);}
.agreeBox .tb_base th,.agreeBox .tb_base td{border-bottom: var(--border-Lgary);border-right: var(--border-Lgary);}
.agreeBox .tb_base th:last-child,.agreeBox .tb_base td:last-child{border-right: 0px;}
/* 개인정보처리방침 */
.policyAnchor{width: 100%;background-color: var(--gray-10);padding: 4rem;box-sizing: border-box;}
.policyAnchor ul{display: flex;flex-direction: column;gap: 1rem;margin-top: 3rem;}
.policyAnchor ul{font-size: var(--body-md);font-weight: 500;}
.policyAnchor i{display: inline-block;width: 3.5rem;height: 3.5rem;padding: 0.5rem;margin-right: 1rem;font-style: normal;line-height: 2.5rem;text-align: center;font-size: var(--body-md);font-weight: 500;color: var(--white-100);border-radius: 0.3rem;background-color: var(--zeus-black);box-sizing: border-box;}
.indexTitle {width: 100%;;text-align: center;padding-bottom: 4rem;border-bottom: var(--border-gray);}
.indexTitle p{font-size: var(--title-md);font-weight: 500;}
.indexTitle p + span{display:block;}
.policyDesc{display: flex;flex-direction: column;gap: 3rem;}
.policyDesc p {font-size: var(--body-md);font-weight: 500;letter-spacing:-1px;}
.policy-cont{margin-top: 1rem;font-size: var(--body-sm);color: var(--black-70);letter-spacing:-1px;}
.policy-cont li{margin-bottom: 0.4rem;}
/* content */
.content-wrap{width: 100%;min-height: calc(100vh - 50.6rem);margin-bottom: 15rem;}
/* button */
.blue-btn{background-color: var(--point);color: var(--white-100);}
.gray-btn{background-color: var(--gray-30);color: var(--black-80);}
/* 모달 */
.modal-wrap{position:fixed;top:0;left:0;width:100%;height:100vh;display:none;z-index:99}
.modal{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);padding:2rem;border:var(--border-Lgary);border-radius:0.8rem;background-color:var(--white-100);box-shadow:1px 3px 4px rgba(0,0,0,0.3);box-sizing:border-box;}
.modal-cont{position:relative;width:100%;height:auto;min-height:5rem;max-height:calc(100vh - 35rem);padding:1rem 0;overflow:auto;background-size:cover;background-repeat:no-repeat;background-position:center;}
.modal-cont img{display:block;max-width:100%;height:auto;margin:0 auto;}
.modal .title{height:3rem;padding-bottom:1rem;font-size:var(--title-sm);font-weight:500;border-bottom:var(--border-Lgary);}
.modal .btn-wrap{display:flex;justify-content:center;align-items:center;width:100%}
.modal-s .modal{width:30rem;max-width:calc(100% - 6rem);min-height:20rem;max-height:calc(100vh - 8rem);}
.modal-m .modal{width:45rem;max-width:calc(100% - 6rem);min-height:20rem;max-height:calc(100vh - 8rem);}
.modal-l .modal{width:60rem;max-width:calc(100% - 6rem);min-height:20rem;max-height:calc(100vh - 8rem);}
/* 리스트 항목 없을 떄 */
.list-none {padding:3rem 0; color:#fff;}
/* 모바일 */
@media  screen and (min-width:1399px){
   .mo{display: none;}
}
@media  screen and (max-width:1400px){
    body .pc{display: none;}

    h1.logo{left: 5rem;transform: translateY(-50%);}
    .gnb .menu{position: fixed;top: 0;right: -100%;width: 100%;height: 100%;background-color: var(--zeus-black);z-index: 999;transition: right 0.3s ease;overflow-y: auto;-webkit-overflow-scrolling:touch;}
    .gnb .menu.active{right: 0;}
    .gnb ul{flex-direction: column;height: auto;}
    .gnb li:nth-child(5){margin: 0;}
    .gnb li{padding: 1.5rem 5rem;color: var(--gray-50);font-weight: 500; font-size: var(--title-xsm);}
    .inner, header .inner, footer .inner, .content .inner{width: 100%; padding: 0 5rem;}
    .gnb{display: flex; justify-content: space-between;align-items: center;height: 5.5rem;}
    .footer-textarea{flex-direction: column;gap: 1.5rem;}
    .content{min-height: calc(100vh - 52rem);}
}
@media screen and (max-width:1000px){
    .agreeBox .tb_base thead, .agreeBox .tb_base colgroup{display: table-header-group;}
}
@media  screen and (max-width:500px){
    h1.logo{left: 3rem;}
    .menu-openbtn,.menu-closebtn{right: 3rem;}
    .user-box,.gnb li{padding-left: 3rem;padding-right: 3rem;}
    .inner, header .inner, footer .inner{padding: 0 3rem;}
    .policyAnchor{padding:4rem 2rem;}
    .member-box{width: 100%;}
}