.fontHN { font-family:'HelveticaNeue', sans-serif } 

/* Mobile */
.saleDate { display:none; padding-top:69%; font-size:12px; color:#351c19; font-weight:500; text-align:center }
.familyUserWrap { position:fixed; bottom:3%; left:5%; right:5%; width:90%; height:auto }
.familyUserWrap .userArea { padding:0 2% 30px }
.familyUserWrap .userArea .userNumTitle { padding-top:25px; font-size:22px; color:#fff; font-weight:700; text-align:center; }
.familyUserWrap .userArea .userInput { margin-top:10px; padding-right:31%; position:relative; font-size:0 }
.familyUserWrap .userArea .userInput input { width:100%; height:34px; text-align:center; border:0; background:rgba(255,255,255,1); box-sizing:border-box; -webkit-border-radius:0; -moz-border-radius:0; -o-border-radius:0; border-radius:0; }
.familyUserWrap .userArea .userInput input::placeholder { color:#000 }
.familyUserWrap .userArea .userInputDesc { padding-top:12px; color:#fff; text-align:center; line-height:17px }
.familyUserWrap .userArea .userAccess { position:absolute; top:0; right:0; width:30% }
.familyUserWrap .userArea .userAccess a { display:block; height:34px; font-size:12px; color:#fff; font-weight:700; text-align:center; line-height:34px; background:#000 }

.familyUserWrap .userArea .emailCertBox1 { padding-top:10px; font-size:0 }
.familyUserWrap .userArea .emailCertBox2 { padding-top:5px; font-size:0 }
.familyUserWrap .userArea .emailCertBox1 input,
.familyUserWrap .userArea .emailCertBox2 input { width:calc(37% + 1px); height:34px; color:#fff; text-align:center; border:0; border-bottom:1px solid #cfd0d2; background:none; box-sizing:border-box; -webkit-border-radius:0; -moz-border-radius:0; -o-border-radius:0; border-radius:0; }
.familyUserWrap .userArea .emailCertBox2 input { width:calc(73% - 9px) }
.familyUserWrap .userArea .emailCertBox1 input::placeholder,
.familyUserWrap .userArea .emailCertBox2 input::placeholder { color:#dcddde }
.familyUserWrap .userArea .emailCertBox1 select { margin-left:2px; width:32%; height:34px; text-align:center; border:1px solid #4c4c4c; box-sizing:border-box; -webkit-border-radius:0; -moz-border-radius:0; -o-border-radius:0; border-radius:0; }
.familyUserWrap .userArea .emailCertBox1 a,
.familyUserWrap .userArea .emailCertBox2 a { display:inline-block; margin-left:2px; width:calc(28% + 3px); height:34px; font-size:12px; color:#fff; font-weight:700; text-align:center; line-height:34px; box-sizing:border-box; background:#000 }
.familyUserWrap .userArea .emailCertBox2 #timer { display:inline-block; width:calc(73% - 9px); font-size:12px; color:#fff; font-weight:600; text-align:center; line-height:34px; vertical-align:top }

#introPopup { position:fixed; top:0; left:0; right:0; bottom:0; width:100%; height:100%; font-size:0; text-align:center; background:rgba(0,0,0,0.6); z-index:9999 }
#introPopup .introPopupInner { position:fixed; bottom:0; left:0; right:0; width:auto; height:auto }
#introPopup .introPopupInner .introPopupCont { position:relative; width:100%; height:auto }
#introPopup .introPopupInner .introPopupCont .moPopupImg { width:100% }
#introPopup .introPopupInner .introPopupCont a { display:block; position:absolute; font-size:0; text-indent:-9999em }
#introPopup .introPopupInner .introPopupCont .btnPopupClose { bottom:5.7%; left:5.8%; width:44%; height:12.2% }
#introPopup .introPopupInner .introPopupCont .btnPopupToday { bottom:5.7%; left:50.8%; width:44%; height:12.2% }

/* PC */
@media screen and ( min-width:641px ) { 
	body { background:#fff; }
	.saleDate { display:none; padding:0; position:absolute; top:558px; left:0; right:0; font-size:20px; color:#000; font-weight:700 }
	.familyUserWrap { margin:0 auto; padding-top:520px; position:relative; bottom:auto; left:auto; right:auto; width:596px; height:auto; background:none }
	.familyUserWrap .userArea { padding:0 }
	.familyUserWrap .userArea .userNumTitle { padding-top:45px; font-size:35px; font-weight:700 }
	.familyUserWrap .userArea .userInput { margin-top:16px }
	.familyUserWrap .userArea .userInput input { height:48px; font-size:14px }
	.familyUserWrap .userArea .userInputDesc { display:block; padding-top:14px; font-size:14px; color:#fff; text-align:center }
	.familyUserWrap .userArea .userAccess a { height:48px; font-size:14px; line-height:48px }

	.familyUserWrap .userArea .emailCertBox1 { padding-top:25px; font-size:0 }
	.familyUserWrap .userArea .emailCertBox2 { padding-top:10px; font-size:0 }
	.familyUserWrap .userArea .emailCertBox1 input,
	.familyUserWrap .userArea .emailCertBox2 input { width:272px; height:48px; font-size:14px; border:0; border-bottom:1px solid #cfd0d2; background:none; box-sizing:border-box }
	.familyUserWrap .userArea .emailCertBox2 input { width:424px }
	.familyUserWrap .userArea .emailCertBox1 input::placeholder,
	.familyUserWrap .userArea .emailCertBox2 input::placeholder { color:#dcddde }
	.familyUserWrap .userArea .emailCertBox1 select { margin-left:2px; width:150px; height:48px; font-size:14px; text-align:center; border:1px solid #898989; box-sizing:border-box }
	.familyUserWrap .userArea .emailCertBox1 a,
	.familyUserWrap .userArea .emailCertBox2 a { display:inline-block; margin-left:2px; width:calc(28% + 3px); height:48px; font-size:14px; text-align:center; line-height:48px; box-sizing:border-box; background:#000 }
	.familyUserWrap .userArea .emailCertBox2 #timer { width:424px; font-size:14px; line-height:48px }

	#introPopup:before { display:inline-block; width:0; height:100%; content:''; vertical-align:middle }
	#introPopup .introPopupInner { display:inline-block; position:relative; bottom:auto; left:auto; right:auto; max-width:90%; vertical-align:middle }
	#introPopup .introPopupInner .introPopupCont { position:relative; width:944px; height:452px; background:url(/design/lottegfr01/intro/images/pc_intro_popup_240923.jpg) 0 0 no-repeat }
	#introPopup .introPopupInner .introPopupCont .moPopupImg { display:none }
	#introPopup .introPopupInner .introPopupCont .btnPopupClose { top:381px; bottom:auto; left:68px; width:168px; height:38px }
	#introPopup .introPopupInner .introPopupCont .btnPopupToday { top:381px; bottom:auto; left:240px; width:168px; height:38px }
}
