@charset "utf-8";

.main > * + *{margin-top:150px}
.sub > * + *{margin-top:100px}
.main_top{position:relative; height:100vh; overflow:hidden}
.main_top video{position:absolute; top:50%; left:50%; transform:translate(-50.1%, -50.1%); -ms-transform:translate(-50.1%, -50.1%); -webkit-transform:translate(-50.1%, -50.1%); min-width:100%; min-height:100%; width:auto; height:auto; object-fit:cover}
.main_top .inner{position:absolute; bottom:150px; left:50%; transform:translateX(-50%); z-index:2; text-align:left}
.top_title .tit{overflow:hidden}
.top_title .tit span{font-size:120px; font-weight:bold; line-height:1; color:var(--color-white); position:relative; top:150px; animation:title_lg .7s ease-in-out .2s forwards}
.top_title .subtext{font-size:var(--font-large); margin-top:50px; color:var(--color-white); animation:fadeInUp 0.8s 1 forwards; -webkit-animation:fadeInUp 0.8s 1 forwards; animation-delay:1s; opacity:0}
.sub .top_title .tit span{font-size:var(--font-xlarge); line-height:1.6em}
.sub .top_title .subtext{font-size:var(--font-regular); margin-top:30px}

.sub > div{position:relative}
.sub > * + *, .sub + .sub{margin-top:100px}

@keyframes title_lg{0%{opacity:0; top:150px} 100%{opacity:1; top:0px}}
@keyframes title_md{0%{opacity:0; top:60px} 100%{opacity:1; top:0px}}

.intro_box{display:grid; grid-template-columns:50% auto; align-items:center; column-gap:40px}
.box_order{grid-template-columns:auto 50%} 
.intro_box .tit{font-size:var(--font-xlarge); font-weight:bold; line-height:1.3; margin-bottom:50px}
.sub .intro_box .tit{font-size:var(--font-large)}

