@charset "utf-8";
@import url('./normalize.css');
@import url('https://css.mirae-n.com/miraen_fonts/font/noto/fonts.css');
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;700&family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=Poltawski+Nowy:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap');
/*@import url('./num_font/fonts.css');*/

body, html { height:100%; background:#F1F5F5; }

body { font-family:'Noto Sans KR', sans-serif; font-size:20px; font-weight:400; color:#000; line-height:1.0; letter-spacing:-1px; }
body * { font-family:'Noto Sans KR', sans-serif; font-size:20px; font-weight:400; color:#000; } 
.inner { margin:0 auto; }
.posi { position:relative; }
.over_hid { overflow:hidden; }
.hidden { display:none; }

img { display:inline-block; }
a:focus { outline:none; }
.num { font-family: 'Outfit', sans-serif; color:#000; }
.btn_top { z-index:-1; opacity:0; position:fixed; bottom:30px; right:15px; width:56px; height:56px; line-height:70px; font-size:14px; text-align:center; border-radius:10px; color:#fff; font-weight:500; background:#02A39F url('../images/common/btn_top.svg') center 10px no-repeat; transition:all 0.5s ease-out; }
.btn_top.on { z-index:6; opacity:1; }

/* align */
.txt_left { text-align:left !important; }
.txt_center { text-align:center !important; }
.txt_right { text-align:right !important; }

/* *********************************
	layout
********************************* */
/* common */
.btn_close { z-index:11; position:absolute; top:10px; right:20px; }
.btn_close img { width:30px; height:30px; }

/* ********* content ********* */
.con_wrap { margin:0 auto; max-width:600px; height:auto; min-height:100vh; padding-bottom:65px; background:#F1F5F5; box-sizing:border-box; } 
.con_wrap.pd_fot { padding-bottom:215px; }

.header { position:relative; text-align:center; background:#7C8888; }
.header .logo { height:50px; line-height:50px; background:#fff; }
.header .logo img { width:auto; height:20px; } /* 24.02.14 수정 */

.header.fixed { padding-top:50px; }
.header.fixed .logo { z-index:5; position:fixed; top:0px; width:600px; padding:0 25px; background:#fff; text-align:left; box-sizing:border-box; box-shadow:0px -4px 10px 7px rgba(0,0,0,0.18); transition:all 0.3s ease-out;} /* 24.02.14 수정 */
.header.fixed .bok_info { z-index:6; position:fixed; top:13px; left:50%; /* right:25px; */ padding:0 25px 0 130px; padding-right:25px !important; min-height:auto; width:600px; text-align:right; box-sizing:border-box; transform:translateX(-50%); } /* 25.05.24 수정 */
.header.fixed .bok_info .class { line-height:1.0; border:1px solid #9DABAA; color:#9DABAA; }
.header.fixed .bok_info .tit { display:inline-block; margin:-2px 0 0 5px; padding-right:1px; font-size:0.75em; color:#4A4F57; letter-spacing:-1px; max-width:80%; vertical-align:middle; /* 25.05.24 수정 */
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    word-break: break-all;
}
.header.fixed .bok_info .writer { display:none; }


.main_textbok { position:relative; margin:0 auto; padding:25px 25px 15px 25px; max-width:495px; text-align:left; min-height:265px; box-sizing:border-box; }
/* S : 24.02.19 책이 없을 시 no_bok 클래스 제어 */
.main_textbok.no_bok { min-height:auto; }
.main_textbok.no_bok .bok_info { min-height:auto; padding-right:0px; padding-bottom:50px; } /* 24.05 수정 */
.main_textbok.no_bok .btn_group { margin-top:0px; }
/* E : 24.02.19 책이 없을 시 no_bok 클래스 제어 */
    .main_textbok .img_area { position:absolute; top:25px; right:25px; display:inline-block; width:140px; height:202px; /* background:#fff url('../images/content/no_bok.svg') center no-repeat; border-radius:3px; */ } /* 24.02.14 수정 */
    /* .main_textbok .img_area:before { content:""; z-index:2; position:absolute; top:-23px; left:-22px; display:inline-block; width:201px; height:265px; background:url('../images/content/bg_bok.png') no-repeat; background-size:100% auto; mix-blend-mode:multiply;} 24.02.14 수정  */
    .main_textbok .img_area img { overflow:hidden; position:absolute; left:0px; top:50%; width:140px; height:auto; border-radius:3px; transform:translateY(-50%); box-shadow:9px 7px 19px 0px rgba(0, 0, 0, 0.3); } /* 24.02.14 수정 */
    .main_textbok .bok_info { padding-right:175px; min-height:152px; }
        .bok_info .class { padding:0px 4px 1px; font-size:0.75em; color:#d8d8d8; border-radius:3px; border:1px solid #d8d8d8; box-sizing:border-box; }
        .bok_info .tit { margin-top:15px; padding-bottom:2px; font-size:1.75em; color:#fff; font-weight:500; line-height:1.2; word-break:keep-all; letter-spacing:-2px; /* 24.06.13 padding 추가 */
            text-overflow: ellipsis;
            overflow: hidden;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
        }
        .bok_info .writer { position:relative; display:block; margin-top:15px; font-size:0.88em; color:#bec4c4; } /* 24.02.14 수정 */
        .bok_info .writer em { position:absolute; bottom:0px; display:inline-block; margin-left:10px; padding-left:10px; width:80%; font-size:1.0em; color:#fff;  /* 24.02.14 수정 */
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            word-break: break-all;
        }
        .bok_info .writer em:before { content:""; position:absolute; top:3px; left:0px; display:inline-block; width:1px; height:15px; background:#bec4c4; }

    .main_textbok .btn_group { margin:70px 0 7px; }
                .col1 a { width:100%; }
                .col2 a { width:49%; }
                .col2 a:last-child { float:right; }
        .btn_group a { display:inline-block; padding:12px 0; color:#7C8888; font-weight:500; text-align:center; background:#fff; border-radius:5px; }
        .btn_group a:after { content:""; position:relative; top:-1px; display:inline-block; margin-left:7px; width:9px; height:14px; background:url('../images/content/btn_go.svg') no-repeat; background-size:100% auto; }
        .btn_group a span { display:inline-block; width:80%; color:#7C8888; font-weight:500;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            word-break: break-all;
        }
        
    .container ul { display:none; }

    /* 1depth */
    .container ul + h1,
    .container h1 + h1 { margin-top:7px; }
    .container h1 a,
    .container h2 a,
    .container h3 a { position:relative; display:block; line-height:1.2; word-break:keep-all; }
        .container h1 a { padding:15px 55px 15px 25px; font-size:1.12em; background:#fff; }
            .container h1.on a { background:#DDE7E8; }
        .container h1 a:after { content:""; position:absolute; right:25px; top:50%; display:inline-block; width:23px; height:23px; transform:translateY(-50%) rotate(0deg); background:url('../images/content/arrow_off.svg') center 60% no-repeat; border:1px solid #BBCDCC; border-radius:100%; box-sizing:border-box; transition:all 0.3s ease-out; }
        .container h1 a .num { margin-left:-20px; padding-right:8px; font-size:1.0em; }
        .container h1 a .num:after { content:"."; }
    .container h1.on a:after,
    .container h2.on a:after,
    .container h3.on a:after { background:#B6DBD7 url('../images/content/arrow_on.svg') center 52% no-repeat; border:0px; transform:translateY(-50%) rotate(-360deg); transition:all 0.3s ease-out; }
    /* 2depth */
    .container h2 a,
    .container h3 a { margin:-1px -25px; border:1px solid #D7E3E2; border-width:1px 0; }
    .container h2 a { padding:15px 55px 15px 25px; }
    .container h3 a { padding:15px 55px 15px 45px; }
    .container h2.on a { background:#EBF2F2; border:0px; }
        .container h2 a:after,
        .container h3 a:after { content:""; position:absolute; right:25px; top:50%; display:inline-block; width:23px; height:23px; transform:translateY(-50%) rotate(0deg); background:url('../images/content/arrow_off.svg') center 60% no-repeat; border:1px solid #BBCDCC; border-radius:100%; box-sizing:border-box; transition:all 0.3s ease-out; }
    .container h2 + ul { margin-left:-25px; margin-right:-25px; }
    .container h3 + ul { margin-left:0px; margin-right:-25px; }
    .container h2 .num { display:inline-block; margin:0 8px 0 -33px; width:23px; height:23px; line-height:22px; text-indent:-1px; text-align:center; border:1px solid #000; border-radius:100%; }
    /* 3depth */
    .container h3.on a { background:#F5F5F5; border:0px; }
    .container h3 .num { display:inline-block; margin:0 8px 0 -27px; width:18px; height:18px; line-height:17px; letter-spacing:0; text-align:center;  }
    .container h3 .num:before { content:"("; }
    .container h3 .num:after { content:")"; }

    /* content list */
    .container ul { margin-top:-20px; padding:20px 25px 0; background:#fff; }
    .container li { border-top:1px solid #DDE6E5; }
    .container li:first-child { border-top:0px; }
    .container li > a { position:relative; display:block; padding:20px 0 20px 140px; width:100%; min-height:70px; line-height:68px; box-sizing:border-box; }
        .container .sum_img { overflow:hidden; position:absolute; top:18px; left:0px; width:125px; height:70px; border:1px solid #DDE6E5; box-sizing:border-box; }
        .container .sum_img img { position:relative; top:50%; left:50%; width:auto; height:70px; transform:translate(-50%, -50%); }
        .container .sum_img:before { content:""; z-index:2; position:absolute; top:0px; left:0px; display:inline-block; width:25px; height:25px; background:#DDE6E5; border-radius:0 0 5px 0; }
            .sum_img.video:before { background:#DDE6E5 url('../images/content/ico_video.svg') center no-repeat; }
            .sum_img.audio:before { background:#DDE6E5 url('../images/content/ico_sound.svg') center no-repeat; }
            .sum_img.control:before { background:#DDE6E5 url('../images/content/ico_play.svg') center no-repeat; }
            .sum_img.reference:before { background:#DDE6E5 url('../images/content/ico_txt.svg') center no-repeat; }
            .sum_img.question:before { background:#DDE6E5 url('../images/content/ico_con.svg') center no-repeat; }
            .sum_img.default:before {  width:0px; height:0px;  }
        .container div { display:inline-block; margin-top:-5px; font-size:0.87em; color:#1A1A1A; line-height:1.2; vertical-align:middle;         
			/*
			min-height:65px; 
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-line-clamp: 4;
			-webkit-box-orient: vertical;
			*/
			}
        .container div * { display:inline-block; font-size:1.0em; color:#1A1A1A; word-break:keep-all; }        
        .container div span,
        .container div em { position:relative; margin-right:4px; padding-right:8px; }
        .container div p { display:inline;  /*margin-top:5px;*/ }
        .container div span:before,
        .container div em:before { content:""; position:absolute; top:50%; display:inline-block; width:1px; height:15px; background:#1A1A1A; transform:translateY(-45%); }
        .container div em:before { width:0.5px; }
        .container div span:before,
        .container div em:before { right:0px; }
       /*  .container div em:before { left:0px; } */

.container .ready_con { transform:translate(-50%, 0%); }

.footer { position:relative; bottom:25px; margin:0 auto; width:100%; max-width:600px; transform:translateY(-100%); } 
.footer a { display:block; width:100%; font-size:12px; color:#838383; text-align:center; outline:none; -webkit-tap-highlight-color: transparent; }
.footer a:after { content:""; margin-left:5px; display:inline-block; width:11px; height:8px; background:url('../images/common/fot_off.svg') no-repeat; transform:rotate(0deg); transition:all 0.3s ease-in-out;}
    .footer.on a:after { transform:rotate(-180deg); }
.footer > div { display:none; position:relative; margin-top:20px; padding:20px 25px 10px 25px; }
.footer > div:before { content:""; position:absolute; top:0px; left:50%; width:calc(100% - 50px); height:1px; background:#D2D2D2; transform:translateX(-50%); }
.footer p { margin-top:10px; }
.footer p:first-child { margin-top:0px; }
.footer p,
.footer p strong { font-size:12px; color:#838383; }
.footer p strong { position:relative; display:inline-block; margin-left:10px; padding-left:10px; }
.footer p strong:before { content:""; position:absolute; top:2px; left:0px; display:inline-block; width:1px; height:9px; background:#D2D2D2; }

/* none.html */
.ready_con { position:absolute; top:50%; left:50%; padding-top:170px; min-width:100%; text-align:center; background:url('../images/common/no_con.png') center top no-repeat; background-size:160px auto; transform:translate(-50%, -50%); }
.ready_con strong { display:block; margin-bottom:13px; font-size:1.25em; font-weight:500; }

/* ********* viewers ********* */
.viewer_wrap { overflow:hidden; position:relative; width:100vw; height:100vh; background:#414141; }
.viewer_wrap .tit_area { z-index:3; position:absolute; top:0px; left:0px; padding:0 45px 0 20px; width:100%; height:50px; background:rgba(0, 0, 0, 0.5); box-sizing:border-box; }
    .tit_area * { line-height:1.0; }
    .tit_area p { position:relative; top:50%; padding:3px 0 3px 32px; transform:translateY(-50%); background-size:auto 80% !important; }
        /* viewer icon */
        .tit_area p.video { background:url('../images/viewer/ico_video.svg') left center no-repeat; }
        .tit_area p.img { background:url('../images/viewer/ico_img.svg') left center no-repeat; }
        .tit_area p.con { background:url('../images/viewer/ico_con.svg') left center no-repeat; }
    .tit_area p span,
    .tit_area p em { font-size:0.87em; font-weight:500; color:#fff; }
    .tit_area p span { display:inline-block; max-width:80%; 
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        word-break: break-all;
    }
    .tit_area p em { position:relative; margin-left:7px; display:inline-block; }
    .tit_area p em:before { content:""; margin-right:7px; display:inline-block; width:1px; height:13px; background:#fff; }

.viewer_wrap .viewer_con { position:absolute; top:50%; left:50%; width:100%; height:auto; transform:translate(-50%, -50%); text-align:center; }
.viewer_wrap .viewer_con > * { width:100%; max-width:1600px; height:auto; }

/* video */
.viewer_wrap .viewer_con .btn_play { position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); width:86px; height:86px; }
.viewer_wrap .viewer_con .btn_play img { display:inline-block; width:100%; height:auto; }

/* img numbering */
.viewer_wrap .paging { position:absolute; left:0px; bottom:15px; width:100%; text-align:center; }
    .paging a { display:inline-block; width:8px; height:8px; background:#fff; opacity:0.3; border-radius:100%; }
    .paging a + a { margin-left:5px; }
        .paging a.current { opacity:1; }
    .paging a span { display:none; }

/* img zoom, paging control */
.viewer_wrap .control_area { position:absolute; left:0px; bottom:10px; width:100%; text-align:center; }
    .control_area .zoom_group,
    .control_area .paging_group { position:relative; display:inline-block; max-width:160px; width:48%; min-width:14ㅌ₩0px; height:45px; line-height:45px; border-radius:30px; background:rgba(0, 0, 0, 0.5); }
    .control_area .paging_group { margin-left:5px; }
    .control_area button { position:absolute; top:50%; display:inline-block; width:36px; height:36px; text-align:center; background:#fff; border-radius:100%; transform:translateY(-50%); }
        .control_area button:first-child { left:5px; }
        .control_area button:last-child { right:5px; }
        .control_area button img { position:absolute; top:50%; left:50%; display:inline-block; transform:translate(-50%, -50%); }
        .control_area button.disabled { opacity:0.3; cursor:auto; }
    .control_area .zoom_group span,
    .control_area .paging_group span strong { color:#fff; }
    .control_area .paging_group span { color:#C5C5C5; }
    
    .paper { transform:translate(-50%, -25%) !important; }

    
    /* mobile.ver */
    @media (max-width:1000px) {
    
        /* common */
        body,
        body * { font-size:16px; }
        
        /* content */
        .header .logo { height:35px; line-height:35px; }
        .header .logo img { height:16px; }  /* 24.02.14 수정 */

        .header.fixed .bok_info { top:7px; }
        .header.fixed .bok_info .tit { margin:0px; }

        .main_textbok { padding:25px 25px 15px 25px; max-width:400px; min-height:180px; }
            .main_textbok .img_area { width:91px; height:132px; border-radius:2px; }
            .main_textbok .img_area:before { top:-14px; left:-14px; width:130px; height:173px; }
            .main_textbok .img_area img { width:91px; height:auto; border-radius:2px; } /* 24.02.14 수정 */
            .main_textbok .bok_info { padding-right:115px; min-height:112px; }
                .bok_info .tit { margin-top:7px; }
                .bok_info .writer { margin-top:7px; }
                .bok_info .writer em { margin-left:5px; padding-left:5px; width:75%; }
                .bok_info .writer em:before { top:3px; height:10px; }
                .bok_info .btn_group { margin-right:-110px; }
        .main_textbok .btn_group { margin:35px 0 0; }
            .btn_group a { padding:10px 0; }
            .btn_group a:after { top:0px; margin-left:5px; width:7px; height:12px; }

        .container ul + h1,
        .container h1 + h1 { margin-top:5px; }
        .container h1 a,
        .container h2 a { padding-top:13px; padding-bottom:13px; }
        .container h3 a { padding-top:15px; padding-bottom:15px; padding-left:40px; }
        .container h3 + ul { margin-left:-10px; }

        .container li > a { padding-left:110px;min-height:60px; line-height:60px; }
        .container .sum_img { width:105px; height:60px; }
        .container .sum_img img { height:60px; }
        
        .container .ready_con { transform:translate(-50%, -20%); }

        /* viewr */
        @media (orientation: portrait) {
            .viewer_wrap .viewer_con > * { width:100vw; height:auto; }
        }
        @media (orientation: landscape) {
            .viewer_wrap .viewer_con > * { width:auto; height:83vh; }
            .container .ready_con { margin:50px 0; position:relative; top:0px; transform:translateX(-50%); }
        }
    
    }
    
    @media (max-height:700px) {
    	  .container .ready_con { margin:50px 0; position:relative; top:0px; transform:translateX(-50%); }
    }
    /* S : 24.02.14 추가 */
    @media (max-height:600px) {
        .header.fixed .logo { width:100%; }
        .header.fixed .bok_info { right:0px; width:100%; padding-left:100px; }
    }
    /* E : 24.02.14 추가 */
    
    /* S : 24.05.24 추가 */
    @media (max-width:600px) {
        .header.fixed .bok_info { right:0px; width:100%; padding-left:100px; }
    }
    /* E : 24.05.24 추가 */  

    @media (max-width:850px) { 
        
        /* content */
        .btn_close { top:5px; right:10px; }
        .btn_close img { width:24px; height:24px; }

        /* viewr */
        .viewer_wrap .tit_area { height:35px; }
        .tit_area p { padding-left:23px; background-size:auto 70% !important; }
        .tit_area p em  { margin-left:5px; }
        .tit_area p em:before { margin-right:5px; height:10px; }

        .paper { transform:translate(-50%, -50%) !important; }
    }