@charset "utf-8";

.layer {position:fixed;margin:0 20px;z-index:888888;width:calc(100% - 40px);}
.layer2 {max-width:500px;}
.layer .layerCnts {padding:32px 20px 24px;background-color:#ffffff;border-radius: 4px;  box-shadow: 0 3px 25px 0 rgba(0, 0, 0, 0.16);}
.layer2 .layerCnts {padding:32px 24px 28px;text-align: center;  color: #18191c;}
.layer .tit {font-size: 20px;  font-weight: 700;line-height: 1.5;  letter-spacing: -0.7px;  color: #18191c;}
.layer .btSec {font-size:0;}
.layer .btSec2 .bt {width:calc(50% - 4px);}
.layer .btSec2 .bt:first-child {margin-right:8px;}
.layer.alert {width:calc(100% - 100px);max-width:320px;margin:0 50px;}
.layer.alert .txt {display:flex;min-height:64px;margin-bottom:32px;align-items: center;font-size: 16px;line-height: 1.5;  letter-spacing: -0.48px;  text-align: center;  color: #18191c;word-break: keep-all;}
.layer.alert .txt p {width:100%;}
.layerStepInfo .layerCnts {padding-top:40px;}
.layerStepInfo .txt p {font-size: 24px;  font-weight: 700;line-height: 1.5;  letter-spacing: -0.84px;}
.layerStepInfo ul {display:flex;padding:32px 0px 0;font-size:0;}
.layerStepInfo ul li {padding-right:10.25%;font-size: 16px;  font-weight: 700;line-height: 1.5;  letter-spacing: -0.48px;  text-align: center;  color: #18191c; vertical-align: top;}
.layerStepInfo ul li:nth-child(1), .layerStepInfo ul li:nth-child(2) {background:url(../image/bul_arr_bk4.png) no-repeat right 4% top 38%;background-size:16.4%;}
.layerStepInfo ul li:last-child {padding-right:0;}
.layerStepInfo ul li span {display:block;margin-bottom:10px;text-align:center;}
.layerStepInfo ul li span img {width:100%;height:auto;vertical-align: top;}
.layerStepInfo .txt2 {padding:40px 0 24px;font-size: 14px;line-height: 1.57;letter-spacing: -0.48px;color: #747a86;}
.layer3 { max-width:400px; } 
.layer3 .layerCnts { background-color:#000000; color:#4a4e57; } 
.layerPrimeStepInfo { font-family: 'NEXONLv1Gothic'; font-size: 14px; } 
.layerPrimeStepInfo h1 { width: 87px; height: 24px; margin: 0; background-size: contain; background: url(../image/txt_prime.png) no-repeat left top; } 
.layerPrimeStepInfo .txt p { text-align: center; padding: 8% 0 6%; font-size: 20px; color: #a7a7a7; line-height: 1.4; } 
.layerPrimeStepInfo .txt p strong { color: #e6e6e6; font-family: 'NEXONLv1GothicBold'; } 
.layerPrimeStepInfo ul { list-style: none; max-width: 710px; margin: 0 auto; font-size: 0; background:url(../image/img_arrow_bar.png) no-repeat center 96.5%; background-size:contain; } 
.layerPrimeStepInfo ul li { display: inline-block; width: 25%; color: #4d4d4d; font-size: 14px; text-align: center; background-size: contain; } 
.layerPrimeStepInfo ul li:last-child { background:none; } 
.layerPrimeStepInfo ul li.on { color:#e6e6e6; } 
.layerPrimeStepInfo ul li span { display: inline-block; width: 80%; max-width: 132px; margin: 0 8%; padding-top: 87%; white-space: nowrap; } 
.layerPrimeStepInfo ul li.step1 span { background:url(../image/img_prime_step1.png) no-repeat center top; background-size:contain; } 
.layerPrimeStepInfo ul li.step2 span { background:url(../image/img_prime_step2.png) no-repeat center top; background-size:contain; } 
.layerPrimeStepInfo ul li.step3 span { background:url(../image/img_prime_step3.png) no-repeat center top; background-size:contain; } 
.layerPrimeStepInfo ul li.step4 span { background:url(../image/img_prime_step4.png) no-repeat center top; background-size:contain; } 
.layerPrimeStepInfo ul li.step1.on span { background:url(../image/img_prime_step1_on.png) no-repeat center top; background-size:contain; } 
.layerPrimeStepInfo ul li.step2.on span { background:url(../image/img_prime_step2_on.png) no-repeat center top; background-size:contain; } 
.layerPrimeStepInfo ul li.step3.on span { background:url(../image/img_prime_step3_on.png) no-repeat center top; background-size:contain; } 
.layerPrimeStepInfo ul li.step4.on span { background:url(../image/img_prime_step4_on.png) no-repeat center top; background-size:contain; } 
.layerPrimeStepInfo dl { margin: 30px 10px 0; padding: 13px 0 15px; border-top: 1px solid #262626; border-bottom: 1px solid #262626; } 
.layerPrimeStepInfo dl::after { content:''; display:table; clear:both; } 
.layerPrimeStepInfo dl dt { clear:both; padding:5px 5px 0px 10px; color:#e6e6e6; background:url(../image/bul_squ_gr.png) no-repeat left 12px; float: left; } 
.layerPrimeStepInfo dl dd { font-size: 14px; padding-top:5px; color:#d7d7d7; padding-top: 5px; float: left; color: #d7d7d7; } 
.layerPrimeStepInfo dl dt, 
.layerPrimeStepInfo .txt2 { padding-left: 10px; background: url(../image/bul_squ_gr.png) no-repeat left 12px; } 
.layerPrimeStepInfo .txt2 { margin: 11px 20px 0 12px; font-size: 12px; background-position: left 8px; line-height: 1.5; color: #808080; } 
.layerPrimeStepInfo .btSec { text-align: center; margin-top: 15%; } 
.layerPrimeStepInfo .btSec a { font-size: 14px; width: 85px; height: 36px; padding-top: 10px; border-radius: 3px; display: inline-block; background-color: #3c3c3c; color: #c5c5c5; text-decoration: none; cursor: pointer; } 
.layerNXGameManager .layerCnts {text-align:left;}
.layerNXGameManager .tit {font-size: 20px; font-weight: 700;line-height: 1.5;  letter-spacing: -0.7px;}
.layerNXGameManager .txt2 {padding:16px 0;font-size: 16px;line-height: 1.75;letter-spacing: -0.48px;}
.layerNXGameManager label > .txt {font-size: 14px;line-height: 1.57;letter-spacing: -0.48px;}
.layerNXGameManager .checkboxSec {margin-bottom:40px;}
.layerAgree .layerCnts {text-align:left;font-size:16px;}
.layerAgree h2 {font-size:20px;text-align:center;font-weight:700;line-height: 1.5;  letter-spacing: -0.7px;}
.layerAgree h2 span {display:inline-block;padding-right:5px;}
.layerAgree h3 {padding:32px 0 4px;font-weight: 700;line-height: 1.5;letter-spacing: -0.48px;}
.layerAgree h3:nth-of-type(2) {padding:30px 0 8px;}
.layerAgree h3 + p {margin-bottom:16px;line-height: 1.5;letter-spacing: -0.48px;}
.layerAgree .subTitle {padding-bottom:0;font-weight:400;font-size: 16px;letter-spacing: -0.35px;color: #17191c;word-break: keep-all;}
.layerAgree .agreeChk li {padding-top:12px;}
.layerAgree .agreeChk .checkboxSec .txt2 {color:#a2a9b6;line-height:1.75;}
.layerAgree .btSec {margin-top:40px;}
.layerAgree .btSec222 a {height:auto;min-height:64px;padding-top:8px;vertical-align: top;}
.layerAgree .btSec222 a span {display:block;margin-top:2px;font-weight:400;font-size: 14px;line-height: 1.57;letter-spacing: -0.3px;color: #17191c;opacity: 0.7;}
.layerAgree .btSec222 a.bt3 span {color:#ffffff;}
.layer .layerLoading {padding:32px 20px;}
.layerLoadingSec {position:relative;width:60px;height:60px;margin:0 auto 16px;border-radius:100%;border:6px solid #e8ebf2;} 
.layerLoadingSec span {position:absolute;top:-6px;left:-6px;width:30px;height:30px;overflow:hidden;transform-origin:bottom right;animation:loadingAni 1s linear infinite;}
.layerLoadingSec span::before {content:'';position:absolute;top:0;left:0;width:60px;height:60px;overflow:hidden;border:6px solid #0a74ff;border-radius:100%;}
@keyframes loadingAni {
    from {transform: rotate(0deg);}
    to {transform: rotate(360deg);}
}
.layerLoadingSec ~ .txt {margin-bottom:0 !important;line-height: 1.75 !important;}
.layer .mobileBr {display:none;}

/* 공유하기 */
.shareLayer {position:fixed;z-index:888888;max-width:500px;width:calc(100% - 32px);margin:0 16px;box-shadow: 0 3px 25px 0 rgba(0, 0, 0, 0.16);  background-color: #ffffff;border-radius: 4px;  }
.shareLayer .layerCnts {padding:32px 0 28px;}
.shareLayer .title {font-size: 24px;  font-weight: 700;line-height: 1.5;letter-spacing: -0.84px;  text-align: center;  color: #18191c;}
.shareLayer ul {display:flex;justify-content: center;margin:32px 0 36px;}
.shareLayer ul li {max-width:72px;width:100%;margin:0 18px;text-align:center;vertical-align:top;font-size:0;align-self: flex-start;}
.shareLayer ul li a {display:block;font-size: 16px;  line-height: 1.5;letter-spacing: -0.48px;color: #18191c;}
.shareLayer ul li a:hover .img {background-color:#eceff3 !important;}
.shareLayer ul li .img {display:block;width:72px;height:72px;margin-bottom:10px;background-color:#f8f9fb;background-repeat:no-repeat;background-position:center center;border-radius: 50%;}
.shareLayer ul li.facebook .img {background-image: url(../image/img_facebook.png);background-size: contain;}
.shareLayer ul li.kakaotalk .img {background-image: url(../image/img_kakao.png);background-size: contain;}
.shareLayer ul li.twitter .img {background-image: url(../image/img_twitter.png);background-size: contain;}
.shareLayer ul li.url .img {background-image: url(../image/search/img_copy.svg);background-size: contain;}
.shareLayer ul li.url {display:none;}
.shareLayer .urlCopy {position:relative;height:48px;margin:0 24px;border-radius: 4px;  border: solid 1px #dadee6;}
.shareLayer .urlCopy span {overflow:hidden;display:inline-block;width:calc(100% - 110px);max-width:326px;padding-right:110px;padding:11px 0 0 16px;font-size: 16px;line-height: 1.5;letter-spacing: -0.48px;color: #18191c;white-space: nowrap;text-overflow: ellipsis;}
.shareLayer .urlCopy a {position:absolute;top:11px;right:24px;font-size: 16px;line-height: 1.5;letter-spacing: -0.48px;color: #0c77ff;}
.shareLayer .urlCopy a:hover {color:#005cc9;}
.shareLayer .closeBt {position:absolute;top:20px;right:14px;}
.shareLayer .closeBt a {display:inline-block;width:28px;height:28px;background:url(../image/bt_close2.svg) no-repeat center center;background-size: contain;}
.shareLayer .closeBt a:hover {border-radius: 4px;  background-color: #f8f9fb;}
.shareLayer .copyText {position:absolute;left:50%;transform:translate(-50%, calc(54% + 16px));display:inline-block;padding:14px 24px;border-radius: 50px;box-shadow: 0 3px 25px 0 rgba(0, 0, 0, 0.16);background-color: rgba(0, 0, 0, 0.8);text-align:center;font-size: 16px;line-height: 1.5;letter-spacing: -0.35px;color: #fff;white-space:nowrap;}

@media screen and (min-width:1px) and (max-width:639px) {
    .layer2 {max-width:320px;}
    .layerStepInfo .txt p {font-size:18px;}
    .layerStepInfo ul {padding-top:20px;}
    .layerStepInfo ul li {font-size:14px;}
    .layerStepInfo ul li span {margin-bottom:8px;}
    .layerStepInfo .txt2 {padding:28px 0 16px;font-size:12px;line-height: 1.5;  letter-spacing: -0.24px;word-break: keep-all;}
    .layerPrimeStepInfo .txt p { font-size:18px; } 
    .layerPrimeStepInfo ul { padding-top:20px; background-position-y: 86.5%; } 
    .layerPrimeStepInfo ul li { font-size:12px; } 
    .layerPrimeStepInfo ul li span { margin-bottom:8px; } 
    .layerPrimeStepInfo dl, .layerPrimeStepInfo dl dd { font-size:12px; } 
    .layerPrimeStepInfo .txt2 { margin:8px 5px 0 9px; font-size:12px; line-height: 1.5; letter-spacing: -0.24px; word-break: keep-all; } 
    .layerPrimeStepInfo .btSec { margin-top:13% } 
    .layerPrimeStepInfo .btSec a { font-size: 12px; height: 30px; padding-top:7px; } 
    .layer .btSec .bt {height:40px;padding-top:9px;font-size:14px;}
    .layer.alert .txt {min-height:68px;margin-bottom:24px;font-size:14px;}
    .layer .mobileBr {display:block;}
    .layerNXGameManager .tit {font-size:18px;text-align:center;word-break: keep-all;}
    .layerNXGameManager .txt2 {padding:8px 0 12px;font-size:14px;}
    .layerNXGameManager label > .txt {font-size:12px;}
    .layerNXGameManager .checkboxSec {margin-bottom:28px;}
    .layerAgree .layerCnts {font-size:14px;}
    .layerAgree h2 {font-size:18px;}
    .layerAgree h2 span {display:block;padding-right:0;}
    .layerAgree h3 {padding-top:28px;}
    .layerAgree h3 + p, .layerAgree .checkboxSec3 label > .txt, .layerAgree .agreeChk .checkboxSec .txt2 {line-height:1.57;}
    .layerAgree h3 + p {margin-bottom:12px;}
    .layerAgree .agreeChk li {padding-top:8px;}
    .layerAgree h3:nth-of-type(2) {padding-top:24px;}
    .layerAgree .subTitle {font-size:14px;}
    .btSec22 {display:flex;flex-direction: column;}
    .btSec22 .bt {width: 100% !important;}
    .btSec22 .bt:nth-child(1) {order:2;}
    .btSec22 .bt:nth-child(2) {order:1;margin-bottom:8px;}
    .layer .layerLoading {padding:28px 20px;}
    .layerLoadingSec {width:40px;height:40px;margin:0 auto 12px;border:4px solid #e8ebf2;} 
    .layerLoadingSec span {top:-4px;left:-4px;width:20px;height:20px;}
    .layerLoadingSec span::before {width:40px;height:40px;border:4px solid #0a74ff;}

    .shareLayer {max-width:328px;}
    .shareLayer .layerCnts {padding-bottom:24px;}
    .shareLayer .title {font-size: 18px; line-height: 1.56;letter-spacing: -0.54px;}
    .shareLayer ul {margin:20px 0 0;}
    .shareLayer ul li {max-width:56px;margin:0 8px;}
    .shareLayer ul li a {font-size: 12px;letter-spacing: -0.24px;}
    .shareLayer ul li .img {max-width:56px;max-height:56px;width:100%;height:100%;width:56px;height:56px;margin-bottom:8px;background-size:56px 56px;}    
    .shareLayer ul li.url {display:block;}
    .shareLayer .urlCopy {display:none;}
    .shareLayer .closeBt {top:12px;right:12px;}
    .shareLayer .closeBt a {width:24px;height:24px;}
    .shareLayer .copyText {padding:9px 20px;font-size: 14px;line-height: 1.57; letter-spacing: -0.3px;transform:translate(-50%, calc(60% + 8px));}
}