@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;500&display=swap');

html, body, div, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, span, blockquote, pre,
abbr, acronym, address, big, cite, code, del, dfn, img, ins, kbd, q, s, samp,
small, strike, sub, sup, tt, var, a,b, center, dl, dt, dd, ol, ul, li,
fieldset, form, legend, table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary, time, mark, audio, video ,button, textarea, input, 
label, select, option{
	margin:0; padding:0; border:0; vertical-align:top; line-height:1.6em; box-sizing:border-box; border-width:0px;
    border-style:initial; border-color:initial; border-image:initial; outline:0px;
    font-size:19px; color:var(--color-black); font-family:'Montserrat','NanumSquareNeo-Variable','Noto Sans KR',sans-serif; letter-spacing:0.02em; word-break:keep-all
}
html{-webkit-text-size-adjust:100%}
a{text-decoration:none; cursor:pointer}
a:hover{text-decoration:none;}
input, button, select{background:none; outline:none; border:none; cursor:pointer}
button {cursor:pointer}
em,i{font-style:normal}
em{font-weight:bold}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {display:block}
body {line-height:1;}
ol, ul {list-style:none;}
blockquote, q {quotes:none;}
blockquote:before, blockquote:after,
q:before, q:after {content:''; content:none}
table {border-spacing:0; border-collapse:collapse} 
caption{display:none}
input[type=radio]{margin-top:-1px}
input[type=checkbox]{margin-top:-1px}
input[type="text"], textarea{width:100%; padding:10px 15px; overflow-y:auto; resize:none; border:1px solid var(--border-gray); border-radius:10px}
hr{border:none}
i{display:inline-block}
input::placeholder{color:#aaa; font-weight:normal}
input:focus::-webkit-input-placeholder, textarea:focus::-webkit-input-placeholder{color:transparent} 
input:focus:-moz-placeholder, textarea:focus:-moz-placeholder{color:transparent}
input:focus::-moz-placeholder, textarea:focus::-moz-placeholder{color:transparent}
input:focus:-ms-input-placeholder, textarea:focus:-ms-input-placeholder{color:transparent}
select{-moz-appearance:none; -webkit-appearance:none; appearance:none;}
select::-ms-expand{display:none}
label{display:inline-block; text-align:center; font-weight: normal;}
ul{font-size:0}
strong{font-weight:500}
img{image-rendering:-webkit-optimize-contrast; transform:translateZ(0); backface-visibility:hidden}

:root {
    --font-xlarge:36px;
    --font-large:28px;
    --font-medium:20px;
    --font-regular:18px;
    --font-small:16px;
    --font-micro:14px;

    --color-white:#ffffff;
    --color-blue:#0f83f1;
    --color-black:#111111;
    --color-gray:#666666;
    --color-gray2:#999999;
    --back-gray:#f3f3f3;
    --border-gray:#dddddd;
    --rgba--black:rgba(0,0,0,0.4);
}
h2, h2 *{font-size:var(--font-xlarge)}
h3, h3 *{font-size:var(--font-large)}
h4, h4 *{font-size:var(--font-medium)}

.tal{text-align:left !important}
.tar{text-align:right !important}
.tac{text-align:center !important}

.vat{vertical-align:top}
.vam{vertical-align:middle}
.vab{vertical-align:bottom}

.fl{float:left}
.fr{float:right}

.mt0{margin-top:0px !important}
.mt10{margin-top:10px !important}
.mt20{margin-top:20px !important}
.mt30{margin-top:30px !important}
.mt40{margin-top:40px !important}
.mt50{margin-top:50px !important}
.mb0{margin-bottom:0px !important}
.mb10{margin-bottom:10px !important}
.mb20{margin-bottom:20px !important}
.mb30{margin-bottom:30px !important}
.mb40{margin-bottom:40px !important}
.mb50{margin-bottom:50px !important}
.ml0{margin-left:0px !important}
.ml10{margin-left:10px !important}
.ml20{margin-left:20px !important}
.ml30{margin-left:30px !important}
.ml40{margin-left:40px !important}
.ml50{margin-left:50px !important}
 
.bold{font-weight:bold}
small{font-size:var(--font-small)}

html, body{position:relative;  height:100%}
.inner{width:100%; max-width:1200px; margin:0 auto; padding:0 20px; position:relative}
.flexbox{display:flex; justify-content:space-between; align-items:center}
.flex{display:flex !important; justify-content:space-between}
.table{display:table; table-layout:fixed; width:100%}
.table > *{display:table-cell}
.xs_block{display:none}
.xs_hidden{display:block}
.inline{display:inline}
.underline{text-decoration:underline; text-underline-offset:5px}

.contact_checkbox{position:relative; padding-left:30px; cursor:pointer; font-size:var(--font-small)}
.contact_checkbox input{display:inline-block; position:absolute; top:4px; left:0; -webkit-appearance:none; -moz-appearance:none; appearance:none; width:20px; height:20px; border:1px solid var(--border-gray); border-radius:0; background:#fff;}
.contact_checkbox input[type="checkbox"]:checked:before{content:''; position:absolute; width:11px; height:9px; background:transparent; top:3px; left:3px; border:3px solid var(--color-black); border-top:none; border-right:none;  transform:rotate(-45deg); border-radius:2px; outline:none}

.img{position:relative; overflow:hidden}
.img > *{position:absolute; top:0; left:0; width:100%}
.img56{padding-bottom:56%}
.img75{padding-bottom:75%}
.img100{padding-bottom:100%}
.radius10{border-radius:10px}
.h100{height: 100%;}
.hover img{transform:scale(1); transition:0.5s}
.hover:hover img{transform:scale(1.1)}

.bk_gray{background:var(--back-gray)}
.fc_white{color:var(--color-white)}
.fc_blue{color:var(--color-blue)}

.common_btn{border-radius:100px; background:none; color:var(--color-white) !important; background:var(--color-black); font-size:var(--font-small); overflow:hidden; display:inline-block; padding:10px 20px; min-width:90px}
.bd_white{border:1px solid var(--color-white)}
.arrow{position:relative; width:15px; height:11px; vertical-align:middle; margin-left:10px}
.arrow::before{content:''; position:absolute; width:15px; height:1px; background:var(--color-white); top:3px; right:0}
.arrow::after{content:''; border-top:1px solid var(--color-white); border-right:1px solid var(--color-white); position:absolute; top:0; right:0; width:7px; height:7px; transform:rotate(45deg) translatez(0)}
.common_btn:hover i, .hover:hover .common_btn i{animation:arrow 1s linear infinite; -ms-animation:main03 1s linear infinite}
@keyframes arrow{0% {right:0} 50% {right:-5px} 100% {right:0}}
.select{min-width:165px; height:50px; line-height:50px; border:1px solid #ddd; padding:0 10px; background:url('/layouts/njoyschool/image/select.png') no-repeat right 10px center #fff}

.header{position:fixed; top:0; left:0; width:100%; padding:20px 30px; z-index:10; transition:top 0.2s ease-in-out}
.header.fix{position:fixed; background:var(--color-white); box-shadow:2px 4px 10px rgb(0,0,0,0.05)}
.header.up{top:-86px; background:var(--color-white)}
.header.on{background:var(--color-white); border-bottom:1px solid #eee}
.header.fix .gnbList > li > a, .header.on .gnbList > li > a{color:var(--color-black)}
.gnbList > li{display:inline-block; margin:0 20px}
.gnbList a{color:var(--color-white); position:relative; font-size:var(--font-small)}
.gnbList a::before{content:''; position:absolute; bottom:-7px; left:0; right:0; height:2px; border-radius:100px; background:var(--color-blue); transform:scaleX(0); transition:0.3s all ease-out}
.gnbSub{position:absolute; top:68px; left:0; width:100%; background:var(--color-white); padding:20px; z-index:1; background:var(--color-blue); display:none}
.gnbSub ul{margin-right:30px; text-align:right}
.gnbSub li{display:inline-block; position:relative}
.gnbSub li + li{margin-left:41px; position:relative}
.gnbSub li + li::before{content:''; position:absolute; left:-21px; top:50%; transform:translateY(-50%); width:1px; height:10px; background:rgba(255,255,255,0.3)}
.gnbSub a{font-size:15px}
.gnbList a::before{content:''; position:absolute; bottom:-7px; left:0; right:0; height:2px; border-radius:100px; background:var(--color-blue); transform:scaleX(0); transition:0.3s all ease-out}
.gnbList a:hover::before{transform:scaleX(1)}
.gnbList > li > a:hover{color:var(--color-blue) !important}
.gnbSub a::before{background:var(--color-white); height:1px}
.mo_gnb .common_btn, .mo_gnb ul, .mobileGnb{display:none}

.footer{background:#eee; padding:40px 0; position:relative; margin-top:150px}
.footer *{font-size:var(--font-small)}
.footer h1{display:inline-block; vertical-align:middle}
.footer .noti{display:inline-block; margin-left:50px; vertical-align:middle}
.footer .noti li{display:inline-block; position:relative}
.footer .noti li + li{padding-left:40px}
.footer .noti li + li::before{content:''; position:absolute; top:50%; transform:translateY(-50%); left:19px; width:1px; height:12px; background:#aaa; border-radius:100%}
.footer .noti li strong{color:var(--color-blue)}
.footer > div + div{border-top:1px solid #aaa; margin-top:20px; padding-top:20px}
.footer .info li{color:var(--color-gray); display:inline-block; font-size:var(--font-micro); margin-right:30px}
.footer .info li:last-child{display: block;}
 

@media (max-width:767px) {
    html, body, div, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, span, blockquote, pre, abbr, acronym, address, big, cite, code, del, dfn, img, ins, kbd, q, s, samp, small, strike, sub, sup, tt, var, a, b, center, dl, dt, dd, ol, li, fieldset, form, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video, button, textarea, input, label, select, option{font-size:15px; line-height:1.5em}

    :root {
        --font-xlarge:24px;
        --font-large:18px;
        --font-medium:15px;
        --font-regular:15px;
        --font-small:14px;
        --font-micro:12px;
    }
    h2, h2 *{font-size:var(--font-xlarge)}
    h3, h3 *{font-size:var(--font-large)}
    h4, h4 *{font-size:var(--font-medium)}

    .m_mt0{margin-top:0px !important}
    .m_mt10{margin-top:10px !important}
    .m_mt15{margin-top:15px !important}
    .m_mt20{margin-top:20px !important}
    .m_mt25{margin-top:25px !important}
    .m_mt30{margin-top:30px !important}
    .m_mt35{margin-top:35px !important}
    .m_mt40{margin-top:40px !important}
    .m_mt45{margin-top:45px !important}
    .m_mt50{margin-top:50px !important}
    .m_mt55{margin-top:55px !important}
    .m_mt60{margin-top:60px !important}
    .m_mt65{margin-top:65px !important}
    .m_mt70{margin-top:70px !important}

    .flexnone{display:block !important}
    .xs_block{display:block !important}
    .xs_hidden{display:none !important}
    .radius{border-radius:10px}

    .contact_checkbox input{top:2px}

    .gnb{display:none !important}
    .mobileGnb{display:flex; justify-content:space-between; align-items:center}
    h1 img{height:25px; transform:translateZ(0)}
    .mo_gnb .all_btn{display:inline-block; width:26px; height:auto; cursor:pointer; text-align:center; vertical-align:middle; min-width:auto; background:none}
    .mo_gnb .all_btn > div{
        width:auto; margin:0 auto; transition:all .7s ease; -webkit-transition:all .7s ease; 
        -moz-transition:all .7s ease; -ms-transition:all .7s ease; -o-transition:all .7s ease
    }
    .mo_gnb .all_btn .bar{
        display:block; height:2px; width:26px; background:var(--color-white); border-radius:10px; -webkit-transition:all .7s ease; 
        -moz-transition:all .7s ease; -ms-transition:all .7s ease; -o-transition:all .7s ease; transition:all .7s ease
    }
    .header{padding:15px}
    .header.fix .mo_gnb .all_btn .bar, .header.on .mo_gnb .all_btn .bar, .pageheader .mo_gnb .all_btn .bar{background:var(--color-black)}
    .mo_gnb .all_btn .bar + .bar{margin-top:5px}
    .mo_gnb .all_btn.on .top{
        -webkit-transform:translateY(7px) rotateZ(45deg); -moz-transform:translateY(7px) rotateZ(45deg);
        -ms-transform:translateY(7px) rotateZ(45deg); -o-transform:translateY(7px) rotateZ(45deg); transform:translateY(7px) rotateZ(45deg)
    }
    .mo_gnb .all_btn.on .middle{width:0}
    .mo_gnb .all_btn.on .bottom{
        -webkit-transform:translateY(-7px) rotateZ(-45deg); -moz-transform:translateY(-7px) rotateZ(-45deg); 
        -ms-transform:translateY(-7px) rotateZ(-45deg); -o-transform:translateY(-7px) rotateZ(-45deg); transform:translateY(-7px) rotateZ(-45deg)
    }
    .mo_gnb > ul{position:absolute; top:55px; left:0; width:100%; height:calc(100vh - 55px); background:var(--color-white); z-index:1; padding:50px 15px}
    .mo_gnb > ul > li  + li{border-top:1px solid var(--border-gray)}
    .mo_gnb > ul > li > a, .mo_gnb .flexbox a{font-weight:500; font-size:var(--font-xlarge); display:flex; justify-content:space-between; align-items:center}
    .mo_gnb .flexbox i{font-size:var(--font-xlarge); width:3%; text-align:right;cursor: pointer;}
    .mo_gnb a{display:block; padding:10px; position:relative}
    .mo_gnb .mo_sub{display:none}
    .mo_gnb .mo_sub a{padding-left:20px; position:relative}
    .mo_gnb .mo_sub a::before{content:''; position:absolute; top:50%; transform:translateY(-50%); left:10px; width:3px; height:3px; background:#333; border-radius:100%}

    .footer{margin-top:75px; padding:30px 0}
    .footer h1{height:25px;}
    .footer .noti{margin-left:0; display:block}
    .footer .noti li + li{padding-left:30px}
    .footer .noti li + li::before{left:15px}
    .footer .info{margin-bottom:15px}
    .footer .info{width:100%}
    .footer .info li{display:block}
    .footer .info li + li{margin:0}
}


/* MEMO - 기본 css 예외처리 */
input[type=checkbox]:focus, input[type=file]:focus, input[type=radio]:focus {
    outline: none;
}