@charset "utf-8";

#wrap {float:left; width:100%; overflow:hidden;}

/*-------------------------------------------------------------------------------------*
 *  Header                                                                             *
 *-------------------------------------------------------------------------------------*/
.header_wrap{float:left; width:100%; overflow:hidden;}
.top_wrap{float:left; width:100%; padding:20px; border-bottom:1px solid rgba(255,255,255,0.1);}
.top_box{width:1400px; margin:0 auto; display:flex; align-items:center;}

.logo{float:left; margin:0 20px 0 0;}
.notice{float:left; margin:0 auto 0 0; width:350px; height:40px; line-height:40px; border-radius:40px; padding:0 10px; background:#000000; font-family: 'EsaManru'; font-weight:500; font-size:14px; color:#ffffff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}

.top_my{float:left;}
.top_my li{float:left; margin:0 0 0 10px; line-height:24px; font-family:'EsaManru'; font-weight:300; font-size:14px; color:#8d8d8d;}
.my_font01{font-weight:500; color:#ffb100;}
.my_font02{font-weight:500; color:#ffffff;}
.lv_img{display:inline-block; margin:0 5px 0 0;}
.my_icon{display:inline-block; margin:0 5px 0 0; width:20px;}

.top_utill{float:left; margin:0 0 0 10px;}
.top_utill li{float:left; margin:0 0 0 5px;}

.bottom_wrap{float:left; width:100%; padding:20px 0;}
.bottom_box{float:left; width:100%; display:flex; align-items:center;}

.gnb{float:left; width:100%; height:100%;}
.gnb ul{width:100%; height:100%; display:flex; align-items:center; justify-content:center;}
.gnb ul li{display:flex; align-items:center; justify-content: center; margin:0 10px;}
.gnb ul li a{display:flex; flex-direction: column; align-items: center; min-width:80px; padding:0 15px; font-family: 'GmarketSans'; font-weight:500; font-size:20px; transition:all 0.3s;}
.gnb ul li a span{text-transform:uppercase; font-size:10px; color:#afafaf;}

.gnb ul li a:hover{color:#ffb100;}
.gnb ul li a:hover span{color:#ffe6ac;}

.header_line{float:left; width:100%; height:9px; text-align:center;}
.header_line img{width:100%;}
/*-------------------------------------------------------------------------------------*
 *  Contents                                                                           *
 *-------------------------------------------------------------------------------------*/
.title_box{float:left; width:100%; margin:0px 0 0 0; height:150px; line-height:150px; padding:0 15px; text-align:center; background:url(/assets/v3/img/bg_title.jpg) center top no-repeat; background-size:cover;}
.title{font-family: 'EsaManru'; font-weight:300; font-size:40px; color:#ffd28b;}

.s_title1{float:left; padding:0 10px; border-left:5px solid #ffb100; line-height:40px; font-family: 'EsaManru'; font-weight:500; font-size:16px; color:#ffffff;}
.s_title1 span{display:inline-block; margin:0 0 0 5px; font-weight:300; font-size:12px; color:#afafaf;}

.contents_wrap {float:left; width:100%; padding:0 0; margin:30px 0 0 0;}
.contents_box{width:1400px; margin:0 auto; min-height:400px;}

.con_box00 {float:left; width:100%; margin:0 0 0 0;}
.con_box05 {float:left; width:100%; margin:5px 0 0 0;}
.con_box10 {float:left; width:100%; margin:10px 0 0 0;}
.con_box20 {float:left; width:100%; margin:20px 0 0 0;}
.con_box30 {float:left; width:100%; margin:30px 0 0 0;}
.con_box40 {float:left; width:100%; margin:40px 0 0 0;}
.con_box50 {float:left; width:100%; margin:50px 0 0 0;}
.con_box60 {float:left; width:100%; margin:60px 0 0 0;}

/*-------------------------------------------------------------------------------------*
 *  Footer                                                                             *
 *-------------------------------------------------------------------------------------*/
.footer_wrap {float:left; width:100%; margin:60px 0 0 0; padding:50px 10px 50px 10px; text-align:center; background:rgba(0,0,0,0.4);}

.f_partners{float:left; width:100%;}
.f_copy{float:left; width:100%; margin:20px 0 0 0; font-family: 'EsaManru'; font-weight:300; font-size:18px; color:#737373;}

/*-------------------------------------------------------------------------------------*
 *  Main                                                                               *
 *-------------------------------------------------------------------------------------*/
.main_slideshow_pc{width:100%; margin:0 auto; overflow:hidden;}
.main_slideshow_pc .swiper-slide img{width:100%;}

.main_game1{float:left; width:100%; margin:50px 0 0 0;}
.main_game1 li{float:left; margin:0 40px 0 0;}
.main_game1 li:nth-child(2n){margin:0 0 0 0;}
.main_game1 li a{display:block;}
.main_game1 li:nth-child(n+3) {
    margin-top: 50px;
}

.main_game2{float:left; width:100%; margin:50px 0 0 0;}
.main_game2 li{float:left; margin:0 40px 0 0;}
.main_game2 li:nth-child(4n){margin:0 0 0 0;}
.main_game2 li a{display:block;}

.main_board_wrap{float:left; width:100%; margin:50px 0 0 0; display:flex;}
.main_board_box{float:left; width:440px; height:320px; border-radius:0px; margin:0 40px 0 0; background:url(/assets/v3/img/bg_board.jpg) center top no-repeat; background-size:cover;}
.main_board_box:last-child{margin:0 0 0 0;}
.main_board_title{float:left; width:100%; display:flex; align-items:center; background:linear-gradient(#5b4f3c 0%, #291f18 100%); border-radius:0px; padding:0 20px; height:60px; line-height:60px; text-align:left; font-family: 'EsaManru'; font-weight:700; font-size:22px; color:#e7d9b8;}

.myTable{table-layout:fixed;}
.main_board{float:left; width:100%; height:auto; overflow:hidden; padding:20px 30px; }
.main_board td{font-family:'EsaManru'; font-weight:300; color:#ffffff; font-size:16px; line-height:44px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; transition:all 0.5s;}
.main_board td:last-child{color:#707070;}

.borad_font01{font-weight:500; color:#ffb100;}

.main_board_img_box{float:left; width:100%; margin:50px 0 0 0;}
.main_board_img{float:left; position:relative; overflow:hidden;}
.main_board_img.margin{margin:0 40px 0 0;}
.main_board_img::after{top: 0px; left: -130%; width: 100%; height:100%; content: ""; overflow: hidden; position: absolute; background: linear-gradient(45deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .5), rgba(255, 255, 255, 0)); -moz-transform: skewX(-25deg); -webkit-transform: skewX(-25deg);}
.main_board_img:hover::after{left: 150%; transition: left 0.5s ease 0s;}

/*-------------------------------------------------------------------------------------*
 *  login                                                                              *
 *-------------------------------------------------------------------------------------*/
#login{float:left; width:100%; min-height:100vh; position:fixed; left:0; top:0; z-index:3; background:rgba(17,17,17,0.6); display:flex; align-items:center; justify-content:center; display:none;}
.login_wrap{width:80%; max-width:640px; margin:0 auto; max-height:560px; transition:all 0.5s;}

#join{float:left; width:100%; min-height:100vh; position:fixed; left:0; top:0; z-index:999; background:rgba(17,17,17,0.6); display:flex; align-items:center; justify-content:center; display:none;}
.join_wrap{width:95%; max-width:800px; margin:0 auto; max-height:80vh; transition:all 0.5s;}
.join_box{width:100%; padding:40px 20px; max-height:80vh; overflow-y:auto; display: flex; flex-direction: column; transition:all 0.5s;}
.join_box::-webkit-scrollbar {width: 3px;  /* 스크롤바의 너비 */}
.join_box::-webkit-scrollbar-thumb {height: 30%; /* 스크롤바의 길이 */ background: rgba(255,255,255, 0.1); /* 스크롤바의 색상 */border-radius: 5px;}
.join_box::-webkit-scrollbar-track {background: rgba(255,255,255, 0.1);  /*스크롤바 뒷 배경 색상*/}

.loginbox{width:100%; float:left;  border-radius:10px 0 10px 10px; display:flex; position:relative;}

.close_btn_cu{width:40px; height:40px; line-height:40px; text-align:center; border-radius:3px 3px 0 0; color:#d4d4d4; font-weight:700; position:absolute; right:0px; top:3px; z-index:11; transition:all 0.3s;}
.close_btn_cu  img{transition:all 0.3s;}

.loginbox_l{width:350px; position:relative;}
.loginbox_l img{position:absolute; bottom:0; left:0px;}
.loginbox_r{width:calc(100% - 350px); padding:40px 20px; height:440px; max-height:560px; overflow-y:auto; display: flex; flex-direction: column; justify-content: center; transition:all 0.5s;}
.loginbox_r::-webkit-scrollbar {width: 3px;  /* 스크롤바의 너비 */}
.loginbox_r::-webkit-scrollbar-thumb {height: 30%; /* 스크롤바의 길이 */ background: rgba(255,255,255, 0.1); /* 스크롤바의 색상 */border-radius: 5px;}
.loginbox_r::-webkit-scrollbar-track {background: rgba(255,255,255, 0.1);  /*스크롤바 뒷 배경 색상*/}

.login_logo{float:left; width:100%; text-align:center; padding:0 20px;}
.login_logo img{width:100%; max-width:250px;}
.login_title{float:left; width:100%; margin:30px 0 0 0; padding:0 0 0 10px; font-weight:300; font-size:16px; color:#ffffff;}
.login {float:left; width:100%; margin:10px 0 0 0;}
.login li {float:left; width:100%; padding:1%; transition:all 0.2s;} /* ysk 가로 100%로 변경시 세로형 */

.login1 {float:left; width:100%; margin:10px 0 0 0;}
.login1 ul{display:flex; flex-wrap:wrap;}
.login1 li {float:left; width:50%; padding:1% 1%; transition:all 0.2s;} /* ysk 가로 100%로 변경시 세로형 */
.join_title{float:left; width:100%; padding:0 0 5px; font-family:'Esamanru'; font-weight:300; font-size:12px; color:#ffffff;}
.join_text{float:left; width:100%; padding:5px 0 0; font-family:'Esamanru'; font-weight:300; font-size:12px; color:#999999;}
.join_phone{float:left; width:100%; display:flex;}
.join_phone .login_btn1{width:45%;}


.login_input  {background-color:#2c2c2c; border:1px solid #000000; color:#ffffff; width:100%; height:36px; font-size:14px; font-weight:500; border-radius:5px; padding:0 0 0 15px;  font-family:'EsaManru';}
.login_input::placeholder {color:#999999; font-size:12px; letter-spacing:0pt;}
.login_input:focus{border:1px solid #ffe6ac;}

.login_font01{font-family:'Esamanru'; font-weight:300; font-size:12px; color:#bababa;}
.login_font02{color:#ffffff;}

.login_btn_box2{float:left; width:100%; margin:10px 0 0 0; text-align:center;}
.login_btn_box2 li{float:left; width:50%; padding:1%; transition:all 0.2s; font-weight:500; font-size:14px; color:#ffffff;}
.login_btn_box2 li button{width:100%;}
.login_btn1  {background:linear-gradient(to right, #3d2a12 0%, #bb773b 20%, #f1cd6e 35%, #ffffb0 50%, #f1cd6e 65%, #bb773b 80%, #3d2a12 100%); width:100%; height:36px; line-height:36px; display:inline-block; text-align:center; border-radius:5px; font-family:'Esamanru'; font-weight:300; font-size:14px; color:#000000; text-shadow:1px 1px 1px rgba(255,255,255,0.7);}
.login_btn2  {background:linear-gradient(to right, #383838 0%, #b6b6b6 20%, #eeeeee 35%, #ffffff 50%, #eeeeee 65%, #b6b6b6 80%, #383838 100%); width:100%; height:36px; line-height:36px; display:inline-block; text-align:center; border-radius:5px; font-family:'Esamanru'; font-weight:300; font-size:14px; color:#000000; text-shadow:1px 1px 1px rgba(255,255,255,0.7);}

.login_btn1:hover{opacity:0.8;}
.login_btn2:hover{opacity:0.8;}

@media screen and (max-width:1060px) {
    .loginbox_r{height:auto;}
}
@media screen and (max-width:768px) {
    .loginbox_l{display:none;}
    .loginbox_r{width:100%}
	.login_logo{padding:0 30px;}
	.login1 li{width:100%;} 
}


/*-------------------------------------------------------------------------------------*
 *  popup                                                                              *
 *-------------------------------------------------------------------------------------*/
.main_pop_wrap {
    float: left;
    width: 100%;
    height: 100vh;
    background: rgba(0,0,0,0.6);
    position: fixed;
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

.main_pop_box {
    float: left;
    width: 500px;
    margin: 5px;
    border-radius: 10px;
    overflow: hidden;
}

.main_pop_title {
    float: left;
    width: 100%;
    height: 50px;
    line-height: 50px;
    text-align: left;
    padding: 0 20px;
    background: url(/Assets/v3/img/bg.jpg) center top repeat;
    position: relative;
}

    .main_pop_title img {
        width: 140px;
    }

.close_btn_cu {
    color: #d4d4d4;
    font-size: 30px;
    font-weight: 700;
    position: absolute;
    right: 20px;
    transition: all 0.3s;
}

    .close_btn_cu i {
        transition: all 0.3s;
    }

    .close_btn_cu:hover i {
        transform: rotate(-360deg);
    }

.main_pop_con {
    float: left;
    width: 100%;
    min-height: 600px;
    max-height: 600px;
    overflow: hidden;
    overflow-y: auto;
    background: #222222;
    text-align: center;
    padding: 10px;
    font-family: 'EsaManru';
    font-weight: 500;
    font-size: 14px;
    color: #ffffff;
    line-height: 1.4;
}

    .main_pop_con img {
        width: 100%;
    }

    .main_pop_con::-webkit-scrollbar {
        width: 3px; /* 스크롤바의 너비 */
    }

    .main_pop_con::-webkit-scrollbar-thumb {
        height: 30%; /* 스크롤바의 길이 */
        background: rgba(255,255,255, 0.1); /* 스크롤바의 색상 */
        border-radius: 5px;
    }

    .main_pop_con::-webkit-scrollbar-track {
        background: rgba(255,255,255, 0.1); /*스크롤바 뒷 배경 색상*/
    }

.main_pop_con_title {
    float: left;
    width: 100%;
    margin: 20px 0 10px 0;
    font-family: 'EsaManru';
    font-weight: 500;
    font-size: 18px;
    color: #ffffb0;
}

.main_popup_close {
    float: left;
    width: 100%;
    height: 40px;
    line-height: 40px;
    text-align: center;
}

    .main_popup_close button {
        background: linear-gradient(to right, #3d2a12 0%, #bb773b 20%, #f1cd6e 35%, #ffffb0 50%, #f1cd6e 65%, #bb773b 80%, #3d2a12 100%);
        width: 100%;
        height: 40px;
        line-height: 40px;
        display: inline-block;
        text-align: center;
        border-radius: 0px;
        font-family: 'EsaManru';
        font-weight: 500;
        font-size: 14px;
        color: #000000;
    }

        .main_popup_close button:hover {
            filter: brightness(120%);
        }

@media screen and (max-width:720px) {
    .main_pop_wrap {
    }

    .main_pop_box {
        position: absolute;
        width: 90%;
        max-width: 500px;
        margin: 0;
    }
}


/*-------------------------------------------------------------------------------------*
 *  특별한                                                                             *
 *-------------------------------------------------------------------------------------*/
.game_list{float:left; width:100%;}
.game_list li{float:left; margin:0 40px 40px 0; transition:all 0.5s;}
.game_list li:nth-child(4n){margin:0 0 40px 0;}
.game_list li a{display:block;}
.game_list li a img{width:100%;}


.money_transfer_wrap{float:left; width:100%; display:flex;}
.money_transfer_box{float:left; width:33%; margin:0 0.5% 0.5% 0; border-radius:5px; background:#242424; padding:20px;}
.money_transfer_box:nth-child(3n){margin:0 0 0.5% 0;}
.mt_text{float:left; width:100%; text-align:center; font-family: 'EsaManru'; font-weight:500; font-size:16px; color:#ffffff;}
.mt_money{float:left; width:100%; margin:10px 0; background:#191919; border:1px solid #ffb100; border-radius:5px; padding:20px 5px; text-align:center; font-family: 'EsaManru'; font-weight:500; font-size:22px; color:#ffffff; font-style:italic;}
.mt_select{float:left; width:100%; text-align:center;}
.radio_wrap{float:left; width:100%; height:36px; display: flex;  flex-wrap: wrap; align-content: center; align-items: center; justify-content:center;}
.radio_wrap label {display: flex; cursor: pointer; font-weight: 500; position: relative; overflow: hidden; margin:0 5px 0 0;}
.radio_wrap label input {position: absolute; left: -9999px;}
.radio_wrap label input:checked + span {background-color: #ffb100; color:#ffffff;}
.radio_wrap label input:checked + span:before {box-shadow: inset 0 0 0 0.4375em #ffffff;}
.radio_wrap label>span {display: flex; align-items: center; padding: 0.375em 1.75em 0.375em 1.375em; border-radius: 5px; transition: 0.25s ease; background:rgba(255,255,255,0.1); color:#eeeeee;}
.radio_wrap label>span:hover {background-color: #ffb100; color:#ffffff;}
.radio_wrap label>span:before {display: flex; flex-shrink: 0; content: ""; background-color: #242424; width: 1.5em; height: 1.5em; border-radius:5px; margin-right: 0.375em; transition: 0.25s ease; box-shadow: inset 0 0 0 0.125em #eaeaea;}
.radio_wrap label>span>span{padding:0 10px; border-radius: 5px; transition: 0.25s ease; background:#262626; color:#ffffff;}

.money_arrow{padding:0 10px;}




.my_btn1 {
    display: inline-block;
    min-width: 50px;
    height: 24px;
    line-height: 24px;
    padding: 0 10px;
    text-align: center;
    border-radius: 5px;
    background: #ffe6ac;
    border: 1px solid #ffe6ac;
    font-family: 'EsaManru';
    font-weight: 300;
    font-size: 12px;
    color: #000000;
    transition: 0.3s all ease-out;
}

    .my_btn1:hover {
        background: #000000;
        color: #ffe6ac;
    }


.notice {
    display: flex;
    align-items: center;
}

    .notice > img {
        display: inline-block;
        width: 34px;
    }