/*
2024-11-11  LEE

뉴스레터 구독마법사

소스복사를 이용하는 경우 호출되는 스타일로 사용자들이 직접 삽입한 소스에서 호출되는 것이다.



*/



/* 전체 width */
#OZ-SUBSCRIBE-FRAME {
    width:600px;
    box-sizing:border-box;
    margin:auto;
    padding:80px 20px;
}
#OZ-SUBSCRIBE-FRAME * {
    box-sizing:border-box;
    font-family:'Malgun Gothic', '맑은 고딕';
    color:#222222;
}
/* 메인 이미지 */
#OZ-SUBSCRIBE-FRAME > .oz-main-image {
    min-height:10px;
    align-items: center;
    box-sizing:border-box;
    display: flex;
    justify-content: center;
    margin-bottom:40px;
}
/* 메인 이미지 */
#OZ-SUBSCRIBE-FRAME > .oz-main-image > img {
    max-width:560px;
    box-sizing:border-box;
    display:block;
}
/* 제목 */
#OZ-SUBSCRIBE-FRAME > .oz-subscribe-title {
    box-sizing:border-box;
    color:#222222;
    font-family:'Malgun Gothic', '맑은 고딕';
    font-size:22px;
    font-weight:bold;
    letter-spacing:-1.1px;
    margin-bottom:25px;
}
/* 설명글 */
#OZ-SUBSCRIBE-FRAME > .oz-subscribe-intro {
    box-sizing:border-box;
    color:#444444;
    font-size:15px;
    font-family:'Malgun Gothic', '맑은 고딕';
    letter-spacing:-0.7px;
    line-height:1.7;
    margin-bottom:37px;
}
/* 필드가 들어가는 영역 */
#OZ-SUBSCRIBE-FRAME > .oz-fields > div {
    box-sizing:border-box;
}
/* 필드 제목 */
#OZ-SUBSCRIBE-FRAME > .oz-fields > div > .oz-field-title {
    box-sizing:border-box;
    color:#222222;
    font-family:'Malgun Gothic', '맑은 고딕';
    font-size:15px;
    font-weight:bold;
    letter-spacing:-0.7px;
    margin-bottom:12px;
}
/* 필드 입력란 */
#OZ-SUBSCRIBE-FRAME > .oz-fields > div > input[type=text] {
    width:100%;
    height:48px;
    border:1px solid #ccd2db;
    border-radius:4px;
    box-sizing:border-box;
    color:#333333;
    font-family:'Malgun Gothic', '맑은 고딕';
    font-size:15px;
    margin-bottom:21px;
    padding-left:12px;
}
/* 개인정보 수집 및 이용에 동의 */
#OZ-SUBSCRIBE-FRAME > .oz-agree-frame {
    align-items: center;
    box-sizing:border-box;
    display:flex;
    margin-top:18px;
    margin-bottom:40px;
}
#OZ-SUBSCRIBE-FRAME > .oz-agree-frame > input[type=checkbox] {
    width:16px;
    height:16px;
    accent-color:#0059ff;
    box-sizing:border-box;
    margin:0;
    padding:0;
}
#OZ-SUBSCRIBE-FRAME > .oz-agree-frame > .oz-require {
    box-sizing:border-box;
    color:#222222;
    font-family:'Malgun Gothic', '맑은 고딕';
    font-size:14px;
    letter-spacing:-0.7px;
}
#OZ-SUBSCRIBE-FRAME > .oz-agree-frame > .oz-agree {
    box-sizing:border-box;
    color:#222222;
    font-family:'Malgun Gothic', '맑은 고딕';
    font-size:14px;
    font-weight:bold;
    letter-spacing:-0.7px;
}
/* 버튼 */
#OZ-SUBSCRIBE-FRAME > .oz-button {
    height:48px;
    align-items: center;
    background-color:#444444;
    border-radius:4px;
    box-sizing:border-box;
    color:#ffffff;
    cursor:pointer;
    display:flex;
    font-family:'Malgun Gothic', '맑은 고딕';
    font-size:17px;
    font-weight:bold;
    justify-content: center;
    letter-spacing:-0.8px;
}
/* 이페이지에서만 사용 */
#OZ-SUBSCRIBE-FRAME > div.oz-agree-frame + #OZ-SUBSCRIBE-FRAME > div.oz-button {
    margin-top:40px;
}
#OZ-SUBSCRIBE-FRAME > .oz-agree-frame > .oz-agree {
    cursor:pointer;
}
#OZ-SUBSCRIBE-FRAME > .oz-agree-term {
    display:none;
}
/* 팝업 내용 스타일 */
div.mm3-popup-ground {
    width:100%;
    height:100%;
    left:0;
    top:0;
    align-items:center;
    background-color:rgba(0,0,0,0.7);
    display:none;
    justify-content:center;
    overflow:auto;
    position:fixed;
}
.mm3-popup-frame {
    min-width:500px;
    background-color:#ffffff;
    border-radius:10px;
    margin:auto;
    padding:30px 40px 50px 40px;
}
.mm3-popup-frame > .mm3-popup-top {
    align-items:flex-start;
    display:flex;
    justify-content:space-between;
    padding-bottom:17px;
}
.mm3-popup-frame > .mm3-popup-top > .mm3-popup-title {
    color:#333333;
    font-family:'Malgun Gothic', '맑은 고딕';
    font-size:22px;
    font-weight:bold;
    letter-spacing:-0.7px;
    padding-top:15px;
}
.mm3-popup-frame > .mm3-popup-top > .mm3-popup-close-top {
    width:24px;
    height:24px;
    background-image:var(--background-image);
    cursor:pointer;
    transform:translate(10px, 0);
}
.mm3-popup-frame > .mm3-popup-bottom {
    display:flex;
    justify-content:center;
    padding-top:30px;
}
.mm3-popup-frame > .mm3-popup-body {
    color:#333333;
    font-size:14px;
    line-height:1.8;
}
.mm3-popup-frame > .mm3-popup-bottom > .mm3-popup-close-bottom {
    height:47px;
    background-color:#0060ff;
    border-radius:6px;
    color:#ffffff;
    cursor:pointer;
    font-weight:bold;
    font-size:17px;
    letter-spacing:-0.6px;
    margin:0 10px;
    padding:10px 38px 0 38px;
    text-align:center;
}
.mm3-buttons {
    height:47px;
    background-color:#0060ff;
    border:1px solid #0060ff;
    border-radius:6px;
    color:#ffffff;
    cursor:pointer;
    font-family:'Malgun Gothic', '맑은 고딕';
    font-size:17px;
    font-weight:bold;
    letter-spacing:-0.6px;
    margin:0 10px;
    padding:9px 37px 0 37px;
    text-align:center;
}
.mm3-buttons.white {
    background-color:#ffffff;
    border:1px solid #0060ff;
    color:#0060ff;
}
.mm3-buttons.gray {
    background-color:#444444;
    border:1px solid #444444;
    color:#ffffff;
}
/* 등록 완료 안내 */
.good-bye {
    width:100%;
    height:100%;
    left:0;
    top:0;
    align-items: center;
    background-color:#ffffff;
    display:none;
    flex-direction: column;
    justify-content: center;
    position:fixed;
}
.good-bye > .icon {
    width:50px;
    height:50px;
    background-image:var(--background-image);
    margin-bottom:22px;
}
.good-bye > .title {
    color:#333333;
    font-size:23px;
    font-weight:bold;
    letter-spacing:-1.1px;
    margin-bottom:10px;
}
.good-bye > .title > span {
    color:#0052e8;
}
.good-bye > .text {
    color:#333333;
    font-size:16px;
    letter-spacing:-0.8px;
    margin-bottom:30px;
}
.good-bye > .mm3-buttons {
    width:110px;
    margin-bottom:100px;
}