@charset "utf-8";
/*-------------------------------------------------
Style Sheet
Version : 1.0
Author :  Kang HyeYeon
Create date : 2024. 07. 08.
-------------------------------------------------*/
html, body, main {
    height: 100%;
}
body {
    -ms-overflow-style: none;
    background: #000;
}
::-webkit-scrollbar {
    display: none;
}


/* header */
header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 200;
    padding: 50px 67px 0 77px;
    display: flex;
    align-items: start;
    justify-content: space-between;
    box-sizing: border-box;
}
header h1 a {
    display: block;
    padding-top: 28px;
}
header h1 a img {
    width: 371px;
}
header .ci_img {
    width: 290px;
    height: 115px;
    background: url(/12sky3/static/images/new/ci.png) no-repeat center;
    background-size: contain;
}

/* nav */
nav {
    position: fixed;
    top: 160px;
    right: 83px;
    z-index: 250;
}
nav .menu_thum {
    padding: 28px 0;
    padding-right: 72px;
    box-sizing: border-box;
    position: relative;
}
/*nav .menu_thum::after {
    content: '';
    width: 2px;
    height: calc(100% - 100px);
    background: rgba(255,255,255,.6);
    position: absolute;
    top: 50%;
    right: 30px;
    transform: translateY(-50%);
}*/
nav ul {
    text-align: right;
    transform: none !important;
}
nav ul li {
    height: 100% !important;
    position: relative;
}
nav ul li::after {
    content: '';
    width: 45px;
    height: 51px;
    background: url(/12sky3/static/images/new/nav_off.png) repeat-y center;
    background-size: contain;
    position: absolute;
    top: 0;
    right: -63px;
    opacity: .6;
}

nav ul li a {
    display: block;
    font-family:'Danjo-bold-Regular';
    font-size: 28px;
    line-height: 22px;
    color: rgba(255,255,255,.6);
    padding: 14.5px 0;
}
nav ul li.swiper-slide-thumb-active a {
    color: #fff;
    text-shadow: 1px 1px 12px #ff0000;
}


nav ul li.swiper-slide-thumb-active a::after {
    content: '';
    width: 65px;
    height: 65px;
    background: url(/12sky3/static/images/new/nav_on.png) no-repeat center;
    background-size: contain;
    position: absolute;
    top: -8px;
    right: -73px;
    z-index: 10
}

nav ul li a:hover {
    color: #fff;
    text-shadow: 1px 1px 12px #ff0000;
}
nav ul li a:hover::after  {
    content: '';
    width: 65px;
    height: 65px;
    background: url(/12sky3/static/images/new/nav_on.png) no-repeat center;
    background-size: contain;
    position: absolute;
    top: -8px;
    right: -73px;
    z-index: 10
}

/* floating_wrap */
.floating_wrap {
    position: fixed;
    bottom: 170px;
    right: 58px;
    display: flex;
    flex-direction: column;
    justify-content: end;
    z-index: 150;
}
.floating_wrap a {
    display: block;
    background-size: contain !important;
    padding-top: 46px;
    padding-left: 36px;
    box-sizing: border-box;
    text-shadow: 1px 1px 4px #000;
}

.containers a {
    display: unset;
    background-size: unset !important;
    padding-top: 0px;
    padding-left: 0px;
    box-sizing: unset;
    text-shadow: unset;
    margin-left: 10px;
}
.floating_wrap a.forum_go {
    width: 390px;
    height: 156px;
    background: url(/12sky3/static/images/new/forum_bg.png) no-repeat center;
    padding-top: 65px;
}
.floating_wrap a.youtube_go {
    width: 390px;
    height: 156px;
    background: url(/12sky3/static/images/new/youtube_bg.png) no-repeat center;
    margin-top: -14px;
    padding-top: 65px;
}

.floating_wrap a.recharge_go {
    width: 390px;
    height: 156px;
    background: url(/12sky3/static/images/new/recharge_bg.png) no-repeat center;
    position: fixed;
    left: 25px;
}
.floating_wrap a > strong {
    font-size: 25px;
    color: #fff;
    font-family:'Danjo-bold-Regular';
}
.floating_wrap a > strong span {
    color: #eed9b3;
    font-family:'Danjo-bold-Regular';
}
.floating_wrap a > span {
    display: block;
    font-size: 22px;
    font-family:'Danjo-bold-Regular';
    color: #fff;
    margin-top: -7px;
}
.floating_wrap a > span > span {
    color: #bd8b50;
    font-family:'Danjo-bold-Regular';
}

/* footer */
/*footer {
    position: fixed;
    width: 100%;
    text-align: center;
    bottom: 108px;
    z-index: 20;
}
footer p {
    font-size: 16px;
    color: #fff;
    opacity: .2;
}*/
.copy {
    position: absolute;
    width: 100%;
    text-align: center;
    bottom: 80px;
    z-index: 20;
    font-size: 14px;
    color: #fff;
    opacity: .2;
    letter-spacing: 0;
}


