/*
2025-03-11  LEE

인덱스 페이지 스타일





*/



/* 페이지 타이틀 영역 START ----------------------------------------------------------------------- */
.flo-page-title {
    height:257px;
    background-color:#ffffff;
}
.flo-page-title > .center-line {
    background-image:var(--bg-page-title);
    background-repeat:no-repeat;
    background-position: center center;
}
/* 페이지 타이틀 영역 END ------------------------------------------------------------------------- */



/* 공지사항 영역 START ---------------------------------------------------------------------------- */
.flo-notice {
    height:59px;
    background-color:#ffffff;
    border-top:1px solid #e8e8e8;
}
.flo-notice > .center-line {
    display:flex;
    justify-content: flex-start;
    align-items: center;
}
.flo-notice > .center-line > .notice {
    flex-shrink: 0;
    width: 180px;
    padding:5px 0 5px 40px;
    font-size:15px;
    font-weight:bold;
    background-image:var(--icon-notice);
    background-repeat:no-repeat;
    background-position:left center;
}
.flo-notice > .center-line > .contents {
    flex-grow: 1;
}
.flo-notice > .center-line > .date {
    flex-shrink: 0;
    width: 100px;
    text-align:right;
}
/* 공지사항 영역 END ------------------------------------------------------------------------------ */



/* 본문 영역 START -------------------------------------------------------------------------------- */
.flo-body {
    height:1001px;
    background-color:#f4f4f4;
}
.flo-body > .center-line {
    background-color:#f4f4f4;
    border-top:1px solid #e8e8e8;
    padding-top:102px;
}
/* 타입 메뉴 */
.flo-body > .center-line > .menu {
    display:flex;
    justify-content: space-evenly;
    padding:0 60px;
}
/* 타입 메뉴 - 기본 */
.flo-body > .center-line > .menu > div {
    height:45px;
    font-size:17px;
    font-weight:bold;
    cursor:pointer;
    transition: background-color 0.5s, color 0.5s; 
    padding:0 50px;
    border:2px solid transparent;
    border-radius:6px;
    display:flex;
    justify-content: center;
    align-items: center;
}
/* 타입 메뉴 - 선택 */
.flo-body > .center-line > .menu > div.selected {
    border:2px solid var(--main-color);
    border-radius:6px;
    background-color:#ffffff;
    color:var(--main-color);
    cursor:default;
}
/* 타입 이미지 */
.flo-body > .center-line > .images {
    padding-top:45px;
    display:flex;
    justify-content: space-between;
}
.flo-body > .center-line > .images > div {
    width:252px;
    height:345px;
    overflow:hidden;
    border-radius:17px;
    border:1px solid #e6e6e6;
}
.flo-body > .center-line > .images > div > div {
    transition: background-image 0.5s;
    cursor:pointer;
    background-size: cover;
    background-position:center top;
}

/* 본문 영역 END ---------------------------------------------------------------------------------- */



/* 본문 하단 링크 영역 START ---------------------------------------------------------------------- */
.flo-page-link {
    height:425px;
    background-color:#ffffff;
}
.flo-page-link > .center-line {
    background-image:var(--page-link);
    background-repeat:no-repeat;
    background-position:left center;
    padding-bottom:90px;
    display:flex;
    align-items: flex-end;
    justify-content: flex-start;
}
.flo-page-link > .center-line > a {
    height:140px;
    display:block;
}

/* 뉴스레터 빌더 */
.flo-page-link > .center-line > a:nth-child(1) {
    width:104px;
    margin-right:36px;
}
/* 분석과 통계 */
.flo-page-link > .center-line > a:nth-child(2) {
    width:88px;
    margin-right:40px;
}
/* 대량메일 발송 */
.flo-page-link > .center-line > a:nth-child(3) {
    width:112px;
    margin-right:37px;
}
/* 확장 마케팅 도구 */
.flo-page-link > .center-line > a:nth-child(4) {
    width:125px;
    margin-right:45px;
}
/* 문자 뉴스레터 */
.flo-page-link > .center-line > a:nth-child(5) {
    width:103px;
    margin-right:33px;
}
/* Only 오즈메일러 */
.flo-page-link > .center-line > a:nth-child(6) {
    width:127px;
    margin-right:40px;
}
/* 대행/제작 */
.flo-page-link > .center-line > a:nth-child(7) {
    width:77px;
    margin-right:45px;
}
/* NGO */
.flo-page-link > .center-line > a:nth-child(8) {
    width:87px;
}
/* 본문 하단 링크 영역 END ------------------------------------------------------------------------ */



