#log_wrap {display: flex; height: calc(100dvh - 76px);}

/* 헤더 모바일 뒤로가기 (LOG 페이지 전용) */
#header .hd_back_mob {display: none;}
#log_wrap .log_box {flex:1; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center;}
#log_wrap .log_bg {width: 55%;}

#log_wrap .log_box .log_inner {max-width: 480px; width: 100%; margin: 0 auto;}
#log_wrap .log_box .top {display: flex; margin-bottom: 40px; flex-direction: column; gap: 12px;}
#log_wrap .log_box .top .logo {}
#log_wrap .log_box .top .logo img {height: 36px;}
#log_wrap .log_box .top .txt {font-size: 14px; line-height: 1.4; color: #8EA0AC;}

#log_wrap .log_box .title {text-align: left; margin-bottom: 40px;}
#log_wrap .log_box .title .tit {font-size: 32px; font-weight: 700; line-height: 1.25; color: #070429;}
#log_wrap .log_box .title .desc {margin-top: 12px; color: #8EA0AC; font-size: 16px; line-height: 1.5;}

#log_wrap .form_list {width: 100%;}
#log_wrap .form_list > li {position: relative;}
#log_wrap .form_list > li .inp {width: 100%; height: 64px; text-align: left; padding: 0 16px; font-size: 14px; border-radius: 12px; background-color: rgba(49, 130, 246, 0.04); border: 1px solid rgba(0, 62, 129, 0.04); transition: all 0.1s}
#log_wrap .form_list > li .inp:focus {background-color: rgba(49, 130, 246, 0.07); border: 1px solid rgba(0, 62, 129, 0.1);}

#log_wrap .form_list > li .inp::placeholder {color: #8EA0AC;}
#log_wrap .form_list > li.phone::after {content: ''; width: 12px; height: 19px; background: url('../img/paymong/login_phone.svg') no-repeat center center / cover; position: absolute; right: 20px; top: 50%; transform: translateY(-50%); }
#log_wrap .form_list > li.number > .time {position: absolute; top: 50%; transform: translateY(-50%); right: 16px; z-index: 2; font-size: 13px; font-weight: 600; color: #F75B2B;}

#log_wrap .log_box .bbtn {margin-top: 16px;}

#log_wrap .bbtn > .ab {width: 100%; height: 56px; background-color: #2663ED; border-radius: 12px; color: #fff; font-size: 16px; font-weight: 600; transition: all 0.1s; text-align: center; }
#log_wrap .bbtn > .ab:hover {background-color: #0a4de7;}
#log_wrap .bbtn > .ab.gr {background-color: #09B17E;}
#log_wrap .bbtn > .ab:disabled {background-color: #b7b7b7; color: #E1E1E1; cursor: default;}
#log_wrap .bbtn.dis_blue > .ab:disabled {background-color: #CCD8E6; color: #fff; cursor: default;}

#log_wrap .log_box .auto {margin-top: 24px; display: flex; align-items: center; justify-content: space-between;}
#log_wrap .log_box .auto > p {font-size: 14px; color: #8EA0AC; font-weight: 600;}
#log_wrap .log_box .auto > .ck {}
#log_wrap .log_box .auto > .ck > input {display: none;}
#log_wrap .log_box .auto > .ck > input + label {display: flex; align-items: center; width: 36px; height: 20px; background-color: #b7b7b7; border-radius: 9999px; cursor: pointer; transition: all 0.2s}
#log_wrap .log_box .auto > .ck > input + label::after {content: ''; width: 16px; height: 16px; background-color: #E1E1E1; margin-left: 2px; border-radius: 9999px; transition: all 0.2s}
#log_wrap .log_box .auto > .ck > input:checked + label {background:linear-gradient(100deg,#0038ff,#8423fe);}
#log_wrap .log_box .auto > .ck > input:checked + label::after {margin-left: 18px; background-color: #fff;}