/* layout, common */
#slide_wrap {
    height: 100%;
}
/*.container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    box-sizing: border-box;
}*/
.container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: start;
    width: 100%;
    height: 880px;
    /*height: calc(100% - 280px);*/
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    box-sizing: border-box;
}
.btn {
    display: block;
    width: 556px;
    height: 174px;
    line-height: 156px;
    background: url(/12sky3/static/images/new/btn_bg.png) no-repeat center;
    background-size: contain;
}
.btn span {
    display: block;
    font-size: 36px;
    font-family: 'Danjo-bold-Regular';
    background: linear-gradient(to bottom, #d4b475 36%, #fff4df 60%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-align: center;
    transition: all .5s ease;
    font-weight: 600;
}
.btn:hover span {
    text-shadow: 0px 0px 9px #fff4df;
}
.btn.sm_btn {
    display: block;
    width: 433px;
    height: 145px;
    line-height: 128px;
    background: url(/12sky3/static/images/new/sm_btn_bg.png) no-repeat center;
    background-size: contain;
}
.btn.sm_btn span {
    display: block;
    font-size: 27px;
    font-family: 'Danjo-bold-Regular';
    background: linear-gradient(to bottom, #d4b475 36%, #fff4df 60%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-align: center;
}
.sub_tit {
    font-size: 26px;
    background: linear-gradient(to bottom, #ffe9b2 50%, #8b7132 95%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-top: 30px;
    filter: drop-shadow(1px 1px 2px #000);
    position: relative;
    font-weight: 600;
}
.sub_tit_lg {
    font-size: 30px;
    font-family: 'Danjo-bold-Regular';
    background: linear-gradient(to bottom, #ffe9b2 40%, #8b7132 90%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-top: 30px;
    filter: drop-shadow(1px 1px 2px #000);
    position: relative;
}

/* page btn */
.main_btn_prev,
.main_btn_next {
    width: 111px;
    height: 151px;
    background: url(/12sky3/static/images/new/arrow.png) no-repeat center;
    background-size: contain;
    position: fixed;
    top: 50%;
    right: 90px;
    transform: translateY(-50%);
    z-index: 150;
    cursor: pointer;
}
.main_btn_prev {
    transform: translateY(-50%) rotate(180deg);
    right: auto;
    left: 90px;
}
.swiper-button-disabled {
    opacity: 0.4;
    cursor: default;
}


/* checkbox, radio */
.radio_box {
    display: inline-block;
    *display: inline;
    *zoom: 1;
    position: relative;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    font-size: 24px;
    padding-left: 34px;
    line-height: 24px;
    margin-right: 45px;
    cursor: pointer;
}
.radio_box input[type="radio"] {
    display: none;
}
.radio_check {
    width: 25px;
    height: 25px;
    background: #000;
    border: 2px solid #878a90;
    border-radius: 50%;
    box-sizing: border-box;
    position: absolute;
    top: 0;
    left: 0;
}
.radio_check:after {
    content: "";
    position: absolute;
    display: none;
    width: 14px;
    height: 14px;
    background: #ff0000; 
    border-radius: 50%;
    position: absolute;
    left: 4px;
    top: 4px;
}
.radio_box input[type="radio"]:checked + .radio_check:after {
    display: block;
}

.check_box {
    display: inline-block;
    *display: inline;
    *zoom: 1;
    position: relative;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    color: #9ba1a9;
    font-size: 16px;
    padding-left: 30px;
    line-height: 24px;
    margin-right: 20px;
    cursor: pointer;
}
.check_box input[type="checkbox"] {
    display: none;
}
.check_box strong {
    color: #dcbb91;
    font-weight: 400;
}
.check_check {
    width: 24px;
    height: 24px;
    background: #000;
    border: 2px solid #515151;
    box-sizing: border-box;
    position: absolute;
    top: 0;
    left: 0;
}
.check_check:after {
    content: "";
    position: absolute;
    display: none;
    width: 26px;
    height: 26px;
    background: url(/12sky3/static/images/new/check_i.png) no-repeat center;
    background-size: contain;
    position: absolute;
    left: 1px;
    top: -7px;
}
.check_box input[type="checkbox"]:checked + .check_check:after {
    display: block;
}

/* main */
.main_wrap .container {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 0;
}
/*.main_wrap .slogan {
    font-size: 64px;
    color: #fff;
    background-image: url(/12sky3/static/images/new/pattern.jpg);
    background-repeat: no-repeat;
    background-size: 170%;
    background-position: 65% 0%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-align: center;
    font-family: 'Danjo-bold-Regular';
    text-shadow: 10px 0 10px rgba(0,0,0,.52);
}*/
.main_wrap .slogan {
    width: 681px;
    height: 76px;
    background: url(/12sky3/static/images/new/slogan.png) no-repeat center;
    background-size: cover;
}
.main_wrap .slogan small {
    font-size: 56px;
    font-family: 'Danjo-bold-Regular';
}
.main_wrap .main_bi {
    width: 1184px;
    height: 397px;
    background: url(/12sky3/static/images/new/bi.png) no-repeat center;
    background-size: contain;
    /*margin-top: -76px;*/
}
.main_wrap .text {
    /*width: 801px;
    height: 88px;
    background: url(/12sky3/static/images/new/date.png) no-repeat center;
    background-size: contain;
    margin-top: -16px;*/
}
.main_wrap .btn {
    margin-top: 36px;
}

.main_wrap_button{
    display: flex;
}

/* regist */
.regist_wrap {
    width: 100%;
    height: 100%;
    background: url(/12sky3/static/images/new/regist/bg.jpg) no-repeat center;
    background-size: cover;
}
.regist_wrap .container {
    align-items: center;

}
.regist_wrap .tit {
    width: 538px;
    height: 95px;
    background: url(/12sky3/static/images/new/regist/tit.png) no-repeat center;
    background-size: contain;
}
.regist_wrap .date {
    font-size: 30px;
    font-family: 'Danjo-bold-Regular';
    background: linear-gradient(to bottom, #fff9dd 40%, #ffe3a4 80%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(1px 1px 4px #333);
    will-change: transform;
    position: relative;
    z-index: 5;
    margin-top: 5px;
}
.regist_wrap .date::after {
    content: '사전등록 기간 : 2024년 8월 27일 ~ 추후 안내 시까지';
    font-size: 30px;
    font-family: 'Danjo-bold-Regular';
    -webkit-text-stroke: 1px #6a5f58;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
}
.regist_wrap .form_wrap {
    display: flex;
    width: 100%;
    max-width: 1376px;
    justify-content: space-between;
    align-items: center;
    background: url(/12sky3/static/images/new/regist/pattern_bg.png) no-repeat center;
    background-size: cover;
    margin-top: 10px;
    padding: 72px 0 21px;
    /*box-shadow: 1px 1px 5px rgba(0,0,0,.45);*/
    position: relative;
}
/*.regist_wrap .form_wrap::after {
    content: 'coming soon';
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(0, 0, 0, .8);
    text-align: center;
    color: #fff;
    font-size: 66px;
    font-family: 'Danjo-bold-Regular';
    text-transform: uppercase;
    position: absolute;
    top: 0;
    left: 0;
    letter-spacing: 1px;
}*/
.regist_wrap .form_wrap .reward_item {
    position: relative;
    margin-top: -80px;
    padding-left: 60px;
}
.regist_wrap .form_wrap .reward_item .item_img {
    width: 479px;
    height: 406px;
    background: url(/12sky3/static/images/new/regist/item.png) no-repeat center;
    background-size: contain;
}
.regist_wrap .form_wrap .reward_item .item_name {
    font-family: 'Danjo-bold-Regular';
    color: #e4ceb5;
    font-size: 24px;
    line-height: 30px;
    text-align: center;
    /*position: absolute;
    bottom: 145px;
    right: 70px;*/
}
.regist_wrap .form_wrap .item_name span {
    font-family: 'Danjo-bold-Regular';
}
.regist_wrap .form_wrap fieldset {
    width: 100%;
    max-width: 793px;
}
.regist_wrap .form_wrap fieldset i {
    display: inline-block;
    background-size: contain !important;
    vertical-align: middle;
    margin-right: 5px;
}
.regist_wrap .form_wrap fieldset .google_i {
    width: 23px;
    height: 24px;
    background: url(/12sky3/static/images/new/regist/google_i.png) no-repeat center;
}
.regist_wrap .form_wrap fieldset .apple_i {
    width: 22px;
    height: 27px;
    background: url(/12sky3/static/images/new/regist/apple_i.png) no-repeat center;
}
fieldset .input_area {
    width: 100%;
    max-width: 676px;
    margin-top: 40px;
}
fieldset .input_area > div {
    display: flex;
    justify-content: space-between;
}
fieldset .input_area input[type="text"],
fieldset .input_area input[type="tel"] {
    width: 100%;
    max-width: 460px;
    height: 75px;
    line-height: 75px;
    font-family: 'NanumSquareNeoExtraBold';
    font-size: 24px;
    color: #333333;
    padding-left: 24px;
    box-sizing: border-box;
    border: 1px solid #000;
    background: #e8e8e9;
}
fieldset .input_area input::placeholder {
    font-size: 22px;
    color: #999999;
    font-family: 'NanumSquareNeoBold';
}
fieldset .input_area > div button {
    display: block;
    width: 100%;
    max-width: 217px;
    height: 75px;
    line-height: 75px;
    text-align: center;
    margin-left: 2px;
    color: #d6d7d9;
    font-size: 17px;
    font-weight: 700;
    position: relative;
}
fieldset .input_area .phone_num button {
    background: url(/12sky3/static/images/new/regist/red_btn_bg.png) no-repeat center;
    background-size: contain;
}
fieldset .input_area .cert_num button {
    background: url(/12sky3/static/images/new/regist/gray_btn_bg.png) no-repeat center;
    background-size: contain;
}
fieldset .input_area .cert_num {
    margin-top: 4px;
}
fieldset .input_area .cert_num div {
    width: 100%;
    position: relative;
}
fieldset .input_area .cert_num div span {
    font-size: 18px;
    color: #999999;
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    font-family: 'NanumSquareNeoBold';
}
.regist_wrap .form_wrap .agree_area {
    margin-top: 26px;
}
.regist_wrap .form_wrap .agree_area label:nth-of-type(3) {
    display: block;
    margin-top: 8px;
}
.regist_wrap .form_wrap .agree_area button {
    display: inline-block;
    font-size: 12px;
    color: #dcbb91;
    border-bottom: 1px solid #dcbb91;
    margin-left: 8px;
}
.regist_wrap .form_wrap .sm_btn {
    margin: auto;
    transform: translateX(-48px);
    margin-top: 12px;
}
.regist_wrap .app_reward_wrap {
    width: 100%;
    max-width: 1376px;
    height: 164px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: url(/12sky3/static/images/new/regist/app_reward_bg.png) no-repeat center;
    background-size: cover;
    margin-top: 13px;
    padding: 0px 145px;
    box-sizing: border-box;
}
.regist_wrap .app_reward_wrap .app_area {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.regist_wrap .app_reward_wrap .app_area a {
    display: block;
    width: 340px;
    height: 84px;
    background-size: contain !important;
    margin-right: 9px;
}
.regist_wrap .app_reward_wrap .app_area a.google_btn{
    background: url(/12sky3/static/images/new/regist/google_btn.png) no-repeat center;
}
.regist_wrap .app_reward_wrap .app_area a.appstore_btn {
    background: url(/12sky3/static/images/new/regist/appstore_btn.png) no-repeat center;
}
.regist_wrap .app_reward_wrap .app_area a.kakao_btn {
    background: url(/12sky3/static/images/new/regist/kakao_btn.png) no-repeat center;
}
/*.regist_wrap .app_reward_wrap .bonus_reward {
    display: flex;
    align-items: center;
}
.regist_wrap .app_reward_wrap .bonus_reward .item_img {
    width: 255px;
    height: 135px;
    background: url(/12sky3/static/images/new/regist/bonus_item.png) no-repeat center;
    background-size: contain;
}
.regist_wrap .app_reward_wrap .bonus_reward p {
    font-size: 36px;
    line-height: 36px;
    background-image: url(/12sky3/static/images/new/pattern.jpg);
    background-repeat: no-repeat;
    background-size: 170%;
    background-position: 10% 20%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 1px 1px 5px rgba(0,0,0,.25);
    filter: drop-shadow(1px 1px 4px #333);
    font-family: 'Danjo-bold-Regular';
    margin-left: -9px;
}
.regist_wrap .app_reward_wrap .bonus_reward p span {
    display: block;
    font-size: 26px;
    font-family: 'Danjo-bold-Regular';
}*/

/* regist_event */
.regist_event_wrap {
    background: url(/12sky3/static/images/new/regist_event/bg.jpg) no-repeat center;
    background-size: cover;
}
.regist_event_wrap .tit {
    width: 790px;
    height: 95px;
    background: url(/12sky3/static/images/new/regist_event/tit.png) no-repeat center;
    background-size: contain;
}
.regist_event_wrap .sub_tit {
    margin-top: 8px;
}
.regist_event .bar_wrap {
    width: 1866px;
    height: 50px;
    background: url(/12sky3/static/images/new/regist_event/bar.png) no-repeat center;
    background-size: 100%;
    position: relative;
    overflow: hidden;
    margin-top: 33px;
}
.regist_event .bar_wrap .bar_inner {
    width: 0;
    max-width: 1810px;
    height: 35px;
    background: linear-gradient(to right, #5c0c00 -40%, #e00012 70%, #ffa303 100%);
    position: absolute;
    top: 6px;
    left: 30px;
    z-index: -1;
}
.regist_event.complete_00 .bar_wrap .bar_inner {
    width: 186px;
}
.regist_event.complete_01 .bar_wrap .bar_inner {
    width: 543px;
}
.regist_event.complete_02 .bar_wrap .bar_inner {
    width: 902px;
}
.regist_event.complete_03 .bar_wrap .bar_inner {
    width: 1260px;
}
.regist_event.complete_04 .bar_wrap .bar_inner {
    width: 1618px;
}
.regist_event.complete_end .bar_wrap .bar_inner {
    width: 100%;
}
.regist_event .bar_wrap .bar_inner::before {
    content: ' ';
    height: 0;
    width: 0;
    border: 19px solid transparent;
    border-left-width: 0;
    border-right-color: #860300;
    position: absolute;
    top: 0;
    left: -18px;
}
.regist_event .bar_wrap .bar_inner::after {
    content: ' ';
    height: 0;
    width: 0;
    border: 19px solid transparent;
    border-right-width: 0;
    border-left-color: #ffa303;
    position: absolute;
    top: 0;
    right: -18px;
    display: none;
}
.regist_event.complete_end .bar_wrap .bar_inner::after {
    display: block;
}
.regist_event .reward_list {
    padding: 0 49px;
}
.regist_event .reward_list ul {
    display: flex;
    justify-content: space-between;
}
.regist_event .reward_list li {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    flex-direction: column;
}
.regist_event .reward_list li i {
    width: 28px;
    height: 24px;
    background: url(/12sky3/static/images/new/regist_event/arrow_i.png) no-repeat center;
    background-size: contain;
    position: absolute;
    top: -6px;
    left: 50%;
    transform: translateX(-50%);
}
.regist_event .reward_list li .num {
    margin-top: 20px;
}
.regist_event .reward_list li .num strong {
    font-size: 60px;
    position: relative;
    background-image: url(/12sky3/static/images/new/pattern.jpg);
    background-repeat: no-repeat;
    background-size: 230%;
    background-position: center;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(1px 1px 3px #333);
    font-family: 'Danjo-bold-Regular';
    padding: 20px 0;
}
.regist_event .reward_list li .num strong::after {
    -webkit-text-stroke: 4px #000;
    position: absolute;
    top: -6px;
    left: 0;
    z-index: -5;
}
.regist_event .reward_list li:nth-child(1) .num strong::after {
    content: '10';
}
.regist_event .reward_list li:nth-child(2) .num strong::after {
    content: '20';
}
.regist_event .reward_list li:nth-child(3) .num strong::after {
    content: '30';
}
.regist_event .reward_list li:nth-child(4) .num strong::after {
    content: '50';
}
.regist_event .reward_list li:nth-child(5) .num strong::after {
    content: '100';
}
.regist_event .reward_list li .num span {
    font-size: 42px;
    background-image: url(/12sky3/static/images/new/pattern.jpg);
    background-repeat: no-repeat;
    background-size: 170%;
    background-position: 10% 20%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(1px 1px 3px #333);
    font-family: 'Danjo-bold-Regular';
    position: relative;
    padding: 16px 0;
}
.regist_event .reward_list li .num span::after {
    content: '만명';
    -webkit-text-stroke: 3px #000;
    position: absolute;
    top: -3px;
    left: 0;
    z-index: -1;
}

.regist_event .reward_list li div {
    position: relative;
    margin-top: 13px;
}
.regist_event .reward_list li.complete div::after {
    content: '';
    width: 100%;
    height: 100%;
    background: url(/12sky3/static/images/new/regist_event/complete.png) no-repeat center;
    background-size: contain;
    position: absolute;
    top: -4px;
    left: 0;
}
.regist_event .reward_list li div p {
    width: 100%;
    position: absolute;
    bottom: 55px;
    text-align: center;
    font-size: 22px;
    line-height: 30px;
    color: #a5a5a5;
    z-index: 5;
}
.regist_event .reward_list li.complete div p {
    color: #c44f39;
}

/* event_notice */
.event_notice {
    text-align: center;
    opacity: 0.5;
    margin-top: 22px;
}
.event_notice li {
    font-size: 19px;
    color: #fff;
}

/* feature */
.feature_wrap {
    background: url(/12sky3/static/images/new/features-bg.jpg) no-repeat center;
    background-size: cover;
}
.feature_wrap::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url(/12sky3/static/images/new/bg.png) repeat left top;
    background-size: contain;

}
.feature_wrap .tit {
    width: 343px;
    height: 95px;
    background: url(/12sky3/static/images/new/tit.png) no-repeat center;
    background-size: contain;
}
.feature_wrap .sub_tit {
    margin-top: 7px;
}
.feature_cont {
    width: 1900px;
    margin-top: 77px;
}
.feature_cont ul {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.feature_cont ul li {
    width: 175px;
    height: 626px;
    transition: all .5s ease-in-out;
    position: relative;
    overflow:hidden;
    cursor: pointer;
}
.feature_cont ul li.comingsoon {
    pointer-events: none;
    cursor: default;
}
.feature_cont ul li img {
    width: 203px;
    height: 525px;
    position: absolute;
}
.feature_cont .feature_thum {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
.feature_cont .feature_thum dl {
    width: 100%;
    text-align: center;
    position: relative;
    z-index: 10;
}
.feature_cont .feature_thum dl dt {
    font-size: 14px;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 8px;
    font-family: 'NanumSquareNeoBold';
}
.feature_cont .feature_thum dl dd {
    font-size: 25px;
    color: #fff;
    line-height: 35px;
    font-family: 'Danjo-bold-Regular';
    margin-top: 13px;
}
.comingsoon .feature_thum dl dt {
    font-size: 14px;
    color: #5d5d5d;
    text-transform: uppercase;
    letter-spacing: 8px;
    font-family: 'NanumSquareNeoBold';
}
.comingsoon .feature_thum dl dd {
    font-size: 25px;
    color: #5d5d5d;
    line-height: 35px;
    font-family: 'Danjo-bold-Regular';
    margin-top: 13px;
}
.feature_cont .feature_details {
    width: 748px;
    height: 100%;
    position: relative;
    opacity: 0;
    z-index: -50;
    /*display: none;*/
}
.feature_cont .active .feature_details {
    /*display: block;*/
}
.feature_cont .feature_details img {
        width: 450px;
    height: 626px;
    opacity: .5;
    transition: all .3s ease-in-out;
}
.feature_cont .feature_details div {
    position: absolute;
    opacity: 0;
    left: 300px;
    top: 50%;
    transform: translateY(-50%);
}
.feature_cont .active .feature_details div {
    animation: feature_txt .5s ease-in-out .3s forwards;
}
@keyframes feature_txt {
    0% {
        opacity: 0;
        left: 300px;
    }
    100% {
        opacity: 1;
        left: 282px;
    }
}
.feature_cont .feature_details div p {
    font-size: 16px;
    color: #e80000;
    text-transform: uppercase;
    letter-spacing: 8px;
    font-family: 'NanumSquareNeoBold';
}
.feature_cont .feature_details div dl dt {
    font-size: 55px;
    background-image: url(/12sky3/static/images/new/pattern.jpg);
    background-repeat: no-repeat;
    background-size: 370%;
    background-position: 67% 25%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, .05);
    filter: drop-shadow(1px 1px 8px #000);
    font-family: 'Danjo-bold-Regular';
    margin-top: 17px;
    letter-spacing: -1.5px;
}
.feature_cont .feature_details div dl dd {
    font-size: 22px;
    line-height: 30px;
    color: #fff;
    opacity: 0.7;
    margin-top: 20px;
    text-shadow: 10px 5px 12px #000000; /* 添加文字阴影 */
}
.feature_cont ul li.active {
    width: 730px;
}
.feature_cont ul li.active .feature_thum {
    display: none;
    opacity: 0;
}
.feature_cont ul li.active .feature_details,
.feature_cont ul li.active .feature_details img {
    opacity: 1;
}

/* class */
.class_wrap {
    background: url(/12sky3/static/images/new/class-bg.jpg) no-repeat center;
    background-size: cover;
}
.class_wrap::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url(/12sky3/static/images/new/bg.png) repeat left top;
    background-size: contain;
}
/*.class_wrap .container {
    height: 1013px;
}*/
.class_wrap .tit {
    width: 346px;
    height: 95px;
    background: url(/12sky3/static/images/new/class-tit.png) no-repeat center;
    background-size: contain;
}
.class_wrap .sub_tit {
    margin-top: 8px;
    z-index: 15;
}
.class_cont {
    width: 1131px;
    height: 970px;
    background: url(/12sky3/static/images/new/cont_bg.png) no-repeat center;
    /*background-size: cover;*/
    background-size: 1131px 720px;
    position: relative;
    margin-top: 76px;
    margin-left: -315px;
    padding-left: 310px;
    padding-right: 160px;
    box-sizing: border-box;
}
.class_cont::after {
    content: '';
    width: 752px;
    height: 789px;
    /*background: url(/12sky3/static/images/new/class/blood.png) no-repeat center;*/
    background-size: contain;
    position: absolute;
    top: -15px;
    right: -500px;
}
.class_cont .class_symbol {
    width: 387px;
    height: 143px;
    display: flex;
    justify-content: center;
    position: absolute;
    bottom: 8px;
    z-index: 50;
}
.class_cont .class_symbol li {
    width: 129px;
    height: 100%;
    background-image: url(/12sky3/static/images/new/symbol_off.png?v20241218);
    background-repeat: no-repeat;
}
.class_cont .class_symbol li:nth-child(1) {
    background-position: -8px center;
}
.class_cont .class_symbol li:nth-child(2) {
    background-position: -156px center;
}
.class_cont .class_symbol li:nth-child(3) {
    background-position: -304px center;
}

.class_cont .class_symbol li:hover,
.class_cont .class_symbol li.active {
    background-image: url(/12sky3/static/images/new/symbol_on.png?v20241218);
}
.class_cont .class_symbol li a {
    display: block;
    width: 100%;
    height: 100%;
}
.class_cont .class_detail {
    margin-top: 10px;
}
.class_cont .class_detail > div {
    display: none;
}
.class_cont .class_detail > div.active {
    display: block;
}
.class_cont .class_detail .name {
    font-size: 60px;
    background-image: url(/12sky3/static/images/new/pattern.jpg);
    background-repeat: no-repeat;
    background-size: 170%;
    background-position: 60% 50%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, .15);
    filter: drop-shadow(1px 1px 4px #000);
    font-family: 'Danjo-bold-Regular';
    text-transform: uppercase;
    position: relative;
    z-index: 10;
    letter-spacing: -2px;
}
.class_cont .class_detail .type span {
    font-size: 30px;
    background-image: url(/12sky3/static/images/new/pattern.jpg);
    background-repeat: no-repeat;
    background-size: 170%;
    background-position: 45% 35%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, .15);
    filter: drop-shadow(1px 1px 4px #000);
    font-family: 'Danjo-bold-Regular';
    text-transform: uppercase;
    margin-top: -8px;
    margin-right: 25px;
    padding: 10px 0;
}
.class_cont .class_detail .desc {
    font-size: 20px;
    color: #d0d5dd;
    margin-bottom: 15px;
    position: relative;
    z-index: 20
}
.class_cont .class_detail p {
    opacity: 0;
    transform: translateY(30px);
}
.class_cont .class_detail .active .name {
    animation: classtxt 0.7s ease-in-out forwards;
}
.class_cont .class_detail .active .type {
    animation: classtxt 0.7s ease-in-out .2s forwards;
}
.class_cont .class_detail .active .desc {

    animation: classtxt 0.7s ease-in-out .4s forwards;
}
.class_cont .class_detail .dekan .name {
    position: relative;
}
.class_cont .class_detail .dekan .name::after {
    content: '';
    width: 164px;
    height: 55px;
    background: url(/12sky3/static/images/new/class/update_ico.png) no-repeat center;
    background-size: contain;
    position: absolute;
    top: -50px;
    left: -10px;
}
@keyframes classtxt {
    0% {
        opacity: 0;
        transform: translateY(30px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}
.class_cont .class_detail .img {
    background-size: contain !important;
    position: absolute;
    z-index: 10;
    bottom: calc(100% - 800px);
    transition: all .5s ease-in-out;
}
.class_cont .class_detail .active .img {
    animation: classImg 1s ease-in-out;
}
@keyframes classImg {
    0% {
        opacity: 0;
        transform: translateX(50px);
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}
.class_cont .class_detail .human .img {
    width: 887px;
    height: 871px;
    background: url(/12sky3/static/images/new/human_img.png?ver=2) no-repeat center;
    right: -400px;
    top:-200px;
}
.class_cont .class_detail .elf .img {
    width: 1141px;
    height: 922px;
    background: url(/12sky3/static/images/new/elf_img.png?ver=2) no-repeat center;
    right: -410px;
    top:-200px;
}
.class_cont .class_detail .half_elf .img {
    width: 1031px;
    height: 896px;
    background: url(/12sky3/static/images/new/half_elf_img.png?ver=2) no-repeat center;
    right: -400px;
    top:-200px;
}


/* rolex_event */
.rolex_event_wrap {
    background: url(/12sky3/static/images/new/rolex_event/bg.jpg) no-repeat center;
    background-size: cover;
    position: relative;
}
.rolex_event_wrap::after {
    content: '';
    width: 100%;
    height: 100%;
    background: #000;
    opacity: .85;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
}
.rolex_event_wrap::before {
    content: '';
    width: 957px;
    height: 316px;
    background: url(/12sky3/static/images/new/rolex_event/coming_soon.png) no-repeat center;
    background-size: contain;
    position: absolute;
    top: 50%;
    left: calc(50% - 140px);
    transform: translate(-50%,-50%);
    z-index: 11;
}
.rolex_event_wrap .event_img {
    width: 961px;
    height: 937px;
    background: url(/12sky3/static/images/new/rolex_event/cont_img.png) no-repeat center;
    background-size: contain;
    margin-left: 500px;
}

/* bottom_banner */
.bottom_banner {
    width: 100%;
    height: 220px;
    background: url(/12sky3/static/images/new/ba_bg.png) no-repeat center bottom;
    background-size: 100% 145px;
    position: fixed;
    bottom: -4px;
    left: 0;
}
.bottom_banner li {
    
}
.bottom_banner li div {
    width: 100%;
    height: 145px;
    position: absolute;
    bottom: 0;
    z-index: 60;
    cursor: pointer;
}
.bottom_banner li.regist_e::after {
    content: '';
    width: 100%;
    height: 220px;
    background: url(/12sky3/static/images/new/ba_01.png) no-repeat center;
    background-size: contain;
    position: absolute;
    bottom: 0;
    left: 0;
}
.bottom_banner li.nickname_e::after {
    content: '';
    width: 100%;
    height: 220px;
    background: url(/12sky3/static/images/new/ba_02.png?ver-2) no-repeat center;
    background-size: contain;
    position: absolute;
    bottom: 0;
    left: 0;
}
.bottom_banner li.forum_b::after {
    content: '';
    width: 100%;
    height: 220px;
    background: url(/12sky3/static/images/new/ba_03.png) no-repeat center;
    background-size: contain;
    position: absolute;
    bottom: 0;
    left: 0;
}
.bottom_banner li.youtube_b::after {
    content: '';
    width: 100%;
    height: 220px;
    background: url(/12sky3/static/images/new/ba_04.png) no-repeat center;
    background-size: contain;
    position: absolute;
    bottom: 0;
    left: 0;
}

/* layer */
.layer_deem {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #000;
    opacity: .7;
    z-index: 500;
    display: none;
}
.layer_wrap {
    width: 574px;
    max-height: 476px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    border: 1px solid #515151;
    background: #000;
    box-sizing: border-box;
    z-index: 510;
    display: none;
}
.layer_wrap .layer_head button {
    display: block;
    width: 107px;
    height: 107px;
    background: url(/12sky3/static/images/new/layer_close_btn.png) no-repeat center;
    background-size: contain;
    position: absolute;
    top: 0;
    right: 0;
}
.terms_layer .layer_body {
    padding: 56px 40px;
}
.terms_layer .layer_body h3 {
    font-size: 18px;
    line-height: 26px;
    font-family: 'NanumSquareNeoLight';
    color: #dcbb91;
    margin-bottom: 24px;
}
.terms_layer .layer_body div {
    margin-top: 25px;
}
.terms_layer .layer_body div p,
.terms_layer .layer_body div li {
    font-size: 16px;
    color: #9ba1a9;
    word-break: break-all;
}
.terms_layer .layer_body div p a {
    text-decoration: underline;
}


.layer_wrap.media_layer {
    width: 1670px;
    height: 939px;
    max-height: 100%;
    border-color: #000;
    box-shadow: 3px 3px 8px rgba(0,0,0,.49);
    background: none;
}
.layer_wrap.media_layer .layer_head button {
    top: -24px;
    right: -107px;
}
.layer_wrap.media_layer video,.layer_wrap.media_layer iframe {
    width: 100% !important;
    height: 100% !important;
    position: absolute;

}

.layer_wrap.text_layer {
    background: url(/12sky3/static/images/new/text_bg.png) no-repeat center;
    background-size: contain;
    width: 1670px;
    height: 939px;
    max-height: 100%;
    border-color: #000;
    box-shadow: 3px 3px 8px rgba(0,0,0,.49);
}
.article_content {
    padding: 30px;
    font-size: 16px;
    line-height: 1.6;
}
.article_content h2 {
    margin-bottom: 15px;
    font-size: 30px;
    background: linear-gradient(to bottom, #f1d9cb 50%, #916a51 95%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
#text-content{
    width: 1612px;
    height: 830px;
    overflow: overlay;
}
#text-content::-webkit-scrollbar {
    display: block;
    width: 12px;
    height: 12px;
}

#text-content::-webkit-scrollbar-track {
    background-color: #f1f1f1;
    border-radius: 6px;
}

#text-content::-webkit-scrollbar-thumb {
    background-color: #888;
    border-radius: 6px;
    border: 3px solid #f1f1f1;
}

#text-content::-webkit-scrollbar-thumb:hover {
    background-color: #555;
}

#text-content::-webkit-scrollbar-button {
    display: none;
}
.article_content p {
    margin-bottom: 10px;
    color:#d9a787;
    font-size: 22px;
}
.article_content span {
    margin-bottom: 10px;
    color:#d9a787;
    font-size: 22px;
    text-wrap: balance !important;
}
.layer_wrap.text_layer .layer_head button {
    top: -24px;
    right: -107px;
}
.layer_wrap.text_layer video,.layer_wrap.text_layer iframe {
    width: 100% !important;
    height: 100% !important;
    position: absolute;

}


/* media */
.media_wrap {
    background: url(/12sky3/static/images/new/media/bg.jpg) no-repeat center;
    background-size: cover;
}
.media_wrap .tit {
    width: 261px;
    height: 98px;
    background: url(/12sky3/static/images/new/media/tit.png) no-repeat center;
    background-size: contain;
}
.media_thum_wrap li div {
    position: relative;
}
.media_thum_wrap li div a {
    display: block;
    width: 100%;
    height: 100%;
    /*background: url(/12sky3/static/images/new/play_btn.png) no-repeat center;*/
    background-size: 167px auto;
    position: absolute;
    top: 0;
    left: 0;
}

/* nickname */
.nickname_wrap {
    background: url(/12sky3/static/images/new/nickname_event/bg.jpg) no-repeat center;
    background-size: cover;
}
.nickname_wrap .tit {
    width: 725px;
    height: 93px;
    background: url(/12sky3/static/images/new/nickname_event/tit.png) no-repeat center;
    background-size: contain;
}
.nickname_wrap .sub_tit_lg {
    margin-top: 10px;
}
.nickname_coming .coming {
    width: 775px;
    height: 210px;
    background: url(/12sky3/static/images/new/nickname_event/coming.png) no-repeat center;
    background-size: contain;
    margin: 14px auto 0;
}
.nickname_coming .d_day {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: -8px;
}
.nickname_coming .d_day span {
    font-size: 130px;
    background-image: url(/12sky3/static/images/new/pattern.jpg);
    background-repeat: no-repeat;
    background-size: 250%;
    background-position: 67% 44%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(1px 1px 3px #000);
    font-family: 'NanumSquareNeoHeavy';
}
.nickname_coming .d_day span.hour,
.nickname_coming .d_day span.min,
.nickname_coming .d_day span.sec {
    width: 185px;
    text-align: center;
}
.nickname_coming .d_day span.brown {
    background-image: url(/12sky3/static/images/new/pattern_brown.png);
    background-position: 50% 98%;
    text-shadow: 1px 1px 0px rgba(255, 255, 255, .2);
    background-size: 550%;
}
.nickname_coming .d_day span.brown.day {
    margin-right: 75px;
}
.nickname_coming .d_day small {
    font-size: 100px;
    background-image: url(/12sky3/static/images/new/pattern.jpg);
    background-repeat: no-repeat;
    background-size: 1000%;
    background-position: 67% 44%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(1px 1px 3px #000);
    font-family: 'NanumSquareNeoHeavy';
    margin: 0 20px;
}
.nickname_coming .desc_area {
    display: flex;
    justify-content: center;
    margin-top: 20px;
}
.nickname_coming .desc_area dl {
    width: 512px;
    height: 177px;
    background: url(/12sky3/static/images/new/nickname_event/guide_bg.png) no-repeat center;
    background-size: contain;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
    padding: 25px 0;
    box-sizing: border-box;
    margin: 0 5px;
}
.nickname_coming .desc_area dl dt,
.nickname_coming .desc_area dl dt small {
    font-size: 20px;
    color: #b98153;
    font-family: 'NanumSquareNeoBold';
}
.nickname_coming .desc_area dl dt small {
    font-size: 10px;
    margin: 0 15px;
    vertical-align: middle;
}
.nickname_coming .desc_area dl dd {
    font-size: 16px;
    line-height: 24px;
    color: #e4e4e4;
    text-align: center;
}

.nickname_ing .desc_area {
    width: 726px;
    height: 321px;
    background: url(/12sky3/static/images/new/nickname_event/guide_bg_lg.png) no-repeat center;
    background-size: contain;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    margin: 110px auto 0;
}
.nickname_ing .desc_area dl:nth-child(2) {
    margin-top: 34px;
}
.nickname_ing .desc_area dl dt,
.nickname_ing .desc_area dl dt small {
    font-size: 20px;
    color: #b98153;
    font-family: 'NanumSquareNeoBold';
    text-align: center;
}
.nickname_ing .desc_area dl dt small {
    font-size: 10px;
    margin: 0 15px;
    vertical-align: middle;
}
.nickname_ing .desc_area dl dd {
    font-size: 18px;
    line-height: 24px;
    color: #c8c8c8;
    text-align: center;
    margin-top: 7px;
}
.nickname_ing .btn {
    margin: 60px auto 0;
}

.nickname_end .desc_area {
    width: 726px;
    height: 251px;
    background: url(/12sky3/static/images/new/nickname_event/guide_bg_sm.png) no-repeat center;
    background-size: contain;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    margin-top: 148px;
}
.nickname_end .desc_area p {
    font-size: 18px;
    color: #e4e4e4;
}
.nickname_end .btn {
    margin: 115px auto 0;
}


/* nickname layer */

.layer_wrap.nickname_layer {
    width: 1900px;
    height: auto;
    max-height: 100%;
    border: 2px solid #3a3a3a;
    background: #121212;
    box-shadow: 1px 1px 2px #000;
    box-sizing: border-box;
}
.nickname_layer ::-webkit-scrollbar {
    width: 17px;
    display: block;
    background: #000;
}
.nickname_layer ::-webkit-scrollbar-thumb {
    background: #3e3e3e;
    border: 2px solid #000;
    box-sizing: border-box;
}
.layer_wrap.nickname_layer .layer_head button {
    top: -108px;
    right: -28px;
}
.nickname_layer .tab_cont_wrap {
    height: 764px;
}
.nickname_layer .tab_cont_wrap > div {
    display: flex;
    width: 100%;
    height: inherit;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    display: none;
}
.nickname_layer .tab_cont_wrap .btn_wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 43px;
}
.nickname_layer .tab_cont_wrap .btn_wrap a {
    margin: 0 10px;
}
.nickname_layer .tab_nav {
    width: 100%;
    display: flex;
}
.nickname_layer .tab_nav li {
    width: 100%;
    height: 114px;
    line-height: 114px;
    text-align: center;
    color: #484848;
    font-size: 22px;
    background: #222;
    font-family: 'NanumSquareNeoBold';
}
.nickname_layer .tab_nav li.active {
    background: url(/12sky3/static/images/new/nickname_event/tab_on_bg.png) no-repeat center top;
    background-size: contain;
    color: #cacaca;
    font-family: 'NanumSquareNeoExtraBold';
}
.nickname_layer .step_01_cont ul {
    width: 1080px;
}
.nickname_layer .step_01_cont ul li {
    font-size: 18px;
    line-height: 18px;
    color: #c8c8c8;
    padding-left: 20px;
    position: relative;
    margin-top: 18px;
}
.nickname_layer .step_01_cont ul li:after {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #c8c8c8;
    position: absolute;
    top: 3px;
    left: 0;
}
.nickname_layer .step_01_cont ul li:nth-child(1) {
    margin-top: 0;
}
.nickname_layer .red_btn,
.nickname_layer .gray_btn {
    display: block;
    width: 277px;
    height: 73px;
    line-height: 73px;
    text-align: center;
    background: url(/12sky3/static/images/new/nickname_event/red_btn.jpg) no-repeat center;
    background-size: contain;
    font-size: 18px;
    color: #d6d7d9;
    font-family: 'NanumSquareNeoBold';
}
.nickname_layer .gray_btn {
    background: url(/12sky3/static/images/new/nickname_event/gray_btn.jpg) no-repeat center;
    background-size: contain;
}
.nickname_layer .step_01_cont .red_btn {
    margin-top: 125px;
}
.nickname_layer .step_02_cont {
    
}
.nickname_layer .step_02_cont .agree_area {
    display: flex;
    width: 1690px;
}
.nickname_layer .step_02_cont .agree_area > div {
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: end;
}
.nickname_layer .step_02_cont .agree_area > div:nth-child(2) {
    padding-left: 14px;
    box-sizing: border-box;
}
.nickname_layer .step_02_cont .agree_area .check_box {
    display: block;
    font-size: 18px;
    color: #c8c8c8;
    margin-top: 15px;
    padding-left: 40px;
}
.nickname_layer .step_02_cont .agree_area > div:nth-child(1) .check_box:nth-child(1) {
    margin-top: 0;
    font-size: 22px;
}
.nickname_layer .step_02_cont .agree_area .check_box:nth-child(2) {
    margin-top: 25px;
}
.nickname_layer .step_02_cont .agree_area .check_box strong {
    font-family: 'NanumSquareNeo';
    color: #aa8453;
    font-weight: 400;
}
.nickname_layer .step_02_cont .agree_area .check_check {
    background: transparent;
}
.nickname_layer .step_02_cont .agree_area .check_check:after {
    top: -4px;
    left: -2px;
}
.nickname_layer .step_02_cont .agree_view {
    width: 1690px;
    display: flex;
    justify-content: space-between;
    margin-top: 14px;
}
.nickname_layer .step_02_cont .agree_view div {
    width: 830px;
    height: 380px;
    background: #222;
    overflow: auto;
    padding: 10px 15px;
    box-sizing: border-box;
}
.nickname_layer .step_02_cont .agree_view div p,
.nickname_layer .step_02_cont .agree_view div strong,
.nickname_layer .step_02_cont .agree_view div td,
.nickname_layer .step_02_cont .agree_view div th {
    word-break: keep-all;
    font-size: 16px;
    color: #898888;
}
.nickname_layer .step_02_cont .red_btn {
    margin: 30px auto 0;
}
.nickname_layer .server_selec {
    width: 1690px;
    position: relative;
}
.nickname_layer .server_selec .fix_area > p {
    width: 100%;
    height: 52px;
    line-height: 52px;
    text-align: center;
    box-shadow: -1px -1px 2px rgba(255,255,255,.15);
    font-size: 20px;
    color: rgba(137,136,136, 1);
    background: rgba(52,52,52,.2);
    font-family: 'NanumSquareNeoBold';
    filter: drop-shadow(1px 1px 10px #000);
}
.nickname_layer .server_selec .fix_area ul {
    display: flex;
    align-items: center;
    padding-right: 37px;
    box-sizing: border-box;
}
.nickname_layer .server_selec .fix_area ul li {
    width: 238px;
    height: 90px;
    line-height: 90px;
    font-size: 26px;
    color: #a4a4a4;
    text-align: center;
    font-family: 'Danjo-bold-Regular';
    border-right: 1px solid rgba(123,123,123,.29);
    box-sizing: border-box;
}
.nickname_layer .server_selec .fix_area ul li:first-child {
    width: 228px;
    padding-right: 12px;
}
.nickname_layer .server_selec .fix_area ul li:last-child {
    border-right: 0;
}
.nickname_layer .server_selec .scroll_cont {
    width: 100%;
    height: 440px;
    overflow-y: scroll;
    padding-right: 25px;
    box-sizing: border-box;
}
.nickname_layer .server_selec .scroll_cont ul {
    display: flex;
    margin-bottom: -5px;
}
.nickname_layer .server_selec .scroll_cont ul li {
    width: 238px;
    border-right: 1px solid rgba(123,123,123,.29);
    box-sizing: border-box;
}
.nickname_layer .server_selec .scroll_cont ul li:first-child {
    width: 228px;
}
.nickname_layer .server_selec .scroll_cont ul li:last-child {
    border-right: 0;
    width: 234px;
}
.nickname_layer .server_selec .scroll_cont button {
    display: block;
    width: 227px;
    height: 87px;
    background: url(/12sky3/static/images/new/nickname_event/default_bg.png) no-repeat center;
    background-size: contain;
    margin: -4px auto 0;
    cursor: default;
    pointer-events: none;
    position: relative;
}
.nickname_layer .server_selec .scroll_cont ul li:first-child button {
    margin-left: -7px;
}
.nickname_layer .server_selec .scroll_cont ul li:last-child button {
    margin-right: 1px;
}
.nickname_layer .server_selec .scroll_cont button.red {
    background: url(/12sky3/static/images/new/nickname_event/red_bg.png) no-repeat center;
    background-size: contain;
}
.nickname_layer .server_selec .scroll_cont button.yellow {
    background: url(/12sky3/static/images/new/nickname_event/yellow_bg.png) no-repeat center;
    background-size: contain;
    cursor: pointer;
    pointer-events: painted;
}
.nickname_layer .server_selec .scroll_cont button.green {
    background: url(/12sky3/static/images/new/nickname_event/green_bg.png) no-repeat center;
    background-size: contain;
    cursor: pointer;
    pointer-events: painted;
}
.nickname_layer .server_selec .scroll_cont button .server_name {
    font-size: 18px;
    font-family: 'NanumSquareNeoExtraBold';
    color: rgba(255,255,255,.6);
}
.nickname_layer .server_selec .scroll_cont button .state {
    font-size: 14px;
    font-family: 'NanumSquareNeoBold';
    position: absolute;
    top: 13px;
    right: 18px;
}
.nickname_layer .server_selec .scroll_cont button .state::after {
    content: '';
    width: 5px;
    height: 5px;
    border-radius: 50%;
    position: absolute;
    top: 6px;
    left: -12px;
}
.nickname_layer .server_selec .scroll_cont button.red .state {
    color: #ff887c;
}
.nickname_layer .server_selec .scroll_cont button.yellow .state {
    color: #f0bf71;
}
.nickname_layer .server_selec .scroll_cont button.green .state {
    color: #56b190;
}
.nickname_layer .server_selec .scroll_cont button.red .state::after {
    background: #ff887c;
}
.nickname_layer .server_selec .scroll_cont button.yellow .state::after {
    background: #f0bf71;
}
.nickname_layer .server_selec .scroll_cont button.green .state::after {
    background: #56b190;
}
.nickname_layer .server_confirm {
    width: 1140px;
    height: 277px;
    background: #000;
    border: 1px solid rgba(81,81,81,.4);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    box-sizing: border-box;
}
.nickname_layer .server_confirm .server_name {
    font-size: 36px;
    color: #b00d00;
    font-family: 'Danjo-bold-Regular';
}
.nickname_layer .server_confirm .server_time {
    font-size: 30px;
    color: #7c7c7c;
    font-family: 'Danjo-bold-Regular';
    margin-top: 10px;
}
.nickname_layer .server_confirm .server_time strong {
    color: #b00d00;
    font-family: 'Danjo-bold-Regular';
}
.nickname_layer .step_03_01_cont .red_btn {
    margin-top: 52px;
}
.nickname_layer .nickname_input .input_area {
    width: 1140px;
    height: 277px;
    background: #000;
    border: 1px solid rgba(81,81,81,.4);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
.nickname_layer .nickname_input .input_area dl {
    display: flex;
    align-items: center;
    margin-bottom: 7px;
}
.nickname_layer .nickname_input .input_area dl dt {
    width: 80px;
    font-size: 18px;
    color: #c8c8c8;
    font-family: 'NanumSquareNeoBold';
}
.nickname_layer .nickname_input .input_area dl dd {
    width: 574px;
    display: flex;
    position: relative;
}
.nickname_layer .nickname_input .input_area dl dd input {
    width: 100%;
    height: 58px;
    line-height: 58px;
    border: none;
    background: #c8c8c8;
    padding: 0 26px;
    box-sizing: border-box;
    font-size: 20px;
    color: #121212;
    font-family: 'NanumSquareNeoBold';
}
.nickname_layer .nickname_input .input_area dl:nth-child(2) dd input {
    width: calc(100% - 155px);
}
.nickname_layer .nickname_input .input_area dl dd button {
    display: block;
    width: 155px;
    height: 58px;
    line-height: 56px;
    text-align: center;
    background: url(/12sky3/static/images/new/nickname_event/gray_btn_bg.png) no-repeat center;
    background-size: cover;
    font-size: 17px;
    color: #d6d6d8;
    font-family: 'NanumSquareNeoBold';
}
.nickname_layer .nickname_input .input_area dl dd .error_txt,
.nickname_layer .nickname_input .input_area dl dd .pass_txt { 
    color: #dd2e0a;
    font-size: 16px;
    position: absolute;
    bottom: -37px;
    left: 0;
    font-family: 'NanumSquareNeoBold';
}
.nickname_layer .nickname_input .input_area dl dd .pass_txt {
    color: #008f62;
}
.nickname_layer .nickname_input .info {
    margin-top: 20px;
}
.nickname_layer .nickname_input .info li {
    font-size: 16px;
    line-height: 28px;
    color: #898888;
}
.nickname_layer .step_04_cont .red_btn {
    margin-top: 48px;
}
.nickname_layer .nickname_input.success .input_area dl dt {
    color: #646464;
}
.nickname_layer .nickname_input.success .input_area dl dd input {
    width: 100%;
    background: #171717;
    color: #646464;
    text-align: center;
}
.nickname_layer .nickname_input.success .desc_txt {
    font-size: 20px;
    color: #c8c8c8;
    text-align: center;
    line-height: 32px;
    margin-top: 45px;
}
.nickname_layer .nickname_input.success .desc_txt strong {
    display: block;
    font-size: 36px;
    color: #bb290b;
    font-family: 'Danjo-bold-Regular';
    margin-bottom: 23px;
}
.nickname_layer .step_05_cont .red_btn {
    margin-top: 29px;
}
.nickname_layer .step_05_cont .btn_wrap,
.alert_wrap .btn_wrap {
    display: flex;
    align-items: end;
    justify-content: center;
    margin-top: 9px;
}
.nickname_layer .step_05_cont .btn_wrap .forum_btn,
.alert_wrap .btn_wrap .forum_btn {
    display: block;
    width: 289px;
    height: 89px;
    background: url(/12sky3/static/images/new/forum_btn.png) no-repeat center 6px;
    background-size: contain;
}
.nickname_layer .step_05_cont .btn_wrap .youtube_btn,
.alert_wrap .btn_wrap .youtube_btn {
    display: block;
    width: 289px;
    height: 89px;
    background: url(/12sky3/static/images/new/youtube_btn.png) no-repeat center 6px;
    background-size: contain;
}

.layer_wrap.alert_wrap {
    width: auto;
    max-width: 100%;
    max-height: 100%;
}
.alert_wrap .layer_body {
    padding: 150px 120px;
}
.alert_wrap .layer_body p {
    text-align: center;
    color: #dcbb91;
    font-size: 28px;
    line-height: 42px;
    margin-bottom: 20px;
}


/* levelup event */
.levelup_event_wrap {
    background: url(/12sky3/static/images/new/levelup_event/bg.jpg) no-repeat center;
    background-size: cover;
}
.levelup_event_wrap .tit {
    width: 584px;
    height: 92px;
    background: url(/12sky3/static/images/new/levelup_event/tit.png) no-repeat center;
    background-size: contain;
}
.levelup_event_wrap .sub_tit {
    margin-top: 12px;
}
.levelup_event_wrap .sub_tit_lg {
    font-size: 36px;
    margin-top: 7px;
}
.levelup_event_wrap .item_img {
    width: 1657px;
    height: 585px;
    background: url(/12sky3/static/images/new/levelup_event/event_img.png) no-repeat center;
    background-size: contain;
    margin-top: -20px;
}
.levelup_event_wrap .info_wrap {
    align-self: flex-start;
    margin-top: 10px;
    margin-left: 428px;
}
.levelup_event_wrap .info_wrap p {
    display: flex;
    align-items: center;
    font-size: 18px;
    color: #d6b793;
    font-family: 'NanumSquareNeoExtraBold';
}
.levelup_event_wrap .info_wrap p i {
    display: block;
    width: 26px;
    height: 26px;
    background: url(/12sky3/static/images/new/levelup_event/info_i.png) no-repeat center;
    background-size: contain;
    margin-right: 6px;
}
.levelup_event_wrap .info_wrap ul {
    margin-top: 16px;
    opacity: .7;
    padding-left: 8px;
}
.levelup_event_wrap .info_wrap li {
    font-size: 16px;
    color: #f5d7b3;
}

/* main */
.main_wrap .btn {
    line-height: 164px;
    margin-top: 0;
}
.main_wrap .text {
    /*width: 526px;
    height: 58px;
    background: url(/12sky3/static/images/new/text.png) no-repeat center;
    background-size: contain;
    margin-top: 48px;*/

    font-size: 45px;
    background-image: url(/12sky3/static/images/new/pattern.jpg);
    background-repeat: no-repeat;
    background-size: 570%;
    background-position: 78% 46%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
    filter: drop-shadow(2px 2px 6px #000);
    font-family: 'Danjo-bold-Regular';
    display: block;
    margin-top: 48px;
}
.main_wrap .btn_wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 27px;
}
.main_wrap .btn_wrap a {
    display: block;
    width: 366px;
    height: 119px;
    background-size: contain !important;
    margin: 0 16px;
}
.main_wrap .btn_wrap a.google_btn {
    background: url(/12sky3/static/images/new/google_btn.png) no-repeat center;
}
.main_wrap .btn_wrap a.apple_btn {
    background: url(/12sky3/static/images/new/apple_btn.png) no-repeat center;
}
.main_wrap .btn_wrap a.pc_btn {
    background: url(/12sky3/static/images/new/pc_btn.png) no-repeat center;
}

/* feature */
.feature_wrap .sub_tit,
.class_wrap .sub_tit {
    margin-top: 14px;
}
.media_wrap .sub_tit {
    margin-top: 10px;
}

/* media */
/*.media_slide {
    margin-top: 60px;
}
.media_slide ul {
    display: flex;
}
.media_slide li {
    margin: 0;
    width: 984px;
    display: flex;
}
.media_slide li img {
    width: 100%;
}
.media_slide li p {
    width: calc(100% - 60px);
    height: 68px;
    line-height: 68px;
    font-size: 22px;
    background: rgba(0,0,0,.4);
    color: #f1e1ba;
    text-shadow: 1px 1px 4px rgba(0,0,0,.68);
    padding-left: 42px;
    position: absolute;
    bottom: 17px;
    left: 9px;
    display: none;
}
.media_slide li.swiper-slide-active p {
    display: block;
}
.media_slide .swiper-pagination {
    bottom: -66px !important;
}
.media_slide .swiper-pagination-bullet {
    width: 32px;
    height: 33px;
    opacity: 1;
    background: url(/12sky3/static/images/new/media/dot.png) no-repeat center;
    background-size: contain;
    margin: 0 9px !important;
}
.media_slide .swiper-pagination-bullet-active {
    width: 30px;
    background: url(/12sky3/static/images/new/media/dot_on.png) no-repeat center;
    background-size: contain;
}*/

.media_wrap {
    background: url(/12sky3/static/images/new/media-bg.jpg) no-repeat center;
    background-size: cover;
}
.media_wrap::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url(/12sky3/static/images/new/bg.png) repeat left top;
    background-size: contain;
}
.media_wrap .tit {
    width: 261px;
    height: 98px;
    background: url(/12sky3/static/images/new/media-tit.png) no-repeat center;
    background-size: contain;
}
.media_thum_wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 52px;
}
.media_thum_wrap li {
    margin: 0 8px;
}
.media_thum_wrap li div {
    position: relative;
}

.media_thum_wrap li p {
    width: 425px;
    height: 80px;
    line-height: 82px;
    background: url(/12sky3/static/images/new/media_txt_box_bg.png) no-repeat center;
    background-size: contain;
    font-size: 24px;
    color: #f2e8ce;
    text-align: center;
    text-shadow: 1px 1px 8px rgba(0,0,0,.68);
    margin: 18px auto 0;
}

.bottom_banner {
    width: 100%;
    height: 166px;
    background: url(/12sky3/static/images/new/banner_bg.png) no-repeat center bottom;
    background-size: contain;
    cursor: pointer;
    z-index: 90;
    display: none;
}
.bottom_banner::after {
    content: '';
    width: 330px;
    height: 80px;
    background: url(/12sky3/static/images/new/banner_txt.png) no-repeat center;
    background-size: contain;
    position: absolute;
    top: 55px;
    left: 50%;
    transform: translateX(-50%);
}
.bottom_banner:hover::after {
    content: '';
    width: 364px;
    height: 90px;
    background: url(/12sky3/static/images/new/banner_txt_on.png) no-repeat center;
    background-size: contain;
    position: absolute;
    top: 45px;
    left: 50%;
    transform: translateX(-50%);
}
@media (max-width: 1920px) {
    .bottom_banner:hover::after {
        top: 44px;
    }
}

/* video */
.video_area {
    width: 100%;
    height: 100%;
    background: url(/12sky3/static/images/new/bg.png) repeat left top;
    background-size: contain;
}
.video_area video {
    position: relative;
    z-index: -1;
}
video {
    width: 100%;
}
@media screen and (max-aspect-ratio: 16/9) {
    video {
        width: auto;
        height: 100%;
    }
}


/*h1 {
    background-image: url(/12sky3/static/images/new/pattern.jpg);
    background-repeat: no-repeat;
    background-size: 170%;
    background-position: 10% 20%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(1px 1px 4px #333);
}*/

.containers {
    position: fixed;
    width: 100%;
    height: 126px;
    background: url(/12sky3/static/images/new/bottom-bg.png) no-repeat center;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    background-size: 100% 126px;
    left: 0px;
    bottom: 0px;
    text-align: center;
}
.containerlogo {
    position: fixed;
    width: 100%;
    height: 126px;
    /*background: url(/12sky3/static/images/new/bottom-logo.png) no-repeat center;*/
    background: url(/12sky3/static/images/new/ci2.png) no-repeat center;
    bottom: 70px;
    text-align: center;
    background-size: 114px 57px;
}
.header, .email {
    display: inline-block;
    font-size: 28px;
    /*font-family: 'Danjo-bold-Regular';*/
    background: linear-gradient(to bottom, #d4b475 36%, #fff4df 60%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    transition: all .5s ease;
    vertical-align: middle; /* 确保元素垂直对齐 */
    margin-top: 25px;
}

.email {
    margin-left: 120px; /* 调整两个元素之间的间距 */
}
.sub-header {
    display: block;
    font-size: 28px;
    /*font-family: 'Danjo-bold-Regular';*/
    background: linear-gradient(to bottom, #d4b475 36%, #fff4df 60%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-align: center;
    transition: all .5s ease;
    margin-top: 5px;
}

/*login*/
 #filter {
    width: 100%;
    height: 100%;
    background-color: black;
    position: fixed;
    left: 0;
    top: 0;
    filter: alpha(opacity=80);
    -moz-opacity: 0.8;
    opacity: 0.8;
    z-index: 11;
    display: none;
}
#reset-box {
    position: absolute;
    width: 870px;
    /*background: #fff;*/
    display: none;
    /*padding-bottom: 30px;*/
    /*padding-top: 35px;*/
    z-index: 12;
    font-size: 28px;
    /*background: url(/12sky3/static/images/login_bg.png) no-repeat;*/
    /*background-size: contain;*/
    height: 800px;
    z-index: 999;
}
#reg-box {
    position: absolute;
    width: 870px;
    /*background: #fff;*/
    display: none;
    /*padding-bottom: 30px;*/
    /*padding-top: 35px;*/
    z-index: 12;
    font-size: 28px;
    /*background: url(/12sky3/static/images/login_bg.png) no-repeat;*/
    /*background-size: contain;*/
    height: 800px;
    z-index: 999;
}
#login-box {
    position: absolute;
    width: 870px;
    display: none;
    z-index: 12;
    font-size: 28px;
    height: 800px;
    z-index: 999;
}


#reset-box .input-box {
    display: flex;
    text-align: center;
}
#reset-box .input-label {
    display: inline-block;
    color: #fff;
    line-height: 55px;
    width: 220px;
}

#reset-box input {
    height: 40px;
    margin-left: 0;
    border: 1px solid #fff;
    /*background: #fff;*/
    width: 490px;
    color: #fff;
    border-radius: 2px;
}
#reset-box input::placeholder {
    color: #fff; /* 设置 placeholder 的字体颜色为灰色 */
    opacity: 1; /* 可选：确保颜色是完全不透明的 */
}

/* 兼容性处理 */
#reset-box input:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: #fff;
}

#reset-box input::-ms-input-placeholder { /* Microsoft Edge */
    color: #fff;
}
#reg-box input::placeholder {
    color: #fff; /* 设置 placeholder 的字体颜色为灰色 */
    opacity: 1; /* 可选：确保颜色是完全不透明的 */
}

/* 兼容性处理 */
#reg-box input:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: #fff;
}

#reg-box input::-ms-input-placeholder { /* Microsoft Edge */
    color: #fff;
}
#login-box input::placeholder {
    color: #fff; /* 设置 placeholder 的字体颜色为灰色 */
    opacity: 1; /* 可选：确保颜色是完全不透明的 */
}