/* 템플릿 활용 보기 영역 START -------------------------------------------------------------------- */
#OZ-TV-viewer {
    top:0;
    left:0;
    width:100%;
    height:100%;
    position:fixed;
    z-index:15;
    overflow:auto;
    padding-bottom:100px;
    display:none;
    transition: opacity 0.3s;
    opacity:0;
}
/* 닫기 버튼 영역 */
#OZ-TV-viewer > .close {
    width:1096px;
    height:120px;
    margin:auto;
    padding-bottom:25px;
    padding-right:25px;
    position: sticky;
    top:0;
    display:flex;
    justify-content: flex-end;
    align-items: flex-end;
}
/* 닫기 버튼 */
#OZ-TV-viewer > .close > .close-button {
    width:68px;
    height:69px;
    border-radius:50%;
    cursor:pointer;
    background-image:var(--close-x-38);
    background-color:rgba(30,30,30,0.3);
}
/* 본문 영역 */
#OZ-TV-viewer > .body {
    width:1096px;
    height:3033px;
    margin:auto;
    border-radius:40px;
    background-color:#ffffff;
    padding-top:95px;
}
/* 나만의 뉴스레터를 만들어 보세요 */
#OZ-TV-viewer > .body > .title {
    text-align:center;
    font-size:44px;
    color:#333333;
    margin-bottom:6px;
    font-weight:bold;
}
/* 초보자도 전문가처럼 템플릿을 사용하... */
#OZ-TV-viewer > .body > .comment {
    text-align:center;
    font-size:24px;
    color:#666666;
    margin-bottom:54px;
}
/* 템플릿 미리보기 이미지 */
#OZ-TV-viewer > .body > .image {
    width:530px;
    height:1100px;
    background-color:#e3e3e3;
    margin:auto;
    margin-bottom:32px;
}
/* 템플릿 설명 영역 */
#OZ-TV-viewer > .body > .info {
    width:530px;
    height:152px;
    background-color:#f8f8fb;
    margin:auto;
    border-radius:12px;
    padding-left:70px;
    display:flex;
    flex-wrap: wrap;
    align-content: flex-start;
    padding-top:16px;
    margin-bottom:25px;
}
/* 템플릿 설명 영역 - 타입, 활용, 난이도 */
#OZ-TV-viewer > .body > .info > div:nth-child(odd) {
    width: 80px;
    font-size:17px;
    font-weight:bold;
    color:#333333;
    padding-top:12px;
}
/* 템플릿 설명 영역 - 타입, 활용, 난이도 설명 */
#OZ-TV-viewer > .body > .info > div:nth-child(even) {
    width: 360px;
    font-size:17px;
    color:#333333;
    padding-top:12px;
}
/* 버튼 - 이 템플릿으로 편집해보기 */
#OZ-TV-viewer > .body > .button {
    width:530px;
    height:70px;
    background-color:#1d61e2;
    margin:auto;
    font-size:21px;
    font-weight:bold;
    color:#ffffff;
    border-radius:8px;
    background-image:var(--icon-edit);
    background-position:120px center;
    padding-left:20px;
    cursor:pointer;
    display:flex;
    justify-content: center;
    align-items: center;
}
/* 고객 활용 사례 영역 */
#OZ-TV-viewer > .body > .use-cases {
    margin-top:103px;
    height:1305px;
    background-color:#f7fafc;
    border-radius:0 0 40px 40px;
}
/* 고객 활용 사례 */
#OZ-TV-viewer > .body > .use-cases > .title {
    color:#333333;
    font-size:45px;
    font-weight:bold;
    text-align:center;
    padding:90px 0 74px 0;
}
/* 고객 활용 사례 - 예시 템플릿 영역 */
#OZ-TV-viewer > .body > .use-cases > .example {
    padding:0 0 62px 105px;
    display:flex;
}
/* 고객 활용 사례 - 예시 템플릿 이미지 */
#OZ-TV-viewer > .body > .use-cases > .example > .left {
    width:320px;
    height:460px;
    background-color:#e6e6e6;
}
/* 고객 활용 사례 - 설명 영역 */
#OZ-TV-viewer > .body > .use-cases > .example > .right {
    width:520px;
    height:460px;
    padding:0 0 0 48px;
}
/* 회사명 */
#OZ-TV-viewer > .body > .use-cases > .example > .right > .title {
    font-size:29px;
    font-weight:bold;
}
/* URL */
#OZ-TV-viewer > .body > .use-cases > .example > .right > .url {
    font-size:22px;
    padding-bottom:31px;
}
/* 설명 1 */
#OZ-TV-viewer > .body > .use-cases > .example > .right > .text-1 {
    height:174px;
    font-size:19px;
    color:#807f7f;
}
/* 설명 2 */
#OZ-TV-viewer > .body > .use-cases > .example > .right > .text-2 {
    height:98px;
    color:#666666;
    font-size:19px;
    font-weight:bold;
}
/* 버튼 - 같은 템플릿으로 편집해보기 */
#OZ-TV-viewer > .body > .use-cases > .example > .right > .button {
    width:320px;
    height:46px;
    color:#ffffff;
    font-size:17px;
    font-weight:bold;
    background-color:#666666;
    cursor:pointer;
    border-radius:5px;
    display:flex;
    justify-content: center;
    align-items: center;
}
/* 템플릿 활용 보기 영역 END ---------------------------------------------------------------------- */