#log_wrap .log_box .or {margin-top: 24px; margin-bottom: 24px; position: relative; }
#log_wrap .log_box .or::before {content: ''; position: absolute; width: 100%; top: 9.5px; left: 0; height: 1px; z-index: -1; background-color: rgba(0, 62, 129, 0.08);}
#log_wrap .log_box .or > span {display: inline-block; padding: 0 16px; background-color: #FCFCFC; font-size: 13px; color: #8EA0AC; line-height: 1.53;}

#log_wrap .sns_list {display: flex; flex-direction: column; gap: 12px;}
#log_wrap .sns_list > li {}
#log_wrap .sns_list > li > a {display: flex; align-items: center; justify-content: center; width: 100%; height: 50px; font-size: 14px; font-weight: 600; color: #052236; border: 1px solid rgba(0, 62, 129, 0.08); background-color: #fff; border-radius: 12px; position: relative; transition: all 0.2s}
#log_wrap .sns_list > li > a:hover {background-color: rgba(49, 130, 246, 0.04);}
#log_wrap .sns_list > li > a::before {content: ''; position: absolute; width: 20px; height: 20px; left: 20px; top: 50%; transform: translateY(-50%);}
#log_wrap .sns_list > li > a.kakao::before {background: url('../img/paymong/login_kakao.svg') no-repeat center center / cover;}
#log_wrap .sns_list > li > a.naver::before {background: url('../img/paymong/login_naver.svg') no-repeat center center / cover;}
#log_wrap .sns_list > li > a.google::before {background: url('../img/paymong/login_google.svg') no-repeat center center / cover;}
#log_wrap .sns_list > li > a.apple::before {background: url('../img/paymong/login_apple.svg') no-repeat center center / cover;}

#log_wrap .log_box .join_capt {margin-top: 24px; font-size: 14px; color: #536B7C;}
#log_wrap .log_box .join_capt a {color: #354977; font-weight: 600;}
#log_wrap .log_box .join_capt a:hover {text-decoration: underline;}
#log_wrap .log_box .priv_capt {margin-top: 24px; font-size: 13px; line-height: 1.53; color: #8EA0AC;}
#log_wrap .log_box .priv_capt a {color: #2663ED; border-bottom: 1px solid #2663ED;}

@keyframes pmAuthScrollUp {
  0% {
    transform: rotate(30deg) translateY(-10%);
  }
  100% {
    transform: rotate(30deg) translateY(-100%);
  }
}

#log_wrap .log_bg {overflow: hidden;}
#log_wrap .log_bg .bg_list {display: flex; gap: 80px;}
#log_wrap .log_bg .bg_list > li {transform: rotate(30deg); transform-origin: top; animation: pmAuthScrollUp linear infinite;}
#log_wrap .log_bg .bg_list > li:nth-child(1) {animation-duration: 4.4s;}
#log_wrap .log_bg .bg_list > li:nth-child(2) {animation-duration: 4.6s;}
#log_wrap .log_bg .bg_list > li:nth-child(3) {animation-duration: 4.2s;}
#log_wrap .log_bg .bg_list > li:nth-child(4) {animation-duration: 4.8s;}