/* 兼容性处理 */
#login-box input:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: #fff;
}

#login-box input::-ms-input-placeholder { /* Microsoft Edge */
    color: #fff;
}


#reset-submit{
    margin: 0;
    height: 70px;
    background: url(/12sky3/static/images/button.jpg) no-repeat;
    background-size: contain;
    line-height: 70px;
    width: 270px;
    margin-right: 10px;
}
.forget-btn.btns {
    height: 13px;
    color: #fa8717;
}
#login-submit{
    margin: 0;
    height: 82px;
    background: url(/12sky3/static/images/button.jpg) no-repeat;
    background-size: contain;
    line-height: 82px;
    width: 320px;
}
#reset-box .close-modal-btn {
    height: 70px;
    background: url(/12sky3/static/images/button.jpg) no-repeat;
    background-size: contain;
    line-height: 70px;
    width: 270px;
}
.modalbox{
    position: absolute;
    width: 870px;
    z-index: 12;
    font-size: 35px;
    font-weight: bolder;
    height: 70px;
    line-height: 40px;
    text-align: center;
    background-image: -webkit-linear-gradient(top, #ffeaad, #ffe084);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.resetboxs {
    position: absolute;
    width: 870px;
    padding-bottom: 30px;
    padding-top: 35px;
    z-index: 12;
    font-size: 28px;
    background: url(/12sky3/static/images/login_bg.png) no-repeat;
    background-size: contain;
    height: 570px;
    top: 70px;
}
.regboxs {
    position: absolute;
    width: 870px;
    padding-bottom: 30px;
    padding-top: 35px;
    z-index: 12;
    font-size: 28px;
    background: url(/12sky3/static/images/login_bg.png) no-repeat;
    background-size: contain;
    height: 570px;
    top: 70px;
}
#reg-box .input-box {
    display: flex;
    text-align: center;
}
#login-box .input-box {
    display: flex;
    text-align: center;
}
#login-box input, #reg-box input, #reset-box input, #order-box input, .order-box input {
    padding: 5px 3px;
}
.reg-cancel {
    top: 36px;
    right: -100px;
}