/* 공지사항 팝업 START ---------------------------------------------------------------------------- */
#OZ-notice-viewer {
    top:0;
    left:0;
    width:100%;
    height:100%;
    position:fixed;
    z-index:15;

    overflow:auto;
    padding:30px 0;
}
#OZ-notice-viewer > div {
    width:760px;
    background-color:#ffffff;
    margin:auto;
}
/* 공지사항 텍스트와 닫기 버튼 영역 */
#OZ-notice-viewer > div > .header {
    height:80px;
    display:flex;
    align-items: center;
    justify-content: space-between;
}
/* 닫기버튼과 동일하게 좌측에 여백 */
#OZ-notice-viewer > div > .header > .space {
    width:40px;
    height:40px;
}
/* 공지사항 텍스트 */
#OZ-notice-viewer > div > .header > .text {
    font-size:20px;
    font-weight:bold;
}
/* 닫기 버튼 */
#OZ-notice-viewer > div > .header > .close {
    width:40px;
    height:40px;
    background-image:var(--icon-arrow-right);
    margin-bottom:30px;
    margin-right:5px;
    cursor:pointer;
}
/* 공지사항 내용 보기 영역 START .............................................. */
/* 제목과 날짜 영역 */
#OZ-notice-viewer > .notice > .title {
    width:662px;
    height:76px;
    border-top:2px solid #3d4144;
    margin:auto;
    display:flex;
    align-items: center;
    justify-content: space-between;
}
/* 제목 */
#OZ-notice-viewer > .notice > .title > .title {
    font-size:18px;
    font-weight:bold;
}
/* 날짜 */
#OZ-notice-viewer > .notice > .title > .date {
    font-size:16px;
    font-weight:bold;
}
/* 이미지 */
#OZ-notice-viewer > .notice > .main_image {
    display:block;
    margin:auto;
}
/* 내용 영역 */
#OZ-notice-viewer > .notice > .body {
    width:662px;
    padding:20px 0 50px 0;
    margin:auto;
    font-size:16px;
    font-weight:bold;
    line-height:1.6;
}
/* 버튼 영역 */
#OZ-notice-viewer > .notice > .button {
    width:662px;
    height:40;
    margin:auto;
    overflow:hidden;
    padding-bottom:30px;
}
/* 버튼 */
#OZ-notice-viewer > .notice > .button > div {
    width:86px;
    height:40px;
    line-height:38px;
    border-radius:4px;
    font-size:15px;
    font-weight:bold;
    text-align:center;
}
/* 버튼 - 목록으로 */
#OZ-notice-viewer > .notice > .button > div.left {
    background-color:#298eff;
    border:1px solid #298eff;
    color:#ffffff;
    font-size:16px;
    cursor:pointer;
    float:left;
}
/* 버튼 - 이전글, 다음글 */
#OZ-notice-viewer > .notice > .button > div.right {
    border:1px solid #5b6976;
    margin-left:10px;
    cursor:pointer;
    float:right;
}
/* 버튼 - disabed */
#OZ-notice-viewer > .notice > .button > div.right.disabled {
    color:#b9c0c7;
    cursor:default;
}
/* 공지사항 내용 보기 영역 END ................................................ */



