/*초기화 시작*/
*{margin:0; padding:0; box-sizing: border-box; font-family:'Noto Sans KR', sans-serif;}
ul, li, ol{list-style: none;}
input[type='text'], [type='tel']{border:none; font-size:14px; font-weight: 500; color: #999;}
a{text-decoration: none;}
button, [type="button"]{border-radius:6px; background: #5179ff; color:#fff; border:none; font-size:18px;}
body,html{height:100%;}
body{background-color: #f7f8fa;}
:root{
    --ads-guide-accent: #5179ff;
    --ads-guide-glow-a: rgba(81, 121, 255, 0.24);
    --ads-guide-glow-b: rgba(81, 121, 255, 0.48);
    --ads-guide-glow-c: rgba(81, 121, 255, 0.32);
    --ads-telecom-tint: #eef2ff;
    --ads-telecom-tint-strong: #eef2ff;
}
.ubikey-event-loading-cover{background:#f7f8fa; position:fixed; z-index:999; width:100%; height:100%; }
#UpdatePanel1 {display:flex; flex-direction:column-reverse;}

/*초기화 끝*/
/*본 작업 CSS*/
/*모바일 시작*/
/*헤더 시작*/
.ubikey-event {
    padding: 12px 12px 48px;
    max-width: 375px;
    margin: 0 auto;
    background-color: #fff;
}
.ubikey-event .ubikey-event__top{font-size:18px; font-weight:bold; text-align:left; color:#000; border-bottom:1px solid #cfcfcf; padding:18px 0;}
.ubikey-event .ubikey-event__top span{display:inline-block; font-size: 12px; color: #5179ff; font-weight: normal; margin-left:8px;
line-height: 26px; vertical-align: middle; margin-top:-2px;}
/*헤더 끝*/

/*큰제목 시작*/
.ubikey-event__big-title{/*margin-top:40px;*/ max-width:375px; margin:0 auto;}
/*.ubikey-event__big-title img{display:block; width:181px; margin:0 auto; position:relative; left:-10px; animation-name:no-alpha-blink; animation-duration:1.5s; animation-iteration-count:infinite;}*/
	.ubikey-event__big-title img {
		display: block;
		width: 100%;
		margin: 0 auto;
		position: relative;
	}

@keyframes blink {
	0% {
		opacity:100%;
	}
	50%{
		opacity:0%;
	}
	100%{
		opacity:100%;
	}
}



.ubikey-event__big-title div{margin:20px 0 0 0;}
.ubikey-event__big-title div h1{font-size: 24px; font-weight: bold; text-align: center;}
.ubikey-event__big-title div p{font-size: 20px; font-weight: bold; text-align: center; color:#5179ff; margin-top:8px;}
.ubikey-event__big-title div p span{display:block;}
/*큰제목 끝*/

/*설명서 시작*/
.ubikey-event__discriptions{background:#fff; border-radius:12px; border:1px solid #d0d0d0; /*margin-top:20px;*/ display:none;}
.ubikey-event__discriptions h3{font-size: 20px; font-weight: 500; text-align: center; color: #5179ff; line-height:72px;
border-bottom:1px solid #d0d0d0;}
.ubikey-event__discriptions ul{display:flex; /*padding:0 12px;*/ width:100%; max-width:322px; margin:0 auto; /*gap:10px;*/ justify-content: space-between;}
.ubikey-event__discriptions ul li{width:33.33%; max-width:106px; text-align: center;}
.ubikey-event__discriptions ul li img{width:100%; max-width:106px;}
.ubikey-event__discriptions ul li span{font-size: 13px; color: #616161;}
.ubikey-event__discriptions p{padding:0 12px; margin-top:32px;}
.ubikey-event__discriptions p.ubikey-event__detail-description{font-size: 15px;line-height: 1.75;letter-spacing: -0.48px; color: #000;
text-align: center;word-break:break-all;}
.ubikey-event__discriptions p.ubikey-event__price-info{font-size:13px; line-height:1.54; letter-spacing:-0.26px; text-align:center;
color: #5179ff; margin-bottom:20px;}
/*설명서 끝*/

/*통신사 선택 탭 시작*/
.ubikey-event__telecom-selector{display:flex; height:45px; background:#fff; gap:8px; border-radius:8px; margin-bottom:8px;}
.ubikey-event__telecom-selector input[type=radio]{display:none;}
.ubikey-event__telecom-selector label{display:block; width:33.33%; height:100%; background-repeat: no-repeat; color: #616161;
background-position:center; border:1px solid #d0d0d0;}
.ubikey-event__telecom-selector label.skt{background-image:url(/images/cp_image/skt-off.png); background-size:64px 25px;
border-radius:8px;}
.ubikey-event__telecom-selector label.kt{background-image:url(/images/cp_image/kt-off.png); background-size:auto 22px;
border-radius:8px;}
.ubikey-event__telecom-selector label.lgu{background-image:url(/images/cp_image/lgu-off.png); background-size:auto 22px;
border-radius:8px;}
.ubikey-event__telecom-selector input:checked + label{border:1px solid #5179ff; background-color: var(--ads-telecom-tint-strong);}
.ubikey-event__telecom-selector #skt:checked + label.skt{background-image:url(/images/cp_image/skt-on.png);}
.ubikey-event__telecom-selector #kt:checked + label.kt{background-image:url(/images/cp_image/kt-on.png);}
.ubikey-event__telecom-selector #lgu:checked + label.lgu{background-image:url(/images/cp_image/lgu-on.png);}
/*통신사 선택 탭 끝 */

/*약관동의 시작*/
.ubikey-event__terms{border-radius:6px; background:#fff; border: solid 1px #d0d0d0; overflow: hidden; margin-top:20px; font-size:12px;}
.ubikey-event__terms .ubikey-event__terms-agree-all{background:#f6f6f6; font-size: 12px; font-weight: 500; text-align: left;
color: #000; padding:15px;}
.ubikey-event__terms .ubikey-event__agreement-list {display:flex;}
.ubikey-event__terms .ubikey-event__agreement-list{padding:10px 15px;}
.ubikey-event__terms .ubikey-event__agreement-list dl{ display:flex; flex-direction: column; gap:10px; width:100%;}
.ubikey-event__terms .ubikey-event__agreement-list dl dd{color: #616161; letter-spacing: -0.72px; display:flex; align-items:center;}
.ubikey-event__terms .ubikey-event__agreement-list dl dd .checkbox-img{min-width:16px; height:16px; border:1px solid #d0d0d0;
margin:0px 12px 0 0; background-color:#fff; border-radius:50%;}
.ubikey-event__terms .ubikey-event__agreement-list dl dd input{display:none;}
.ubikey-event__terms .ubikey-event__agreement-list dl dd input:checked + .checkbox-img{background-image:url(/images/cp_image/checkbox.png); border:none; background-position:center;}
.ubikey-event__terms .ubikey-event__agreement-list dl dd div{ border-bottom:1px solid #fff; width:calc(100% - 32px); position: relative;}
.ubikey-event__terms .ubikey-event__agreement-list dl dd.agree-all div{border-bottom:none; width:auto; }
.ubikey-event__terms .ubikey-event__agreement-list dl dd div label{cursor:pointer; font-size: 12px; display:flex; align-items: center; justify-content: space-between; user-select:none;
width:calc(100%);}
.ubikey-event__terms .ubikey-event__agreement-list dl dd.agree-all div label{width:auto;}
.ubikey-event__terms .ubikey-event__agreement-list dl dd div label a{ color:#616161; }
.ubikey-event__terms .ubikey-event__agreement-list dl dd div label a img{width:16px; display:block; float:right; margin-top:0px;}
/*약관동의 끝*/

/*휴대폰 인증하기 및 가입버튼 시작*/
.ubikey-event__btn-wrapper-top {
    width: 100%;
    display: flex;
    align-items: center;
}
.ubikey-event__phone-auth input::placeholder{color:#999; font-size:12px;}
.ubikey-event__phone-auth .ubikey-event__phone-number {width:100%;}
.ubikey-event__phone-auth .ubikey-event__phone-number input{width:100%; height:40px; border:1px solid #d0d0d0; border-radius:6px; margin-top:8px;}
#txt_phone{ text-indent:1rem; font-size:16px; font-weight:700; color:var(--ads-guide-accent); letter-spacing:-0.02em; }
.ubikey-event__phone-auth .ubikey-event__phone-number [type='button']{width:100%; height:40px; border-radius:6px;
border:1px solid #5179ff; font-size:12px; flex:1;}
.ubikey-event__phone-auth .ubikey-event__phone-number [type='button']
#signup_button {
    border-radius: 6px;
}

#goSecubtn.resend {
    width: 30%;
    flex: 1;
    border: 1px solid #5179ff;
    background-color: #fff;
    color: #5179ff;
}
.ubikey-event__auth-number {
    display: flex;
    width:100%;
    gap: 8px;
    position: relative;
}
#txt_secNum {
    width: calc(70%);
    text-indent: 1rem;
}
.ubikey-event__auth-number span {
    position: absolute;
    top: 0px;
    right: 15px;
    font-size: 16px;
    line-height: 54px;
}
input.ubikey-event__input-auth-num{border-radius:12px; width:100%; height:56px; border:1px solid #d0d0d0;}

.ubikey-event__join{width:100%; height:40px; font-size:12px; line-height:1.2; position:relative;}
.ubikey-event__join-later{display:none; width:108px; margin:20px auto; font-size: 12px; color: #cfcfcf; background:none;
border-bottom:1px solid #cfcfcf; border-radius:0; cursor:pointer;}

.ubikey-event__btn-wrapper {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content:space-between;
    margin-top:8px;
    position: relative;
}
.ubikey-event__cancel {
    min-width: 112px;
    border: 1px solid #cfcfcf;
    background: #fff;
    color: #666;
    height: 40px;
    font-size:12px;
    border-radius: 6px;
    cursor:pointer;
}
/*휴대폰 인증하기 및 가입버튼 끝*/
/*이벤트 안내 시작*/
.ubikey-event__event-info {
    border-top: 1px solid #cfcfcf;
    margin-top: 30px;
    padding: 20px 0 0px;
    display:none;
}
.ubikey-event__event-info dl dt{font-size: 18px;font-weight: 500;color: #616161; margin-bottom:12px;}
.ubikey-event__event-info dl dd{font-size: 13px;line-height: 1.33;letter-spacing: -0.75px;margin-bottom:4px; color: #999;
                                text-align: justify; word-break:break-all; text-indent:-8px; margin-left:8px; }
.ubikey-event__event-info dl dd.blue{color: #5179ff;}
/*서비스 안내 끝*/

/*서비스 안내 시작*/
.ubikey-event__service-info{border-top:none; margin-top:20px; padding: 20px 0 20px; font-size:12px; text-align:left; padding-bottom: 300px}
.ubikey-event__service-info dl dt{font-size: 12px;font-weight: 500;color: #616161; margin-bottom:12px;}
.ubikey-event__service-info dl dd{font-size: 12px;line-height: 1.33;letter-spacing: -0.75px;margin-bottom:4px; color: #999;
                                  text-align: justify; word-break:break-all;  text-indent:-8px; margin-left:8px;}
.ubikey-event__service-info dl dd.blue{color: #5179ff;}
/*서비스 안내 끝*/

#txt_phone.glow,
#txt_secNum.glow,
#goSecubtn.glow,
#signup_button.glow {
    outline: none;
}

#txt_phone.glow,
#txt_secNum.glow {
    border: 1px solid var(--ads-guide-accent);
    outline: none;
    box-shadow: 0 0 10px rgba(81, 121, 255, 0.45), 0 0 20px rgba(81, 121, 255, 0.28);
    animation: glowPulse 1s ease-in-out infinite;
}

#goSecubtn.glow,
#signup_button.glow {
    border-color: var(--ads-guide-accent);
    outline: none;
    box-shadow: 0 0 6px rgba(81, 121, 255, 0.36), 0 0 18px rgba(81, 121, 255, 0.22);
    animation: guideGlowPulseBtn 1s ease-in-out infinite;
}

#signup_button.glow {
    border-color: var(--ads-guide-accent);
    box-shadow: 0 0 4px rgba(81, 121, 255, 0.28), 0 0 10px rgba(81, 121, 255, 0.18);
    animation: signupButtonGlowPulse 1s ease-in-out infinite;
}

#signup_button span.glow {
    animation: none !important;
    text-shadow: none !important;
    filter: none !important;
}


/*가입 완료 팝업 시작*/
.layer-alert{width:100%;height:100%;position:fixed;background:rgba(0,0,0,0.2);top:0;left:0;display:none;z-index:999;}
.layer-alert__wrapper{width:calc(100% - 30px); max-width:550px; margin:136px auto 0; padding:40px 20px; border-radius: 12px;box-shadow: 20px 20px 26px 0 rgba(0, 0, 0, 0.16);background-color: #fff;}
.layer-alert__wrapper img{display:block; margin:0 auto; width:60px; height:60px;}
.layer-alert__wrapper label{display:block;height:56px; color:#fff; background:#5179ff; font-size:18px; letter-spacing: -0.72px;max-width:306px; margin:40px auto 0; font-weight: 500; text-align: center; line-height: 56px; border-radius:6px;}
.layer-alert__wrapper h1{text-align: center; font-size: 24px; color: #616161;}
/**/
.layer-alert__warning {position:relative; width:calc(100% - 30px); max-width:330px; margin:136px auto 0; padding:15px 6px; border-radius: 12px;box-shadow: 20px 20px 26px 0 rgba(0, 0, 0, 0.16);background-color: #fff;}
.layer-alert__warning img{display:block; margin:0 auto; width:60px; height:60px;}
.layer-alert__warning h1{text-align: center; font-size: 20px; color: #616161;}
.layer-alert__warning h4{text-align: center; font-size: 18px; color: #616161; margin: 20px 0px;}
.layer-alert__warning label{display:block;height:56px; color:#fff; background:#5179ff; font-size:18px; letter-spacing: -0.72px;max-width:300px; margin:40px auto 0; font-weight: 500; text-align: center; line-height: 56px; border-radius:6px;}
.layer-alert__warning .close_btn {position: absolute;top: 25px;right: 16px;cursor: pointer;height: 16px;width: 16px; opacity:0.3}
.description {    text-align: center;    padding: 0px 20px;    font-size: 14px;}
.sub_description {    text-align: center;    padding: 0px 20px;    font-size: 12px;}
/**/
#service-join-complete:checked ~ .service-join-complete{display:block;}
.service-join-complete .layer-alert__wrapper{ width:100%; height:100%; padding: 0 20px 0 ; margin:0 auto; border-radius:0; position: relative;}
.service-join-complete .layer-alert__wrapper h1{text-align: center; font-size: 24px; color:#5179ff; text-align: center; letter-spacing: -0.05em;}
.service-join-complete .layer-alert__wrapper p{margin-top:20px; font-size: 22px; letter-spacing: -0.88px; font-weight:600;}
.service-join-complete .layer-alert__wrapper label{position: absolute; bottom:40px; max-width:460px; width:calc(100% - 30px); left:50%;
transform:translateX(-50%);}

.layer-alert__wrapper2 h1 { text-align: center; font-size: 19px; color: #616161; margin-top: 20px; }
.layer-alert__wrapper2 img { display: block; margin: 0 auto; width: 60px; height: 60px; }
.layer-alert__wrapper2 { width: calc(100% - 30px); max-width: 550px; margin: 0 auto 0; padding: 40px 20px; border-radius: 12px; box-shadow: 20px 20px 26px 0 rgba(0, 0, 0, 0.16); background-color: #fff; position:fixed; top: 70%; left: 50%; transform:translate(-50%, -50%)}
.layer-alert__wrapper2 label { display: block; height: 56px; color: #fff; background: #5179ff; font-size: 14px; letter-spacing: -0.72px; max-width: 306px; margin: 40px auto 0; font-weight: 500; text-align: center; line-height: 56px; border-radius: 6px; }
/*가입 완료 팝업 끝*/

@media screen and (min-width:660px) {
	.ubikey-event__big-title img {display: block; position: static; width: 375px;}
}
    .btn-banner {
    position: absolute;
    right: -16px;
    top: -6px;
    max-width: 16px;
    cursor: pointer;
}


    .btn-banner.small {
        position: absolute;
        right: -6px;
        top: -6px;
        width: 112px;
        max-width: 16px;
        height: 16px;
        cursor: pointer;
        z-index: 10;
    }

.glitter1 {
    animation: glitter1 2s infinite;
}


@keyframes glitter1 {
    0% {
        filter: brightness(0.8);
    }

    50% {
        filter: brightness(1.4);
    }

    100% {
        filter: brightness(0.8);
    }
}

.red-text {
    color: #ff0000;
}

@keyframes glowPulse {
    0% { box-shadow: 0 0 7px var(--ads-guide-glow-b), 0 0 16px rgba(81, 121, 255, 0.28), 0 0 26px var(--ads-guide-glow-a); }
    50% { box-shadow: 0 0 10px rgba(81, 121, 255, 0.76), 0 0 26px rgba(81, 121, 255, 0.48), 0 0 42px var(--ads-guide-glow-c); }
    100% { box-shadow: 0 0 7px var(--ads-guide-glow-b), 0 0 16px rgba(81, 121, 255, 0.28), 0 0 26px var(--ads-guide-glow-a); }
}

@keyframes guideGlowPulseBtn {
    0% { opacity: 0.5; box-shadow: 0 0 4px rgba(81, 121, 255, 0.2), 0 0 14px rgba(81, 121, 255, 0.16), 0 0 24px rgba(81, 121, 255, 0.1); }
    50% { opacity: 1; box-shadow: 0 0 10px rgba(81, 121, 255, 0.48), 0 0 24px rgba(81, 121, 255, 0.34), 0 0 42px rgba(81, 121, 255, 0.22); }
    100% { opacity: 0.5; box-shadow: 0 0 4px rgba(81, 121, 255, 0.2), 0 0 14px rgba(81, 121, 255, 0.16), 0 0 24px rgba(81, 121, 255, 0.1); }
}

@keyframes signupButtonGlowPulse {
    0% { opacity: 0.5; box-shadow: 0 0 4px rgba(81, 121, 255, 0.2), 0 0 14px rgba(81, 121, 255, 0.16), 0 0 24px rgba(81, 121, 255, 0.1); }
    50% { opacity: 1; box-shadow: 0 0 12px rgba(81, 121, 255, 0.52), 0 0 28px rgba(81, 121, 255, 0.38), 0 0 48px rgba(81, 121, 255, 0.24); }
    100% { opacity: 0.5; box-shadow: 0 0 4px rgba(81, 121, 255, 0.2), 0 0 14px rgba(81, 121, 255, 0.16), 0 0 24px rgba(81, 121, 255, 0.1); }
}

/* 202607 SKT policy: telecom-specific DB terms */
.ubikey-event__terms .ubikey-event__agreement-list dl.term-group {
    display: none !important;
}

.ubikey-event__terms .ubikey-event__agreement-list dl.term-group.is-active {
    display: flex !important;
    flex-direction: column;
    gap: 10px;
    width: 100%;
}


/* Keep GDN input text and placeholder vertically aligned. */
.ubikey-event__phone-auth input[type="tel"],
.ubikey-event__phone-auth input[type="text"],
.ubikey-event__phone-auth input[type="number"] {
    box-sizing: border-box;
    padding-top: 0;
    padding-bottom: 0;
    line-height: 1.2;
}

.ubikey-event__phone-auth input::placeholder {
    line-height: 1.2;
}

.taboola-footer-images {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin: 0;
    padding: 0;
    border-top: 1px solid rgba(112, 112, 112, 0.1);
}

.taboola-footer-images img {
    display: block;
    width: 100%;
    height: auto;
    margin: 0;
    padding: 20px 0 30px;
    border-bottom: 1px solid rgba(112, 112, 112, 0.1);
}

.ubikey-event__big-title .taboola-roller {
    width: 100%;
    margin: 0;
    overflow: hidden;
}

.ubikey-event__big-title .taboola-roller__track {
    display: flex;
    width: max-content;
    margin: 0;
    animation: taboolaRoll 16s linear infinite;
    will-change: transform;
}

.ubikey-event__big-title .taboola-roller img {
    display: block;
    flex: 0 0 auto;
    width: auto;
    max-width: none;
    height: 30px;
    margin: 0;
}

@keyframes taboolaRoll {
    from { transform: translate3d(0, 0, 0); }
    to { transform: translate3d(-50%, 0, 0); }
}

.service-join-complete .taboola-complete-image {
    display: block;
    width: min(100%, 246px);
    height: auto;
    margin: 0 auto;
}

.service-join-complete .btn-confirm {
    display: none !important;
}