#reg-box .input-code, #reset-box .input-code {
    width: 152px;
    margin-left: 182px;
    vertical-align: top;
}


#reset-box .input-code, #reset-box .input-code {
    width: 152px;
    margin-left: 182px;
    vertical-align: top;
}
.btn-get-code {
    background: #000;
    color: #fff;
    margin-left: 3px;
    width: 132px;
    height: 45px;
    font-size: 28px;
    cursor: pointer;
}
#reg-box #reg-submit {
    /*margin-left: 130px;*/
}
#reset-box #reg-submit {
    margin-top: 45px;
    margin-left: 130px;
}
.login-cancel, .reg-cancel, .reset-cancel, .pay-cancel {
    background: none;
    border: none;
    color: #fff;
    width: 66px;
    display: inline-block;
    line-height: 25px;
    text-align: center;
    cursor: pointer;
    height: 27px;
}
.cancel-x {
    width: 94px;
    height: 83px;
    position: absolute;
    top: 20px;
    right: -83px;
    color: #fff;
    font-size: 26px;
    background: url(/12sky3/static/images/x.png) no-repeat;
    background-size: contain;
    cursor: pointer;
        z-index: 99999999;
}
.input-box {
    padding: 10px 4px 0;
    margin-bottom: 35px;
}
.input-box input{
    font-size:28px;
}
#remember{
    width: 35px;
    height: 35px;
}

