﻿/*초기화 시작*/
*{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; padding:20px; font-size:14px; font-weight: 500; color: #999;}
a{text-decoration: none;}
button, [type="button"]{border-radius: 12px; background: #35b9be; color:#fff; border:none; font-size:18px;}
body,html{height:100%;}
body{background-color: #f7f8fa;}
.onekeeper-event-loading-cover{background:#f7f8fa; position:fixed; z-index:999; width:100%; height:100%; }
/*초기화 끝*/

/*본 작업 CSS*/

/*모바일 시작*/

/*헤더 시작*/
.onekeeper-event{padding:0 15px; max-width:640px; margin:0 auto;}
.onekeeper-event .onekeeper-event__top{font-size:18px; font-weight:bold; text-align:left; color:#000; border-bottom:1px solid #cfcfcf; padding:18px 0;}
.onekeeper-event .onekeeper-event__top span{display:inline-block; font-size: 12px; color: #35b9be; font-weight: normal; margin-left:8px; 
line-height: 26px; vertical-align: middle; margin-top:-2px;}
/*헤더 끝*/

/*큰제목 시작*/
.onekeeper-event__big-title{/*margin-top:40px;*/}
/*.onekeeper-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;}*/
	.onekeeper-event__big-title img {
        content:url(../images/my1pick_main_image.png); 
		display: block;
		width: 100%;
		margin: 0 auto;
		position: relative;
	}

@keyframes blink {
	0% {
		opacity:100%;
	}
	50%{
		opacity:0%;
	}
	100%{
		opacity:100%;
	}
}



.onekeeper-event__big-title div{margin:20px 0 0 0;}
.onekeeper-event__big-title div h1{font-size: 24px; font-weight: bold; text-align: center;}
.onekeeper-event__big-title div p{font-size: 20px; font-weight: bold; text-align: center; color:#006dc7; margin-top:8px;}
.onekeeper-event__big-title div p span{display:block;}
/*큰제목 끝*/

/*설명서 시작*/
.onekeeper-event__discriptions{background:#fff; border-radius:12px; border:1px solid #d0d0d0; /*margin-top:20px;*/}
.onekeeper-event__discriptions h3{font-size: 20px; font-weight: 500; text-align: center; color: #35b9be; line-height:72px;
border-bottom:1px solid #d0d0d0;}
.onekeeper-event__discriptions ul{display:flex; padding:0 12px; width:100%; max-width:322px; margin:0 auto; gap:10px;}
.onekeeper-event__discriptions ul li{width:33.33%; max-width:106px; text-align: center;}
.onekeeper-event__discriptions ul li img{width:100%; max-width:106px;}
.onekeeper-event__discriptions ul li span{font-size: 13px; color: #616161;}
.onekeeper-event__discriptions p{padding:0 12px; margin-top:32px;}
.onekeeper-event__discriptions p.onekeeper-event__detail-description{font-size: 15px;line-height: 1.75;letter-spacing: -0.48px; color: #000; 
text-align: center;word-break:break-all;}
.onekeeper-event__discriptions p.onekeeper-event__price-info{font-size:13px; line-height:1.54; letter-spacing:-0.26px; text-align:center;
color: #35b9be; margin-bottom:20px;}
/*설명서 끝*/

/*통신사 선택 탭 시작*/
.onekeeper-event__telecom-selector{display:flex; height:72px; background:#fff; margin-top:20px; border-radius:12px;}
.onekeeper-event__telecom-selector input[type=radio]{display:none;}
.onekeeper-event__telecom-selector label{display:block; width:33.33%; height:100%; background-repeat: no-repeat; color: #616161;
background-position:center; border:1px solid #d0d0d0;}
.onekeeper-event__telecom-selector label.skt{background-image:url(/images/cp_image/skt-off.png); background-size:auto 32px; 
border-radius:12px 0 0 12px;}
.onekeeper-event__telecom-selector label.kt{background-image:url(/images/cp_image/kt-off.png); background-size:auto 22px; 
border-left:none; border-right:none;}
.onekeeper-event__telecom-selector label.lgu{background-image:url(/images/cp_image/lgu-off.png); background-size:auto 22px; 
border-radius:0px 12px 12px 0px;}
.onekeeper-event__telecom-selector input:checked + label{border:1px solid #35b9be;}
.onekeeper-event__telecom-selector #skt:checked + label.skt{background-image:url(/images/cp_image/skt-on.png);}
.onekeeper-event__telecom-selector #kt:checked + label.kt{background-image:url(/images/cp_image/kt-on.png);}
.onekeeper-event__telecom-selector #lgu:checked + label.lgu{background-image:url(/images/cp_image/lgu-on.png);}
/*통신사 선택 탭 끝 */

/*약관동의 시작*/
.onekeeper-event__terms{border-radius:12px; background:#fff; border: solid 1px #d0d0d0; overflow: hidden; margin-top:20px;}
.onekeeper-event__terms .onekeeper-event__terms-agree-all{background:#f6f6f6; font-size: 18px; font-weight: 500; text-align: left; 
color: #000; padding:15px; border-bottom:1px solid #d0d0d0;}
.onekeeper-event__terms .onekeeper-event__agreement-list {display:flex;}
.onekeeper-event__terms .onekeeper-event__agreement-list{padding:20px 15px;}
.onekeeper-event__terms .onekeeper-event__agreement-list dl{ display:flex; flex-direction: column; gap:10px; width:100%;}
.onekeeper-event__terms .onekeeper-event__agreement-list dl dd{color: #616161; letter-spacing: -0.72px; display:flex; align-items:center;}
.onekeeper-event__terms .onekeeper-event__agreement-list dl dd .checkbox-img{min-width:20px; height:20px; border:1px solid #d0d0d0; 
margin:2px 12px 0 0; background-color:#fff; }
.onekeeper-event__terms .onekeeper-event__agreement-list dl dd input{display:none;}
.onekeeper-event__terms .onekeeper-event__agreement-list dl dd input:checked + .checkbox-img{background-image:url(/images/cp_image/checkbox.png); border:none;}
.onekeeper-event__terms .onekeeper-event__agreement-list dl dd div{ border-bottom:1px solid #fff; width:calc(100% - 32px); position: relative;}
.onekeeper-event__terms .onekeeper-event__agreement-list dl dd.agree-all div{border-bottom:none; width:auto; }
.onekeeper-event__terms .onekeeper-event__agreement-list dl dd div label{cursor:pointer; font-size: 14px; display:flex; align-items: center; justify-content: space-between;
width:calc(100% - 16px);}
.onekeeper-event__terms .onekeeper-event__agreement-list dl dd.agree-all div label{width:auto;}
.onekeeper-event__terms .onekeeper-event__agreement-list dl dd div label a{ color:#616161; }
.onekeeper-event__terms .onekeeper-event__agreement-list dl dd div label a img{width:16px; display:block; float:right; margin-top:3px;}
/*약관동의 끝*/

/*휴대폰 인증하기 및 가입버튼 시작*/
.onekeeper-event__phone-auth{width:100%; margin-top:20px;} 
.onekeeper-event__phone-auth input::placeholder{color:#999;}
.onekeeper-event__phone-auth .onekeeper-event__phone-number {width:100%; height:56px; display:flex;} 
.onekeeper-event__phone-auth .onekeeper-event__phone-number input{width:calc(100% - 106px); height:100%; border:1px solid #d0d0d0; 
border-right:none; border-radius:12px 0 0 12px;}
.onekeeper-event__phone-auth .onekeeper-event__phone-number [type='button']{width:106px; height:100%; border-radius:0 12px 12px 0; 
border:1px solid #35b9be; font-size:14px;}
.onekeeper-event__auth-number{position:relative; margin-top:8px;}
.onekeeper-event__auth-number span{position: absolute; top:0px; right:15px; font-size: 16px; line-height: 54px;}
input.onekeeper-event__input-auth-num{border-radius:12px; width:100%; height:56px; border:1px solid #d0d0d0; }

.onekeeper-event__join{width:100%; height:56px;  margin-top:20px; font-size:14px;}
.onekeeper-event__join-later{display:block; width:108px; margin:20px auto; font-size: 14px; color: #cfcfcf; background:none;
border-bottom:1px solid #cfcfcf; border-radius:0; cursor:pointer;}
/*휴대폰 인증하기 및 가입버튼 끝*/

/*이벤트 안내 시작*/
.onekeeper-event__event-info{border-top:1px solid #cfcfcf; margin-top:44px; padding:40px 0 0px; }
.onekeeper-event__event-info dl dt{font-size: 18px;font-weight: 500;color: #616161; margin-bottom:12px;}
.onekeeper-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; }
.onekeeper-event__event-info dl dd.blue{color: #35b9be;} 
/*서비스 안내 끝*/

/*서비스 안내 시작*/
.onekeeper-event__service-info{border-top:1px solid #cfcfcf; margin-top:44px; padding:40px 0 20px; }
.onekeeper-event__service-info dl dt{font-size: 18px;font-weight: 500;color: #616161; margin-bottom:12px;}
.onekeeper-event__service-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; }
.onekeeper-event__service-info dl dd.blue{color: #35b9be;} 
/*서비스 안내 끝*/


/*가입 완료 팝업 시작*/
.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 h1{text-align: center; font-size: 24px; color: #616161;margin-top:20px;}
.layer-alert__wrapper label{display:block;height:56px; color:#fff; background:#35b9be; 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__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:red; 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: 60px 20px 0 ; margin:0 auto; border-radius:0; position: relative;}
.service-join-complete .layer-alert__wrapper h1{text-align: center; font-size: 32px; color:#056dc7; text-align: left; letter-spacing: -2.24px;}
.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: 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__wrapper2 label { display: block; height: 56px; color: #fff; background: #19307a; 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) {
	.onekeeper-event__big-title img {display: block; position: static; width: 640px; content:url(../images/my1pick_main_image.png);}
    /*가입 완료 팝업 시작*/
	#service-join-complete:checked ~ .service-join-complete{display:block;}
	.service-join-complete .layer-alert__wrapper {padding:40px; height:auto; margin-top:204px; border-radius:12px;}
	.service-join-complete .layer-alert__wrapper h1{font-size:48px; letter-spacing: -3.36px;}
	.service-join-complete .layer-alert__wrapper p{margin-top:40px; font-size: 24px; letter-spacing: -1.68px;}
	.service-join-complete .layer-alert__wrapper label{position:static; width:100%; margin:80px auto 0; transform:translateX(0);}
	/*가입 완료 팝업 끝*/
}