.swiper_box{text-align:center}
.swiper_box.bk_gray{padding:70px 0}
.swiper_box h2{text-align:left; margin-bottom:30px; font-weight: bold;}
.main03_swiper{overflow:hidden}
.main03_pagination{position:relative; margin-top:50px !important; height:3px !important; background:var(--border-gray) !important}
.main03_pagination span{background:#111 !important}
.swiper_box .tit, .swiper_box .blt{margin-top:20px}
.swiper_box .tit{height: 60px;}
.swiper_box .blt span{font-size:var(--font-micro); color:var(--color-gray); padding:0 15px; height:37px; line-height:37px; background:#e9e9e9; border-radius:100px; display:inline-block}
.swiper_box .blt span + span{margin-left:5px}
.swiper_box .common_btn{position:absolute; top:6px; right:20px}

.sub_top{height:calc(100vh - 300px); min-height:600px; position:relative; background-size:cover !important; -webkit-background-size:cover; -moz-background-size:cover; -o-background-size:cover; overflow:hidden}
.sub_top::before{content:''; position:absolute; top:0; left:0; width:100%; height:100%; background:var(--rgba--black)}
.sub_top .top_title{position:absolute; bottom:100px; left:50%; transform:translateX(-50%)}
@keyframes fadeInUp {
    0% {opacity:0; -webkit-transform:translate3d(0, 100%, 0); -ms-transform:translate3d(0, 100%, 0); transform:translate3d(0, 100%, 0)}
    100% {opacity:1; -webkit-transform:none; -ms-transform:none; transform:none}
}
.top_title .indent{display:block; text-indent:14px}
.intro_back{background:url('/layouts/njoyschool/image/intro_back.png') center}
.historyback{background:url('/layouts/njoyschool/image/history_header.png') center}
.map_back{background:url('/layouts/njoyschool/image/map_back.png') center}
.ctc_back{background:url('/layouts/njoyschool/image/ctc_back.png') center}
.school_back{background:url('/layouts/njoyschool/image/school_back.png') right}
.faq_back{background:url('/layouts/njoyschool/image/faq_back.png') left}
.contact_back{background:url('/layouts/njoyschool/image/contact_back.png') center}
.vision_back{background:url('/layouts/njoyschool/image/vision_back.png') center}
.ceo_back{background:url('/layouts/njoyschool/image/ceo_back.png') center}
.text_grid{display:grid; grid-template-columns:40% auto; column-gap:40px; overflow:hidden}
.swiperRight{overflow:hidden; width:calc((100% - 1160px)/2 + 1160px); margin-left:calc((100% - 1160px)/2); position:relative; padding-right:20px}
.swiperRight .pagination04{max-width:1200px; bottom:0; top:auto}
.family_list{display:flex}
.family_list li{width:100%}
.family_list li + li{margin-left:20px}
.family_list a{position:relative}
.family_list a::before{content:''; position:absolute; top:0; left:0; width:100%; height:100%; background:var(--rgba--black); z-index:1}
.family_list .text{position:absolute; top:50%; transform:translateY(-50.1%); left:0; width:100%; text-align:center; z-index:2}
.intro_box .root_daum_roughmap{width:100%}
.map_info dl{display:grid; grid-template-columns:100px auto}
.map_info dl + dl{margin-top:20px}
.map_info dt{font-weight:bold}
.toggle_list{border-top:3px solid var(--color-black); background:#fff}
.toggle_list li{border-bottom:1px solid #ddd}
.toggle_list .tit{padding:30px 20px}
.toggle_list .tit{display:flex; justify-content:space-between; align-items:center; cursor:pointer}
.toggle_list .tit *{font-size:var(--font-medium); font-weight:500}
.toggle_list .tit p em{color:var(--color-gray2); width:150px; display:inline-block; font-size:var(--font-small)}
.toggle_list .tit p span{position:relative; display:inline-block; z-index:1}
.toggle_list .tit span::before{content:''; background:var(--color-blue); opacity:0.3; position:absolute; bottom:0; left:0; width:100%; height:14px; transform:scaleY(0); transition:0.3s ease; z-index:-1}
.toggle_list .tit:hover span::before, .toggle_list li.on span::before{transform:scaleY(1)}
.toggle_list .tit i{position:relative; width:16px; height:16px}
.toggle_list .tit i::before, .toggle_list .tit i::after{content:''; position:absolute; top:50%; left:0; right:0; height:2px; background:var(--color-black); transition:0.25s; border-radius:5px}
.toggle_list .tit i::before{transform:rotate(90deg)}
.toggle_list li.on .tit i::before{transform:rotate(180deg)}
.toggle_list .text{padding:40px 20px 60px 20px; border-top:1px solid #ddd; display:none}
.inquiry.flexbox > *{width:45%}
.inquiry + .inquiry{margin-top:40px}
.inquiry > div{display:grid; grid-template-columns:100px auto; align-items:center}
.inquiry p{font-weight:bold}
.inquiry .textcon{align-items:start}
.inquiry .textcon textarea{height:300px}
.bottom_chk .agree{font-size:var(--font-small); color:var(--color-blue); text-decoration:underline; text-underline-offset:4px}
.layerpop{position:fixed; top:0; left:0; width:100%; height:100vh; background:var(--rgba--black); z-index:11; display:none}
.pop_box{position:fixed; z-index:12; max-width:600px; padding:40px; background:#fff; border-radius:10px}
.layerpop .text{font-size:var(--font-small)}
.pop_box > * + *{margin-top:30px}

.historyTit{width:500px}
.history .historyList{width:calc(100% - 500px)}
.historyTit.fix{position:fixed; top:186px}
.historyList.fix{margin-left:500px}
.historyList .tar{margin-bottom:30px}
.historyList ul{border-top:2px solid #111; background:#fff}
.historyList li{padding:20px 0; border-bottom:1px solid #ddd}
.historyList li p{width:80px; font-weight:500}
.historyList li div{width:calc(100% - 80px)}
.historyList li, .historyList dl{display:table; width:100%}
.historyList li > *, .historyList dl *{display:table-cell}
.historyList dl + dl{margin-top:20px}
.historyList dt{width:30px; color:#999}
.historyList ul + h3{margin-top:50px}
h3 + .historyList{margin-top:0}
.historyList .nmonth p{width:80px}
.historyList .nmonth li div p{width:100% !important; font-weight:normal}
.historyList li div p + p{margin-top:20px}
.con_cmn{display:none}
.con_cmn.con1{display:block}

.vision{text-align:center}
.vision_box{width:360px; height:360px; position:relative; margin:0 auto}
.vision_box > div{position:absolute; top:50%; transform:translateY(-50%); left:0; width:100%}
.vision01 .vision_box{background:url('/layouts/njoyschool/image/vision01.png'); background-size:100%}
.vision02 .vision_box{background:url('/layouts/njoyschool/image/vision02.png'); background-size:100%}
.vision03 .vision_box{background:url('/layouts/njoyschool/image/vision03.png'); background-size:100%}
.vision_box .tit{font-size:var(--font-xlarge); font-weight:bold}
.vision_box .text{color:var(--color-gray)}
.vision i{display:block; width:15px; height:15px; border-radius:100%; margin:15px auto}
.vision01 i{background:#343464; border:5px solid #b8b8c9}
.vision02 i{background:#0088cf; border:5px solid #aedaf2}
.vision03 i{background:#54585e; border:5px solid #c3c5c7}
.vision .flex{display:flex; justify-content:center}
.vision .flex > * + *{margin-left:30px}

@media (max-width:1024px) {
    .swiperRight{width:100%; margin-left:0; padding:0 15px}
	.swiperRight .pagination04{width:calc(100% - 30px); left:15px}
    .swiper_box .blt span{display:none}
}


@media (max-width:767px) {
    .inner{padding:0 15px}
    .main > * + *{margin-top:75px}
    .sub > * + *{margin-top:50px}

    .main_top{height:65vh}
    .sub_top{height:50vh; min-height:auto}
    .main_top .inner{bottom:75px}
    .top_title .tit span{font-size:50px}
    .top_title .indent{text-indent:4px}
    .top_title .subtext, .sub .top_title .subtext{margin-top:15px}
    @keyframes title_lg{0%{opacity:0; top:50px} 100%{opacity:1; top:0px}}
    @keyframes title_md{0%{opacity:0; top:60px} 100%{opacity:1; top:0px}}

    .intro_box{grid-template-columns:100%; row-gap:20px}
    .intro_box .tit{margin-bottom:20px}
    .box_order .text{order:2; grid-column:1}
    .box_order .img{order:1; grid-column:1}

    .swiper_box.bk_gray{padding:30px 0}
    .swiper_box h2{margin-bottom:20px}
    .swiper_box .common_btn{position:relative; top:auto; right:auto; width:100%; margin-top:20px; padding:15px}
    .main03_pagination{margin-top:20px !important}
    .main03_swiper{margin:0 -15px; padding:0 15px}
    .swiper_box .tit{margin-top:10px}
    .swiper_box .blt{margin-top:0}

    .sub_top .top_title{bottom:50px}
    .text_grid{display:block}
    .text_grid > * + *{margin-top:20px}
    .family_list{display:block}
    .family_list li + li{margin:10px 0 0 0}
    .map_info dl{grid-template-columns:50px auto}
    .map_info dl + dl{margin-top:10px}
    .intro_box .root_daum_roughmap .wrap_map{height:300px !important}
    .toggle_list .tit{padding:10px 0}
    .toggle_list .tit p em{display:block; width:auto; margin-bottom:5px}
    .toggle_list .text{padding:20px 0}
    .inquiry{display:block !important}
    .inquiry + .inquiry, .inquiry.flexbox > * + *, .pop_box > * + *{margin-top:15px}
    .inquiry.flexbox > *{width:100%}
    .inquiry > div{grid-template-columns:65px auto}
    .bottom_chk{display:block; text-align:center}
    .bottom_chk > * + *{margin-top:20px}
    .pop_box{padding:20px; width:calc(100% - 30px); left:15px !important}

	.historyTit{width:100%}
    .historyTit.fix{position:relative; top:auto}
    .history .historyList{width:100%}
    .historyList.fix{margin-left:0}

    .vision_box{max-width:360px; max-height:360px; width:70vw; height:70vw}
    .vision .flex, .vision .flex > * + *{margin:50px 0 0 0}
    .vision i{margin:10px auto; width:10px; height:10px; border-width:3px}
}