.input-label {
    width: 130px;
    display: inline-block;
    text-align: right;
    display: none;
}
.input-label span{
    text-align: justify;
    text-align-last: justify;
    display: inline-block;
    width: 180px;
}
#reg-box .input-label {
    display: inline-block;
    color: #fff;
    line-height: 55px;
    width: 240px;
}
#login-box .input-label {
    display: inline-block;
    color: #fff;
    line-height: 55px;
    width: 170px;
}
#reg-box .input-label span{
    text-align: justify;
    text-align-last: justify;
    display: inline-block;
    width: 170px;
}
#login-box .input-label span{
    text-align: justify;
    text-align-last: justify;
    display: inline-block;
    width: 95px;
}
.input-input {
    width: 267px;
    background: transparent;
    border: none;
    height: 40px;
    /*margin-left: 70px;*/
    color: #fff;
    padding-left: 5px;
}
#reg-box input {
    height: 40px;
    margin-left: 0;
    border: 1px solid #fff;
    /* background: #fff; */
    width: 490px;
    color: #fff;
    border-radius: 2px;
}

.login-input {
    height: 40px;
    margin-left: 0;
    border: 1px solid #fff;
    /* background: #fff; */
    width: 490px;
    color: #fff;
    border-radius: 2px;
}
#reg-submit{
    margin: 0;
    height: 82px;
    background: url(/12sky3/static/images/button.jpg) no-repeat;
    background-size: contain;
    line-height: 82px;
    width: 320px;
    color: #fff;
}

