/*
** MUSECLINIC
** Released on: 2022. 01. 05 - v1
**/

/* 팝업 */
.openPopup {display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0, 0, 0, .4);}
.openPopup.Active {display:block; z-index:100;}
.openPopup dl {position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); width:480px; height:auto; background:#FFF; box-shadow:0 0 30px 0 rgb(0 0 0 / 40%); border-radius:8px; overflow:hidden;}
.openPopup dl dt h1 {height:60px; line-height:60px; padding:0 48px; font-size:22px; color:#999; border-bottom:2px solid #EEE;}
.openPopup dl dt .phrase {padding:40px 48px; font-size:24px; color:#111;}
.openPopup dl dd {height:68px; line-height:68px; text-align:center; font-size:22px; color:#333; background:#ffcd00; cursor:pointer;}

/* 전후사진 */
.bA-Wrap {position:absolute; top:0; left:0; width:100%; height:100%; padding-bottom:64px; overflow:auto; background:#E5E6F0;}
.bA-Wrap .titleConts{position:relative; height:95px; border-bottom:2px solid #EEE; background:#FFF; box-shadow:2px 4px 8px #00000029;}
.bA-Wrap .titleConts h1 {width:300px; height:100%; margin:0 auto; font-size:0; color:transparent; cursor:pointer;}

/*
** 전후사진 - 로그인
*/
.bA-Wrap .loginConts .title {background:#FFF;}
.bA-Wrap .loginConts .title h1 {max-width:980px; margin:0 auto; padding:60px 40px; font-size:30px; font-weight:600; color:#111;}
.bA-Wrap .loginConts .tel {max-width:980px; padding:60px 40px 40px; margin:0 auto;}
.bA-Wrap .loginConts .telBox {position:relative; overflow:hidden;}
.bA-Wrap .loginConts .telBox:first-of-type {margin-bottom:20px;} 
.bA-Wrap .loginConts .telBox .userTel,
.bA-Wrap .loginConts .telBox .telChk {float:left; height:68px; font-size:26px;}
.bA-Wrap .loginConts .telBox .userTel {width:calc(100% - 160px); padding:0 40px; border:0; border-radius:8px 0 0 8px; background:#FFF;}
.bA-Wrap .loginConts .telBox .telChk {width:160px; line-height:68px; text-align:center; color:#FFF; border-radius:0 8px 8px 0; background:#565662; cursor:pointer;}
.bA-Wrap .loginConts .telCertified {width:100%; height:68px; padding:0 40px; font-size:26px; border:0; border-radius:8px; background:#FFF;}
.bA-Wrap .loginConts .telTimer {opacity:0; position:absolute; top:50%; right:40px; transform:translateY(-50%); font-size:22px; color:#ff5845;}
.bA-Wrap .loginConts .telTimer.On {opacity:1;}
.bA-Wrap .loginConts .telLogin {height:80px; line-height:80px; margin:28px 0 0; font-size:26px; font-weight:700; text-align:center; color:#FFF; border-radius:8px; background:#565662; cursor:pointer;}
.bA-Wrap .loginConts .or {position:relative; max-width:980px; margin:0 auto; text-align:center;}
.bA-Wrap .loginConts .or::after {content:''; position:absolute; top:50%; left:40px; width:calc(100% - 80px); height:2px; background:#DDD;}
.bA-Wrap .loginConts .or div {position:relative; z-index:1; display:inline-block; font-size:22px; padding:0 24px; background:#E5E6F0;}
.bA-Wrap .loginConts .kakao {max-width:980px; margin:0 auto; padding:40px 40px 60px;}
.bA-Wrap .loginConts .kakao .kakaoLogin {height:80px; line-height:80px; font-size:26px; font-weight:700; text-align:center; color:#111; border-radius:8px; background:#f9c94b; cursor:pointer;}
.bA-Wrap .loginConts .announcement {max-width:980px; margin:0 auto; padding:0 48px 60px; font-size:22px; color:#777; white-space:pre-line;}


/*
** 전후사진 - 리스트
*/
.bA-Wrap .viewConts .category {padding:40px; background:#FFF;}
.bA-Wrap .viewConts .category div {max-width:980px; margin:0 auto; overflow:hidden;}
.bA-Wrap .viewConts .category a {float:left; width:50%; height:80px; line-height:80px; border:2px solid #EEE; font-size:30px; font-weight:600; color:#111; text-align:center;}
.bA-Wrap .viewConts .category a:active {background:#F7F8FA;}
.bA-Wrap .viewConts .category a:nth-child(even) {border-left:0;}
.bA-Wrap .viewConts .category a:nth-child(n+3) {border-top:0;}
.bA-Wrap .viewConts .category a.Active {color:#FFF; background:#565662; border-color:#565662}
.bA-Wrap .viewConts .select {max-width:980px; margin:0 auto; padding:48px 40px;}
.bA-Wrap .viewConts .select .choice {width:100%; height:68px; margin:0 0 24px; font-size:28px; font-weight:600; color:#333; padding:0 40px; border:0; border-radius:8px; background:#FFF url(/images/i_beforeAfter_arrow.png) no-repeat right 40px top 50%; cursor:pointer;}
.bA-Wrap .viewConts .select .choice:last-of-type {margin:0;}
.bA-Wrap .viewConts .bA-imgConts {max-width:980px; margin:0 auto; overflow:hidden;}
.bA-Wrap .viewConts .bA-imgConts .bA-position {display:flex; justify-content:center; padding:0 0 24px;}
.bA-Wrap .viewConts .bA-imgConts .bA-position li {height:48px; line-height:48px; padding:0 28px; margin-right:12px; font-size:26px; border-radius:24px; background:#FFF; cursor:pointer;}
.bA-Wrap .viewConts .bA-imgConts .bA-position li:last-of-type {margin:0;}
.bA-Wrap .viewConts .bA-imgConts .bA-position li.Active {color:#FFF; background:#565662;}
.bA-Wrap .viewConts .bA-imgConts .bA-img li {position:relative; z-index:-1; opacity:0; height:0;}
.bA-Wrap .viewConts .bA-imgConts .bA-img li.Active {z-index:0; opacity:1; height:auto;}
.bA-Wrap .viewConts .bA-imgConts .bA-img li img {width:100%;}
.bA-Wrap .viewConts .bA-imgConts .bA-img p {position:relative; padding:24px 40px 24px 68px; font-size:26px; color:#FFF; line-height:42px; border-bottom:1px solid #DDD; background:#565662;}
.bA-Wrap .viewConts .bA-imgConts .bA-img p::before {content:'📝'; position:absolute; top:24px; left:24px;}
.bA-Wrap .viewConts .bA-imgConts .bA-img p.lk {padding-right:160px;}
.bA-Wrap .viewConts .bA-imgConts .bA-img p.lk a {position:absolute; right:24px; top:50%; transform:translateY(-50%); padding:4px 20px; font-size:22px; font-weight:600; color:#777; letter-spacing:-.8px; background:#F4F4F4; border-radius:30px;}
.bA-Wrap .viewConts .bA-imgConts .bA-img p.lk a:active {background:#F7F8FA;}

.bA-Wrap .pagingConts {max-width:980px; margin:0 auto; text-align:center;}
.bA-Wrap .pagingConts .paging {display:inline-flex; flex-wrap:wrap; padding:40px 26px 60px; overflow:hidden;}
.bA-Wrap .pagingConts .paging div {float:left; width:160px; height:48px; line-height:48px; margin-left:16px; font-size:26px; text-align:center; background:#FFF; cursor:pointer;}
.bA-Wrap .pagingConts .paging div:nth-child(4n+1) {margin-left:0;}
.bA-Wrap .pagingConts .paging div:nth-child(n+5) {margin-top:16px;}
.bA-Wrap .pagingConts .paging div.Active {color:#FFF; background:#565662;}

.bA-Wrap .noticeConts {padding:20px 40px 60px; background:#FFF;}
.bA-Wrap .noticeConts .notice {max-width:980px; padding:0 0 40px; margin:40px auto 0;}
.bA-Wrap .noticeConts .notice:first-of-type {border-bottom:1px solid #DDD;}
.bA-Wrap .noticeConts .notice h2 {position:relative; font-size:25px; font-weight:600; margin-bottom:12px; padding-left:18px; color:#666;}
.bA-Wrap .noticeConts .notice h2::before {content:''; position:absolute; top:50%; left:0; transform:translateY(-50%); width:8px; height:8px; background:#565662;}
.bA-Wrap .noticeConts .notice p {font-size:23px; color:#777; white-space:pre-line;}

.bottomNavi {position:fixed; bottom:0; left:0; z-index:10; display:flex; justify-content:center; width:100%; height:64px; background:#F7F8FA; border-top:1px solid #EEE;}
.bottomNavi a {max-width:326px; height:100%; font-size:0; color:transparent;}
.bottomNavi a:nth-child(1) {width:33.4%; background:url(/images/i_beforeAfter_home.png) no-repeat 50% 50%; background-size:32px;}
.bottomNavi a:nth-child(2) {width:33.3%; background:url(/images/i_beforeAfter_kakao.png) no-repeat 50% 50%; background-size:36px; opacity:.8;}
.bottomNavi a:nth-child(3) {width:33.3%; background:url(/images/i_beforeAfter_tel.png) no-repeat 50% 50%; background-size:32px; opacity:.8;}