/* 공지사항 리스트 보기 영역 START ............................................ */
#OZ-notice-viewer > .list {
    width:760px;
    background-color:#ffffff;
    margin:auto;
    border-bottom:1px solid #cccccc;
}
#OZ-notice-viewer > .list > .title {
    width:662px;
    height:46px;
    line-height:44px;
    margin:auto;
    font-size:14px;
    font-weight:bold;
    background-color:#f2f2f2;
    border-top:2px solid #3d4144;
    border-bottom:1px solid #cccccc;
    display:flex;
}
#OZ-notice-viewer > .list > .title > div:nth-child(1) {
    width:48px;
    text-align:right;
}
#OZ-notice-viewer > .list > .title > div:nth-child(2) {
    width:525px;
    padding-left:47px;
}
#OZ-notice-viewer > .list > .title > div:nth-child(3) {
    padding-left:15px;
}
#OZ-notice-viewer > .list > .body > div {
    width:662px;
    height:45px;
    line-height:44px;
    margin:auto;
    font-size:14px;
    font-weight:bold;
    border-bottom:1px solid #cccccc;
    display:flex;
}
#OZ-notice-viewer > .list > .body > div > div:nth-child(1) {
    width:48px;
    color:#6d6d6d;
    text-align:right;
}
#OZ-notice-viewer > .list > .body > div > div:nth-child(2) {
    width:525px;
    padding-left:47px;
}
#OZ-notice-viewer > .list > .body > div > div:nth-child(3) {
    color:#6d6d6d;
}

/* 공지사항 리스트 보기 영역 END .............................................. */



/* 공지사항 페이징 영역 START ................................................. */
/* width와 좌우 마진 크기는 자바스크립트(JNP_SIZE_CUBE)에서 사용된다. */
.JNP-paging-contents {
    --jnp-cube-height : 37px;
    --jnp-cube-margin : 4px;
}
/* 좌/우 버튼 이미지 */
.JNP-paging-rec {
    --jnp_left_arrow_white  : var(--jnp-left-arrow-white);
    --jnp_left_arrow_gray   : var(--jnp-left-arrow-gray);
    --jnp_right_arrow_white : var(--jnp-right-arrow-white);
    --jnp_right_arrow_gray  : var(--jnp-right-arrow-gray);
}
/* [하단 페이징] */
.JNP-frame-paging { box-sizing:border-box; display:flex; justify-content:center; padding:16px 0 57px 0; }
.JNP-frame-paging * { box-sizing:border-box; font-size:16px; font-family:"맑은 고딕"; }
/* [하단 페이징] - left 버튼 */
.JNP-frame-paging > .JNP-paging-left > .JNP-paging-rec { margin-right:4px; }
.JNP-frame-paging > .JNP-paging-left > .JNP-paging-rec.JNP-off { background-image:var(--jnp_left_arrow_white); border:1px solid #d5d5d5; background-color:#e5e5e5; cursor:default; }
.JNP-frame-paging > .JNP-paging-left > .JNP-paging-rec.JNP-on { background-image:var(--jnp_left_arrow_gray); }
.JNP-frame-paging > .JNP-paging-left > .JNP-paging-rec.JNP-on:hover { background-image:var(--jnp_left_arrow_white); }
/* [하단 페이징] - right 버튼 */
.JNP-frame-paging > .JNP-paging-right > .JNP-paging-rec { margin-left:4px; }
.JNP-frame-paging > .JNP-paging-right > .JNP-paging-rec.JNP-off { background-image:var(--jnp_right_arrow_white); border:1px solid #d5d5d5; background-color:#e5e5e5; cursor:default; }
.JNP-frame-paging > .JNP-paging-right > .JNP-paging-rec.JNP-on { background-image:var(--jnp_right_arrow_gray); }
.JNP-frame-paging > .JNP-paging-right > .JNP-paging-rec.JNP-on:hover { background-image:var(--jnp_right_arrow_white); }
/* [하단 페이징] - 페이지 숫자 */
.JNP-frame-paging > .JNP-paging-rail { height:37px; overflow:hidden; }
.JNP-frame-paging > .JNP-paging-rail > .JNP-paging-contents { position:relative; display:flex; }
.JNP-frame-paging > .JNP-paging-rail > .JNP-paging-contents > div > div { width:37px; height:var(--jnp-cube-height); margin-left:var(--jnp-cube-margin); margin-right:var(--jnp-cube-margin); }
.JNP-frame-paging > .JNP-paging-rail > .JNP-paging-contents > div > div.JNP-selected { color:#ffffff; background-color:#272e35; cursor:default; }
.JNP-frame-paging .JNP-paging-rec { width:37px; height:37px; line-height:35px; text-align:center; font-size:16px; font-family:"맑은 고딕"; background-position:center center; background-repeat:no-repeat; }
.JNP-frame-paging .JNP-paging-rec.JNP-on { border:1px solid #e5e5e5; color:#2b2b2b; background-color:#ffffff; cursor:pointer; }
.JNP-frame-paging .JNP-paging-rec.JNP-on:hover { color:#ffffff; background-color:#272e35; }
/* 공지사항 페이징 영역 EnD ................................................... */
/* 공지사항 팝업 END ------------------------------------------------------------------------------ */