#order-box {
    position: absolute;
    width: 765px;
    display: none;
    padding-bottom: 30px;
    z-index: 12;
    font-size: 16px;
    height: 604px;
    z-index: 999;
}
.pay-box {
    position: absolute;
    width: 740px;
    padding-bottom: 30px;
    padding-top: 35px;
    z-index: 12;
    font-size: 16px;
    background: url(/12sky3/static/images/order_bg.png?v=2) no-repeat;
    background-size: contain;
    height: 505px;
    top: 60px;
    padding-left: 50px;
}

.toast_zone {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    text-align: center;
    z-index: -1;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    background: rgba(0,0,0,0)
}

.toast_zone:before {
    content: "";
    display: inline-block;
    vertical-align: middle;
    height: 100%;
    margin-left: -5px
}

.toast_zone.on {
    z-index: 1000
}

.toast_zone.on .toast {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1
}

.toast_zone .toast {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    width: 480px;
    min-height: 2.4em;
    margin: 20px 0;
    padding: 64px 20px 54px;
    box-shadow: 0 2px 16px 0 rgba(0,0,0,.26);
    background: rgba(0, 0, 0, 0.7);
    box-sizing: border-box;
    opacity: 0
}

.toast_zone .toast_body {
    font-size: 28px;
    line-height: 22px;
    color:#fff;
}