#log_wrap{height:auto;min-height:calc(100dvh - 80px);background:#fff}#log_wrap *{box-sizing:border-box}#log_wrap ul{list-style:none;margin:0;padding:0}#log_wrap button{border:0;cursor:pointer}#log_wrap .log_box{padding:50px 32px;min-width:0}#log_wrap .log_bg{position:relative;max-height:950px;min-height:700px;background:#f5f8ff}#log_wrap .log_bg .bg_list{gap:30px;height:100%}#log_wrap .log_bg li{min-width:150px}#log_wrap .log_bg img{width:180px;max-width:none;display:block}#log_wrap .number_inp_list{display:flex;gap:8px;margin-top:24px}#log_wrap .number_inp_list li{flex:1;min-width:0}#log_wrap .number_inp_list .inp{width:100%;height:56px;border:1px solid #e0e7f1;border-radius:10px;text-align:center;font-size:22px;background:#f6f9fe}#log_wrap .retry_capt{display:flex;justify-content:space-between;margin:12px 0;color:#8ea0ac;font-size:13px}#log_wrap .retry_capt button{background:none;color:#2663ed}#log_wrap .form_list .inp{padding-right:60px}#log_wrap .form_list .phone:has(.time:not([style*="none"])):after{display:none}#log_wrap .auto .ck input{display:block!important;position:absolute;opacity:0;width:36px;height:20px}#log_wrap .auto .ck input:focus-visible+label{outline:2px solid #2663ed;outline-offset:3px}#log_wrap .or:before{z-index:0!important}#log_wrap .or span{position:relative;background:white!important}#log_wrap .join_box{width:100%;max-width:520px;margin:auto;padding:64px 24px;text-align:center}#log_wrap .join_box .thum img{width:180px}#log_wrap .join_box .tit{font-size:26px;font-weight:700;margin:24px 0 14px}#log_wrap .join_box .desc{font-size:15px;color:#8ea0ac;line-height:1.7}#log_wrap .join_box .btns{display:flex;gap:12px;margin-top:32px}#log_wrap .join_box .btns li{flex:1}#log_wrap .join_box .ab{display:block;background:#2663ed;color:white;border-radius:12px;padding:16px 8px}#log_wrap .join_box .ab.white{background:#f1f5fd;color:#2663ed}
@media(max-width:769px){#log_wrap{min-height:calc(100dvh - 66px)}#log_wrap .log_bg{display:none}#log_wrap .log_box{padding:42px 24px;justify-content:flex-start}#log_wrap .log_box .title .tit{font-size:26px}#log_wrap .log_box .title .desc{font-size:14px}#log_wrap .log_box .log_inner{max-width:420px}#log_wrap .log_box .top .logo img{height:30px}#log_wrap .form_list>li .inp{height:56px}#log_wrap .sns_list>li>a{height:50px}#log_wrap .number_inp_list{gap:6px}#log_wrap .number_inp_list .inp{height:48px}}
@media(prefers-reduced-motion:reduce){#log_wrap .log_bg li{animation:none!important}}

.pm-auth-terms .secStep3{padding:64px 24px}.pm-auth-terms .joinPro{width:100%;max-width:480px;margin:auto;display:block}.pm-auth-terms .txtbox h1{font-size:30px;line-height:1.35}.pm-auth-terms .txtbox .txt1{font-size:14px;margin-top:12px}.pm-auth-terms .dataBox{width:100%;margin-top:32px}.pm-auth-terms .loginBtnbox{width:100%;margin-top:28px}.pm-auth-terms .stepBtn{width:100%;border-radius:12px;background:#2663ed;color:white;min-height:54px}.pm-auth-terms [data-aos]{opacity:1;transform:none}

/* Preserve paymong2 LOG01's original illustration scale and column spacing. */
@media(min-width:770px){
 #log_wrap .log_bg{width:55%;min-height:0;max-height:none;height:calc(100dvh - 80px);overflow:hidden;align-self:stretch}
 #log_wrap .log_bg .bg_list{gap:80px}
 #log_wrap .log_bg .bg_list>li{flex:0 0 439px;min-width:439px}
 #log_wrap .log_bg img{width:439px;height:auto;max-width:none}
}
@media(min-width:770px) and (max-width:1200px){#log_wrap .log_bg{width:45%}}

/* Two identical strips move by exactly one strip, without a reset jump. */
#log_wrap .log_bg .bg_list{align-items:flex-start}
#log_wrap .log_bg .bg_list>li{height:max-content;animation-name:pmAuthSeamless;animation-play-state:paused;will-change:transform}
#log_wrap .log_bg.is-art-ready .bg_list>li{animation-play-state:running}
#log_wrap .log_bg img{opacity:1;filter:none}
@keyframes pmAuthSeamless{from{transform:rotate(30deg) translateY(0)}to{transform:rotate(30deg) translateY(-50%)}}