@font-face {
    font-family: '양진체';
    src: url('https://cdn.jsdelivr.net/gh/supernovice-lab/font@0.9/yangjin.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
/* set */
.container {width: 90%; max-width: 1660px; margin: 0 auto;}
#wrap {width: 100%; overflow-x: hidden; background: #222C35;}
#wrap_content {width: 100%; min-height: 100vh; overflow: hidden; position: relative;}
section {position: relative; z-index: 1;}
.login_section {position: absolute; z-index: 1; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 100%;  max-width: 605px; }
input:focus {box-shadow: 0 0 5px rgba(255,255,255,0.3);}


/* ========================= login ========================= */
/* 로그인 */
#wrap_content.login {background: url('/assets/img/civil/bg/login_bg.jpg') no-repeat center/cover;}
.login_wrap {position: relative; width: 100%; background: rgba(4, 13, 22, 0.49); border-radius: 10px;
    border: 10px solid #B9C9CF;
    box-shadow: 0px 4px 60px 100px rgba(204, 204, 204, 0.37);
}

.login_box {display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding-top: 70px;
    /*padding-bottom: 70px;*/
  }
.login_logo{
    display: block;
    width: 390px;
    margin-bottom: 47px;
}
.row {position: relative; width: 280px;}
.login_input {
    max-width: 409px;
    width: 100%;
    display: flex; align-items: center; height: 50px; padding: 12px 0;
    border: 5px solid #B9C9CF;
    background: #fff;
}

.login_img_side{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    animation:ani 1s infinite alternate;
}

.login_img_side.left{
    left: -75%;
}

.login_img_side.right{
    right: -100%;
}

@keyframes ani{
    0%{top: 50%;}
    100%{top: 52%;}
}



.login_input:first-child {margin-bottom: 20px;}
.login_input label {display: block; width: 18.16px; margin-left: 16px; font-size: 13px; }
.login_input label img{width: 100%; filter: brightness(0)}
/*.login_input input {width: calc(100% - 58px); font-size: 14px; color: #ffffff;}*/
.login_input input {width: 100%; font-size: 14px; color: #000; border-left: 2px solid #000; margin-left: 17px; padding-left: 17px;}
.login_input input::placeholder{color: #000;}
.login_input input:focus {box-shadow: none;}

.login_info {width: 100%; margin: 15px 0 30px;}
.login_info span {display: block; font-size: 13px; color: #C4DBE5;}

.login_btn {margin-top: 40px}

.login_box .btn_box {display: flex; align-items: center; justify-content: center; gap: 25px;}
.login_box .btn_box li {position: relative; font-size: 16px; color: #CBCBCB;}
.login_box .btn_box li::after {content: ''; position: absolute; top: 50%; right: -14px; display: block;
    width: 1px; height: 12px; background: #CBCBCB; transform: translateY(-50%);}
.login_box .btn_box li:last-child::after {display: none;}
.login_box .btn_box li:hover a {text-shadow: 0 0 5px rgba(255,255,255,0.5);}


.newlogin_btn{
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 15px;
}
.login_img{
    width: 143px;
}
.showIcon_wrap{
    position: relative;
}

.showIcon1, .showIcon2{
    transition: .3s;
}
.showIcon2{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
}
.newlogin_btn:hover .showIcon1{
    opacity: 0;
}

.newlogin_btn:hover .showIcon2{
    opacity: 1;
}

/* ========================= index ========================= */
/* main banner */
#wrap_content.main {position: relative;}
.bg_top_img{
    position: absolute;
    top: 70px;
    width: 100%;
    display: block;
    filter: brightness(0.5);
}
.bg_top_img:after{
    content: '';
    position: absolute;
    bottom: -100px;
    left: 50%;
    width: 110%;
    height: 200px;
    background: linear-gradient(180deg, #000 0%, #222C35 74.4%, #222C35 100%);
    filter: blur(50px);
    transform: translateX(-50%);
}
.bg_top_img img{
    width: 100%;
}

.bg_bottom_img{
    margin-top: 10rem;
    width: 100%;
    position: relative;
    background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)),
                url('/assets/img/civil/bg/bg_img_bottom.jpg') no-repeat top center / cover;
}
.bg_bottom_img_bg {
    display: none;
}
.bg_bottom_img > * {
    position: relative;
    z-index: 1;
}

.bg_top_img .subImg{
    position: absolute;
    bottom: -10%;
    width: 100%;
}

.bg_bottom_img:after{
    content: '';
    position: absolute;
    top: -84px;
    left: 50%;
    width: 110%;
    height: 200px;
    background: linear-gradient(180deg, #000 0%, #222C35 74.4%, #222C35 100%);
    filter: blur(39px);
    transform: translateX(-50%);
}

.main_banner {width: 100%; padding-top: 135px; padding-bottom: 290px;}
.banner_contents {width: 800px; margin: 0 auto;}
.banner {width: 100%;}
.banner p {font-size: 34px; color: #FFFFFF; font-weight: 100; text-align: center; margin-bottom: 10px;}
.banner p span {font-size: 34px; color: #FFFFFF; font-weight: 500;}
.banner button{
    position: relative;
    width: 310px;
    height: 86px;
    margin: 28px auto 0;
    display: block;
}
.banner button img{
    position: absolute;
    top: 0;
    width: 100%;
    z-index: -1;
}
.detail_btn {width: 154px; height: 38px; font-size: 14px;}
.gr_btn {display: block; background: #BDC5CF; border: 1px solid #C58F20; color: #FF9700; text-align: center;
    box-shadow: 0px 4px 5px rgba(0, 0, 0, 0.5); border-radius: 30px; margin: 0 auto;}
/* game list */
.game_banner {position: relative; width: 100%;}
.game_wrap {position: relative; z-index: 1;}
.game_wrap .tab_box {display: flex; align-items: center; justify-content: center; gap: 84px;}
.tab_btn {position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%;
    cursor: pointer; padding: 36px 0 43px;
    background: #09005999;
    _background-blend-mode: color-burn; }
.tab_btn:nth-child(1){border: 7px solid #fff; border-left: none;}
.tab_btn:nth-child(2){border: 7px solid #fff; border-right: none;}
/*.tab_btn:hover::after {width: 150%; background: linear-gradient(90deg, #000000 0%, rgba(0, 0, 0, 0.810012) 84.84%, rgba(0, 0, 0, 0) 100%);}*/
/*.tab_btn.active {background: #000000;}*/
.tab_btn .name{
    max-width: 337px;
}
.tab_btn p {font-size: 30px; font-family: 양진체; color: #FFFFFF; -webkit-text-stroke: 1px #000; margin-top: 10px;}


.tab_area {display: none; margin-top: 66px; min-height: 780px;}
.tab_area.active {display: block;}
.card_list {display: flex; align-items: flex-start; flex-wrap: wrap; gap: 16px;}
.card_box {position: relative; width: 255px; height: 343px; background: url('/assets/img/civil/source/card_img.png') no-repeat center/contain;
    padding: 15px 10px; cursor: pointer; transition: 0.4s;}
.card_box::after {content: ""; position: absolute; top: -10%; left: 50%; transform: translate(-50%); width: 100%; height: 100%; background: url('/assets/img/civil/icon/icon_play.png') no-repeat center; opacity: 0; z-index: 2;}
.card_box:hover:after{
    opacity: 1;
}
.card_box:hover {scale: 1.1; z-index: 10; filter: drop-shadow(4px 4px 20px rgba(176, 226, 255, 0.76));
    transform: translateY(-10px); }
.card_character {position: absolute; top: 38px; left: 50%; transform: translateX(-50%); width: 200px; height: 200px; border-radius: 50%; object-fit: cover; background-color: cadetblue; opacity: 1; z-index: 1; transition: 0.4s;}
.card_box:hover .card_character {opacity: 0.7;}
.card_box .name {position: absolute; bottom: 30px; text-align: center; left: 50%; height: 30px; width: 188px; font-size: 16px; object-fit: contain; transform: translateX(-50%); color: #4A4A4A;}

/*@keyframes gradient {*/
/*    0% {*/
/*      background-position: 100%;*/
/*    }*/
/*    100% {*/
/*      background-position: 0%;*/
/*    }*/
/*}*/
@keyframes starticon {
    0% {
      transform:translateX(-50%) rotate(0deg);
      opacity: 0;
    }
    35% {
      transform:translateX(-50%) rotate(0deg);
      opacity: 0;
    }
    50% {
      opacity: 1;
      transform:translateX(-50%) rotate(100deg) scale(1.5);

    }
    75% {
      transform:translateX(-50%) rotate(0deg);
      opacity: 0;
    }
    100% {
      transform:translateX(-50%) rotate(0deg);
      opacity: 0;
    }
}



.bank_menu_list {display: flex; align-items: center; background: rgba(91,88,88,.25);
    height: 80px; margin-top: 34px;
    border: 1px solid transparent;
    border-image: linear-gradient(116.99deg, #FFB084 0%, #573D2E 45.31%, #FFB084 100%);
    border-image-slice: 1; /* 테두리를 모두 적용합니다. */
}
.bank_menu_box {display: flex; align-items: center; justify-content: center; width: 440px;
    border-right: 1px solid rgba(255,255,255,0.1); cursor: pointer;}
.bank_menu_box p {font-size: 20px; color: #B1722A;}
.bank_menu_box p:hover {text-shadow: 0 0 5px rgba(255,255,255,.3);}
.bank_menu_box img {width: 44px; margin-right: 12px;}
.bank_submenu_box {display: flex; align-items: center; width: calc(100% - 880px);}
.submenu_box {display: flex; align-items: center; justify-content: center; width: 50%;}
.submenu_box img {width: 32px; margin-right: 12px;}
.submenu_box p {font-size: 16px; color: #B1722A; cursor: pointer;}
.submenu_box p:hover {text-shadow: 0 0 5px rgba(255,255,255,.3);}