.toast_zone .toast_footer {
    margin-top: 40px;
    display: none;
}

.toast_zone .ibtn_close {
    display:none;
    width: 54px;
    height: 54px;
    margin-left: 20px;

}

.toast_zone .ibtn_close:before {
    width: 14px;
    height: 14px;
    background-position: -156px -117px
}



/* 关闭按钮样式 */
.toast-close-btn {
    position: absolute;
    top: 5px;
    right: 10px;
    cursor: pointer;
    font-size: 16px;
}

/* 淡入动画 */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
.btns button{
    font-size: 24px;
}

.changePwd{
    margin-left: 40px;
    margin-right: 20px;
}



.dclogo {
    position: fixed;
    width: 74px;
    height: 74px;
    background: url(/12sky3/static/images/new/zhengchang3.png) no-repeat center;
    bottom: 40px;
    right: 350px;
    text-align: center;
}
.dclogo:hover {
    position: fixed;
    width: 74px;
    height: 74px;
    background: url(/12sky3/static/images/new/liang1.png) no-repeat center;
    bottom: 40px;
    right: 350px;
    text-align: center;
}
.fclogo {
    position: fixed;
    width: 74px;
    height: 74px;
    background: url(/12sky3/static/images/new/zhengchang2.png) no-repeat center;
    bottom: 40px;
    right: 260px;
    text-align: center;
}
.fclogo:hover {
    position: fixed;
    width: 74px;
    height: 74px;
    background: url(/12sky3/static/images/new/liang2.png) no-repeat center;
    bottom: 40px;
    right: 260px;
    text-align: center;
}
.naverlogo {
    position: fixed;
    width: 74px;
    height: 74px;
    background: url(/12sky3/static/images/new/zhengchang1.png) no-repeat center;
    bottom: 40px;
    right: 170px;
    text-align: center;
}
.naverlogo:hover {
    position: fixed;
    width: 74px;
    height: 74px;
    background: url(/12sky3/static/images/new/liang3.png) no-repeat center;
    bottom: 40px;
    right: 170px;
    text-align: center;
}

.balogo {
    position: fixed;
    width: 74px;
    height: 74px;
    background: url(/12sky3/static/images/new/zhengchang4.png) no-repeat center;
    bottom: 40px;
    right: 170px;
    text-align: center;
}
.balogo:hover {
    position: fixed;
    width: 74px;
    height: 74px;
    background: url(/12sky3/static/images/new/liang4.png) no-repeat center;
    bottom: 40px;
    right: 170px;
    text-align: center;
}