@charset "utf-8";


/* 인트로 */
img {vertical-align:top;}

.intro_body { background-image: url(/images/web/jne365on/sub/intro_bg.png); background-repeat: repeat; min-width: 360px;  }
.intro_wrap * {word-break: keep-all; }

.intro_logo  { display: block; text-align: center; padding-top:2rem;  position: relative; z-index: 5;}
.intro_logo h1 {position: relative;font-weight: 700;color: #0f1a35;display: inline-block;padding: 1rem 6rem 0.8rem 6rem;background-color: #fff;border-radius: 3rem;box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);margin-top: 1rem;}
.intro_logo h1::after {content: '';  background-image: url(/images/web/jne365on/sub/intro_img.png); width: 141px; height: 41px; position: absolute; left:-70px; top:-10px; background-size: 100% auto;  background-repeat: no-repeat;} 
.intro_logo img { }

.intro_txt {display: block;text-align: center;/* font-weight: 600; */font-size: 1.125rem;line-height: 1.3rem;margin: 3.5rem auto;padding: 0 2rem;position: relative;z-index: 5;}
.intro_txt strong{font-weight: 600;font-size: 1.25rem; line-height: 2rem;}

.intro_goto_school {position: relative; padding: 25px 15px;}
.intro_goto_school::before {content: ''; position: absolute; left:0; right:0; bottom:0; height: 50%; background-image: url(/images/web/jne365on/sub/intro_wood.png); background-repeat: no-repeat; background-size: 100% 100%;}
.intro_goto_school::after {content: ''; position: absolute;  right:-100px; bottom:50%;width: 550px; height: 286px; background-image: url(/images/web/jne365on/sub/intro_school.png); background-repeat: no-repeat; background-size:auto 100%;}

.school_box {width:1500px; margin: 0 auto; margin-bottom: 45px; display: flex; position: relative; justify-content: space-between; z-index: 5; flex-wrap: wrap;}
.school_box a {width: 31.5%; display: block; position: relative; border-radius: 30px; box-shadow: 0 0 20px rgba(0,0,0,.3); overflow: hidden; padding-bottom: 28%;}
.school_box a img { position:absolute; -webkit-transform:scale(1); transform:scale(1); display:block; left:0; right:0; bottom:0; top:0;  width: 100%;  height: 100%; margin: auto;  z-index:1; -webkit-transition:transform .3s; transition:transform .3s; object-fit: cover;  object-position: center; }
.school_box a:hover img,
.school_box a:focus img { -webkit-transform:scale(1.1); transform:scale(1.1); }

.school_box a .txt{position: absolute; right: 0; left: 0; top:0; bottom: 0; text-align: right; padding: 50px; display: flex; flex-wrap: wrap; justify-content: right; align-content: end; z-index: 10;}
.school_box a .txt > strong {font-weight: 600;font-size: 1.5rem;display: block;width: 100%;margin-bottom: 0.8rem;color: #fff;}
.school_box a .txt > span {border: 1px solid rgba(255,255,255,0.4);padding: 0 1.875rem;font-size: 0.875rem;/* font-weight: 400; */line-height: 2.5rem;border-radius: 2.5rem;transition: all 0.6s;color: rgba(255,255,255,0.7);}
.school_box a::after {content: ''; position: absolute; right: 0; left: 0; top:0; bottom: 0; background:linear-gradient(-20deg, rgba(12,14,40,1), rgba(12,14,40,0.4), rgba(12,14,40,0)); z-index: 5;}
.school_box a:hover .txt > span {border: 1px solid rgba(255,255,255,1); color: #fff;}

.intro_copy {background-image: url(/images/web/jne365on/sub/intro_foot.png); background-repeat: no-repeat; background-size: 100% 100%; display: block; text-align: center; color: rgba(255,255,255,0.7); font-size: 14px; padding: 20px; font-family: 'GmarketSans';}


/*학교설립이야기*/
.history_wrap {margin-top: 2rem;}
.history_tit {display: block;margin-right: 60%;text-align: right;color: #1f63c9;font-weight: 700;font-size: 1.75rem;position: relative;}
.history_tit::after {content: '';width: 7px;height: 7px;border-radius: 50%;background-color: #1f63c9;position: absolute;right:-42px;top:calc(50% - 3px)}
.history_con {display: flex; justify-content: space-between;  padding: 10px 0;}
.history_con .history_img{ flex: 1 0 40%;  padding: 15px 0; text-align: right; }
.history_con .history_img img{width: 100%; border-radius: 5px;}
.history_con .history_img span{display: block;font-size: 0.8rem;color: #444;padding: 5px;}

.history_con .history_list{flex: 1 0 60%; padding-left: 70px;}
.history_con .history_list ul li {display: block; padding: 15px 0; position: relative;}
.history_con .history_list ul li strong{display: block;font-weight: 500;font-size: 1.125rem;}
.history_con .history_list ul li span{display: block;color: #777;font-size: 0.8rem;}
.history_con .history_list ul li::before {content: ''; left:-32px; top:30px; bottom: -33px; border-left: 1px dashed #c3ccd9; position: absolute; }
.history_con .history_list ul li:last-child::before {display: none;}
.history_con .history_list ul li::after {content: ''; width: 7px; height: 7px; border-radius: 50%; background-color: #c3ccd9; position: absolute; left:-35px; top:30px}

.history_con .history_list ul li.small_t {padding: 5px 0;}
.history_con .history_list ul li.small_t::before {top:25px;}
.history_con .history_list ul li.small_t::after {top:16px;}
.history_con .history_list ul li.small_t strong{font-size: 0.9rem; color: #444; font-weight: 400;}
.history_con .history_list ul li.small_t span{color: #777;font-size: 0.6rem;}

span.block {display: block;}

.sys_img_bg01, .sys_img_bg02 {position: relative;}
.sys_img_bg01::before {content: ''; position: absolute; right: 0; top:-20px; left:0; bottom:-50px; background-image: url(https://jne365on.jne.kr/upload/jne365on/cntntsFile/img_c058v1a8b=e7v9f=40v44=91v51=c952v51fbv8ec2_v4412.png); background-position: top right; background-repeat: no-repeat; background-size: 50%;} 
.sys_img_bg02::before {content: ''; position: absolute; right: 0; top:-30px; left:0; bottom:-50px; background-image: url(https://jne365on.jne.kr/upload/jne365on/cntntsFile/img_8465v4179=88v55=42v93=80v34=c81ev82adv4aef_v5142.png); background-position: top right; background-repeat: no-repeat; background-size: 70%;}

.sys_img_bg01 p, .sys_img_bg02 p{position: relative;}

.fc01 {color: #be621f; font-weight: 600;}
img {max-width: 100%;}

.symbol.typeB .symbolList .wrap .info p{display:block; text-align:center;}
.symbol.typeB .symbolList {justify-content: center;}

.symbol.typeA .symbolList .wrap {padding-top: 0.5rem;}
.symbol.typeA .symbolList .wrap .info {min-height: 9rem; display: flex; align-items: center; }

.symbol.typeA .symbolList .wrap .img, .symbol.typeB .symbolList .wrap .img {margin: 1rem auto 1rem; top:0.4rem;}

.img_right {float: right; margin-left: 25px;}
.img_left {float: left; margin-right: 25px;}


.img_size {width:70%; margin:0 auto;display: block;}

.sys_title {position: relative; text-align: center; padding: 20px 0 50px 0;}
.sys_title::before {content: ''; position:absolute; left: 0; top: 0; background-image: url(https://jne365on.jne.kr/upload/jne365on/cntntsFile/img_ac7cvbf92=ffv06=43vfe=91va3=be4av9e39vb79b_v4068.png); background-repeat: no-repeat; background-size:auto 100% ; width:50%; height: 90%;}
.sys_title::after {content: ''; position:absolute; right: 0; top: 0; background-image: url(https://jne365on.jne.kr/upload/jne365on/cntntsFile/img_2e20vd9ad=17vf1=4bv5f=95vd3=6bbbv45ecvff1c_v6193.png); background-repeat: no-repeat; background-size:auto 100% ; width: 50%; height: 90%; background-position: right top;}
.sys_title > img{width: 150px; opacity: 0.6;}
.sys_title > strong{ display: block; font-weight: 600; font-size: 170%;}
.sys_title > span{ color: #aaa;}


@media (max-width: 768px) {
	.symbol.typeB .symbolList {justify-content:space-between;}
	.symbol.typeA .symbolList .wrap .img {border-radius: 1rem;  top: calc(0rem + 2px); }
    .symbol.typeA .symbolList .wrap .info { justify-content: center;}
    .symbol.typeA .symbolList .wrap .info h4 {flex-wrap: wrap; justify-content: center;}
    .symbol.typeA .symbolList .wrap .info h4 span {display: block; width: 100%; text-align: center;}
    .symbol.typeA .symbolList .wrap .info h4 em {margin: 0;}
}
@media (max-width: 768px) {
    .symbol.typeB .symbolList .wrap {margin-top: 0.6rem !important;}
.img_size {width:100%;}
.sys_title > img{width: 80px;}
.sys_title > strong{ font-size: 140%;}

}

@media (max-width: 768px) { /*
    .img_right {float: right; width: 40%;}
    .img_left {float: left; width: 40%;}
   */
    .img_right {float: none; display: block; margin: 0 auto; width: 100%; }
    .img_left {float: none;display: block;  margin: 0 auto; width: 100%; }
    
.sys_title::before { background-size:auto 80% ; }
.sys_title::after {background-size:auto 80% ;}
}


/* media query mobile */

@media only screen and (max-width:1500px){
	/*인트로*/
    .school_box {width:auto; }
}

@media only screen and (max-width:1100px){

.school_box a .txt > span {padding: 0 1.5rem;font-size: 0.7rem; line-height: 2rem;}
.school_box a .txt > strong {font-size: 1.3rem;}
}

@media only screen and (max-width:950px){
	/*인트로*/
    .school_box a {width: 90%; margin: 0.5rem auto; padding-bottom: 60%;}
    .intro_goto_school::before {height: 80%;}
    .school_box a .txt{  padding:20px 10% 10% 20px }
    .school_box a .txt > span {padding: 0 1.7rem;font-size: 0.8rem; line-height: 2.5rem;}
    .school_box a .txt > strong {font-size: 1.5rem;}


    .intro_txt {font-size: 100%;margin: 2rem auto;}
    .intro_goto_school {padding: 5px 0px;}
    .intro_goto_school::after {display: none;}

}



@media only screen and (max-width:768px){

	/*인트로*/
    .intro_logo h1 {display: inline-block;padding: 1rem 2.5rem 0.4rem 2.5rem;border-radius: 50px;box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);}
    .intro_logo h1::after { width:90px; height: 30px; left: -40px; top:-7px}
    .intro_logo h1 > img {width: 250px;}
    .intro_logo img {width: 150px;}
    .school_box { margin-bottom: 25px;}
    .school_box a .txt {padding: 15px 30px 30px 15px;}
    .school_box a .txt > strong {font-size: 1.5rem;}
    .school_box a .txt > span {padding: 0 20px;font-size: 0.875rem;line-height: 30px;}
    .intro_copy {font-size: 12px; }
    
    
    /*학교설립이야기*/
    .history_con {flex-wrap: wrap; padding: 0;}
    .history_con .history_img{ flex: 1 0 100%; }
    .history_con .history_list{flex: 1 0 100%; }

    .history_tit { margin-right: 0%; text-align: left; padding-left: 30px; margin-top: 50px;}
    .history_tit::after { left:10px; right: auto; }
    .history_con .history_list{ padding-left: 40px;}

}
@media only screen and (max-width:640px){
    span.block {display: inline-block;}
    .sys_img_bg01::before, .sys_img_bg02::before{ position:relative; right: auto; top:0px; left:0; bottom: auto; padding-bottom: 70%;background-size: 100%; display: block;} 
    .sys_img_bg02::before {padding-bottom: 65%;}
}


#footer .btn_home {display: flex; justify-content: center; align-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; border: 0; box-shadow: 0.15rem 0.15rem 0.35rem rgba(124,124,124,0.57); font-size: 1.4rem; color: #fff; position: fixed; right: 1.1rem; bottom: 3.9rem; z-index: 2; opacity: 0; visibility: hidden;background-color:var(--subColor); font-size:1.25rem; padding:0;}
#footer .btn_back {display: flex; justify-content: center; align-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; border: 0; box-shadow: 0.15rem 0.15rem 0.35rem rgba(124,124,124,0.57); font-size: 1.4rem; color: #fff; position: fixed; right: 1.1rem; bottom: 7rem; z-index: 2; opacity: 0; visibility: hidden;background-color:var(--subColor); font-size:1.25rem; padding:0;}
#footer .btn_home i, #footer .btn_back i {font-size: 1.2rem;padding: 0;}

@media (max-width: 1480px) {

	#footer .btn_home {top: auto;  opacity: 1; visibility: visible;}
	#footer .btn_back {top: auto; opacity: 1; visibility: visible;}
}


