/* 학교소개 공통배경 */
.subBanner{
	width: 100%;
    height: 240px;
    background: url('../../images/intro/intro_ban.jpg?ver=221216') no-repeat;
    background-size: cover;
    background-position: center;
}


/* 인사말  */

.subBanner.main{
	width: 100%;
    height: 440px;
    background: url('../../images/intro/intro_main.png') no-repeat;
    background-size: cover;
    background-position: center;
    margin-top: -90px;
}

.subBanner .greet {
    width: 100%;
    min-width: 1160px;
    max-width: 1400px;
    margin: 0 auto;
    display: block;
}

.subBanner .greetingTop{
    font-family: 'InkLipquid';
    font-size: 60px;
    padding-top: 175px;
    line-height: 1;
}

.subBanner .greetingBot{
    font-family: 'nsR';
    font-size: 29px;
    line-height: 45px;
    margin-top: 25px;
}

.subBanner .greetingBot span{
    font-family: 'nsEB';
    font-size: 29px;
    line-height: 45px;
}

.topBox{
    margin-top: 50px;
}

.midBox{
    margin-top: 45px;
}

.bigText{
    font-size: 18px;
    font-family: 'nsEB';
	display: block;
}

.midText{
    font-size: 16.5px;
    font-family: 'nsR';
    font-weight: bold;
	line-height: 30px;
	color: #222;
	display: block;
}

.midText.eng{
    font-size: 20px;
}

.smallText{
    font-size: 16.5px;
    font-family: 'nsR';
	color: #666;
    line-height: 30px;
	display: block;
}

.greetingMark{
    height: 60px;
    margin-top: 85px;
    overflow: hidden;
}

.greetingMark .greetingName{
    margin-right: 15px;
}
.greetingMark .greetingName,
.greetingMark img{
    float: left;
}




/* 교육/비전 */
.exBox.vision{
    margin-bottom: 0px;
}

.subBox .sub2Ment {
    font-size: 24px;
    font-family: 'nsEB';
    margin-top: 40px;
    text-align: center;
}

.minTitle.vision{
    margin-bottom: 80px;
}

.visionTop{
    max-width: 1290px;
    width: 100%;
    min-width: 1160px;
    margin: 0 auto 100px;
    overflow: hidden;
}

.minTitle{
    font-size: 20px;
}

.visionTop .vtLeft,
.visionTop .vtRight{
    width: 50%;
    float: left;
}


.visionTop .vtLeft .sub2Ment {
    line-height: 40px;
}

.visionTop .vtLeft .polygonBox{
    margin: 25px auto;
    height: 357px;
    position: relative;
}

.visionTop .vtLeft .polygonBox .pbBox{
    position: absolute;
}

.visionTop .vtLeft .polygonBox .pbBox1{
    background: url('../../images/intro/vision_1.png') no-repeat;
    width: 174px;
    height: 198px;
    top: 0px;
    left: 50%;
    transform: translateX(-50%);
}

.visionTop .vtLeft .polygonBox .pbBox2{
    background: url('../../images/intro/vision_2.png') no-repeat;
    width: 174px;
    height: 198px;
    bottom: 0px;
    left: 50%;
    transform: translateX( calc( -50% - 92px ) );
}

.visionTop .vtLeft .polygonBox .pbBox3{
    background: url('../../images/intro/vision_3.png') no-repeat;
    width: 174px;
    height: 198px;
    bottom: 0px;
    right: 50%;
    transform: translateX( calc( 50% + 92px ) );
}

.visionTop .vtLeft .polygonBox .pbBox span{
    text-align: center;
    line-height: 198px;
    display: block;
    font-size: 22px;
    font-family: 'nsEB';
}

.visionTop .vtLeft .polygonBox .pbBox1 span{
    color: #6abbfa;
}

.visionTop .vtLeft .polygonBox .pbBox2 span{
    color: #6ec1ce;
}

.visionTop .vtLeft .polygonBox .pbBox3 span{
    color: #8c22ff;
}


.visionTop .vtRight .vrLine{
    border: 2px solid #ededed;
    border-radius: 15px;
    overflow: hidden;
    opacity: 0;
    transition-duration: 1s;
}


.visionTop .vtRight.fixed .vrLine{
    opacity: 1;
}

.visionTop .vtRight.fixed .vrLine:nth-child(1){
    transition-delay: 0.3s;
}

.visionTop .vtRight.fixed .vrLine:nth-child(2){
    transition-delay: 0.6s;
}

.visionTop .vtRight.fixed .vrLine:nth-child(3){
    transition-delay: 0.9s;
}

.visionTop .vtRight .vrLine:nth-child(n+2){
    margin-top: 18px;
}


.visionTop .vtRight .vrLine table{
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
}

.visionTop .vtRight .vrLine table tr td .vrTitle{
    font-size: 18px;
    color: #8c22ff;
    font-family: 'nsEB';
    text-align: center;
    display: block;
}

.visionTop .vtRight .vrLine table tr td .vrText{
    font-size: 16px;
    line-height: 28px;
    font-family: 'nsR';
    color: #666666;
    padding: 30px 0px;
    text-align: left;
    display: block;
}


.visionBot{
    background-color: #f5f5f5;
    margin-bottom: 325px;
}

.visionBot .subMent {
    font-size: 28px;
    font-family: 'nsEB';
    color: #222;
    padding-top: 80px;
    text-align: center;
}

.visionBot .sub2Ment {
    font-size: 24px;
    font-family: 'nsEB';
    margin-top: 40px;
    text-align: center;
}

.visionBot .minTitle{
    padding-bottom: 250px;
    margin-bottom: 0px;
}

.visionBot .vbLeft{
    position: absolute;
}

.visionBot .vbRight{
    position: absolute;
}

.visionBot .vbBox{
    max-width: 1400px;
    position: relative;
    min-width: 1160px;
    margin: 0 auto;
    text-align: center;
}

.visionBot .vbBox div img{
    display: block;
    margin: 0 auto;
    width: 80px;
}

.visionBot .vbBox .vbTitle{
    font-size: 20px;
    font-family: 'nsEB';
    color: #8c22ff;
    display: block;
    margin: 20px auto 35px;
    text-align: center;
}


.visionBot .vbBox .vbText{
    font-size: 16px;
    font-family: 'nsR';
    color: #666666;
    text-align: left;
    display: inline-block;
    margin: 0 auto;
    line-height: 30px;
}

.visionBot .vbBox .vbLeft{
    padding: 48px 0px 35px;
    left: 0px;
    width: calc( 50% - 24px );
    border: 1px solid #f4f4f4;
    bottom: 50%;
    transform: translateY(70%);
    background-color: #fff;
    opacity: 0;
    transition-duration: 1s;
}

.visionBot .vbBox .vbRight{
    padding: 48px 0px 35px;
    right: 0px;
    width: calc( 50% - 24px );
    border: 1px solid #f4f4f4;
    bottom: 50%;
    transform: translateY(70%);
    opacity: 0;
    transition-duration: 1s;
    background-color: #fff;
}

.visionBot.fixed .vbBox .vbLeft{
    opacity: 1;
    transition-delay: .3s;
    transform: translateY(50%);
}
.visionBot.fixed .vbBox .vbRight{
    opacity: 1;
    transition-delay: .6s;
    transform: translateY(50%);
}



/* 조직도 */

.nameBox{
    line-height: 80px;
    height: 80px;
    width: 17.143%;
    margin: 0 auto;
    position: relative;
}

.nameBox{
    background-color: #8c22ff;
    margin-top: 55px;
    margin-bottom: 40px;
}

.nameBox .hypenTop{
    position: absolute;
    display: block;
    width: 1px;
    height: 40px;
    background-color: #dddddd;
    bottom: -40px;
    left: 50%;
    transform: translateX(-50%);
}

.secondBox{
    background-color: #62b5f9;
    margin-bottom: 55px;
}

.secondBox .hypenTop{
    position: absolute;
    display: block;
    width: 1px;
    height: 55px;
    background-color: #dddddd;
    bottom: -55px;
    left: 50%;
    transform: translateX(-50%);
}

.nameBox span{
    text-align: center;
    font-size: 24px;
    font-family: 'nsEB';
    display: block;
    color: #fff;
}

.orgarBot{
    width: calc( 100% - 260px );
    margin: 0 auto;
    border-top: 1px solid #ddd;
    padding-top: 50px;
    min-height: 1425px;
    position: relative;
}

.orgarBot .obHypen{
    width: 1px;
    height: 50px;
    background-color: #ddd;
    position: absolute;
}

.orgarBot .hypenLeft{
    left: 0px;
    top: 0px;
}

.orgarBot .hypenCenter{
    left: 50%;
    top: 0px;
    transform: translateX(-50%);
}

.orgarBot .hypenRight{
    right: 0px;
    top: 0px;
}

.orgarBot .obBoxLeft{
    width: 17.143%;
    position: absolute;
    top: 50px;
    left: 0px;
    transform: translateX(-50%);
}

.orgarBot .obBoxLeft .titleBox{
    background-color: #74c4d1;
    height: 70px;
    line-height: 70px;
}


.orgarBot .obBoxLeft .titleBox span{
    font-size: 20px;
    font-family: 'nsEB';
    color: #fff;
    line-height: 70px;
    display: block;
    text-align: center;
}

.orgarBot .obBoxLeft .textBox{
    background-color: #f4f4f4;
    height: 60px;
    line-height: 60px;
    margin-top: 10px;
}

.orgarBot .obBoxLeft .textBox span{
    font-size: 16px;
    font-family: 'nsR';
    color: #666;
    display: block;
    text-align: center;
    font-weight: bold;
    border: 1px solid #ddd;
    height: 58px;
}


.orgarBot .obBoxCenter{
    width: 66.2281%;
    position: absolute;
    top: 50px;
    left: 50%;
    transform: translateX(-50%);
}

.orgarBot .obBoxCenter .titleBox{
    background-color: #74c4d1;
    height: 70px;
    line-height: 70px;
    display: block;
    width: 100%;
}


.orgarBot .obBoxCenter .titleBox span{
    font-size: 20px;
    font-family: 'nsEB';
    color: #fff;
    line-height: 70px;
    display: block;
    text-align: center;
}

.orgarBot .obBoxCenter .subBoxWrap{
    overflow: hidden;
    width: 100%;
}

.orgarBot .obBoxCenter .subBoxWrap .subBoxList{
    float: left;
    width: calc( 33.3333% - 6.7px );
    margin-left: 10px;
    margin-top: 10px;
}

.orgarBot .obBoxCenter .subBoxWrap .subBoxList:nth-child(3n+1){
    margin-left: 0px;
}


.orgarBot .obBoxCenter .subBoxWrap .subBoxList .sblTitle{
    background-color: #f4f4f4;
    height: 60px;
    line-height: 60px;
}

.orgarBot .obBoxCenter .subBoxWrap .subBoxList .sblTitle span{
    font-size: 16px;
    font-family: 'nsR';
    color: #666;
    height: 58px;
    display: block;
    text-align: center;
    font-weight: bold;
    border: 1px solid #ddd;
}

.orgarBot .obBoxCenter .subBoxWrap .subBoxList .sblText{
    background-color: #fff;
    border: 1px solid #ddd;
    border-top: none;
    height: 180px;
    padding: 18px 0px;
}

.orgarBot .obBoxCenter .subBoxWrap .subBoxList .sblText .sbFac{
    padding-left: 40px;
}


.orgarBot .obBoxCenter .subBoxWrap .subBoxList .sblText span{
    font-size: 16px;
    color: #666;
    font-family: 'nsR';
    display: inline-block;
    line-height: 26px;
    text-align: left;
}


.orgarBot .obBoxRight{
    width: 17.143%;
    position: absolute;
    top: 50px;
    right: 0px;
    transform: translateX(50%);
}

.orgarBot .obBoxRight .titleBox{
    background-color: #74c4d1;
    height: 70px;
    line-height: 70px;
}

.orgarBot .obBoxRight .titleBox2{
    margin-top:10px;
}

.orgarBot .obBoxRight .titleBox span{
    font-size: 20px;
    font-family: 'nsEB';
    color: #fff;
    line-height: 70px;
    display: block;
    text-align: center;
}

.orgarBot .obBoxRight .textBox{
    background-color: #f4f4f4;
    height: 60px;
    line-height: 60px;
    margin-top: 10px;
}

.orgarBot .obBoxRight .textBox span{
    font-size: 16px;
    font-family: 'nsR';
    color: #666;
    display: block;
    text-align: center;
    font-weight: bold;
    border: 1px solid #ddd;
    height: 58px;
}




/* 오시는길 */

#map{
    width: 100%;
    height: 400px;
}

.subMent.map{
    margin-bottom: 40px;
}

.mapInfo{
    overflow: hidden;
    margin-top: 30px;
}

.mapInfo .callCenter,
.mapInfo .fax{
    float: left;
}

.mapInfo .address{
    float: right;
}

.mapInfo div .miTitle{
    font-size: 16px;
    font-weight: bold;
    color: #222;
    font-family: 'nsR';
    display: block;
    line-height: 1;
}


.mapInfo div .miText{
    font-size: 16px;
    color: #222;
    font-family: 'nsR';
    font-weight: normal;
    display: block;
    line-height: 1;
    margin-top: 10px;
}


.mapInfo div .miTitle span{
    font-size: 14px;
    font-weight: normal;
    display: block;
    margin: 10px 0px 14px;
}

.mapInfo .callCenter{
    padding-left: 30px;
    background: url('../../images/common/call.svg') no-repeat;
    background-size: 20px;
    background-position: left 4px;
    padding-top: 6px;
}


.mapInfo .fax{
    padding-left: 30px;
    background: url('../../images/common/fax.svg') no-repeat;
    background-size: 20px;
    background-position: left 2px;
    padding-top: 6px;
    margin-left: 110px;
}


.mapInfo .address{
    padding-left: 26px;
    background: url('../../images/common/marker.svg') no-repeat;
    background-size: 16px;
    background-position: left 2px;
    padding-top: 6px;
    position: relative;
    min-height: 85px;
}

.mapInfo .addInfo{
    font-size: 14px;
    font-family: 'nsR';
    color: #999;
    font-weight: bold;
    position: absolute;
    right: 0px;
    bottom: 0px;
    width: 432px;
}

.traffic{
    margin-top: 40px;
    overflow: hidden;
    border-top: 2px solid #222;
}

.traffic .bus{
    padding-left: 150px;
    background: url('../../images/common/bus.svg') no-repeat;
    background-position: 60px top;
    background-size: 45px;
    margin-top: 40px;
}

.traffic .subway{
    padding-left: 150px;
    background: url('../../images/common/subway.svg') no-repeat;
    background-position: 60px 40px;
    background-size: 45px;
    margin-top: 40px;
    padding-top: 40px;
    border-top: 1px solid #dddddd;
}

.traffic .traffMark{
    width: 18px;
    height: 18px;
    line-height: 18px;
    text-align: center;
    border-radius: 15px;
    margin-right: 5px;
    display: inline-block;
}

.traffic div span{
    font-size: 16px;
    font-family: 'nsR';
    color: #222;
}

.traffic div span.tfTitle{
    font-family: 'nsEB';
    display: block;
}

.traffic div span.tfTitle.mt40{
    margin-top: 40px;
}

.traffic div span.traffRoute{
    display: block;
    margin-top: 15px;
    line-height: 1;
}


.traffic .traffMark.b{
    color: #fff;
    background-color: #009ce4;
    font-size: 14px;
}

.traffic .traffMark.g{
    color: #fff;
    background-color: #01be01;
    font-size: 14px;
}

.traffic .traffMark.l9{
    color: #fff;
    background-color: #bca858;
    font-size: 14px;
}

.traffic .traffMark.l5{
    color: #fff;
    background-color: #8d01bb;
    font-size: 14px;
}

.province{
    padding: 65px 30px 0px;
    margin-top: 40px;
    border-top: 1px solid #dddddd
}

.province .pvTitle{
    font-size: 22px;
    font-family: 'nsEB';
    color: #222;
    display: block;
    width: 100%;
    margin-bottom: 15px;
}


.province .pvList{
    float: left;
    width: calc( 50% - 30px );
    overflow: hidden;
    margin-top: 35px;
}

.province .pvList .pvMark{
    display: block;
    width: 88px;
    height: 88px;
    border: 1px solid #ddd;
    position: relative;
    float: left;
}


.province .pvList .pvMark span{
    font-size: 14px;
    line-height: 24px;
    font-family: 'nsR';
    color: #8c22ff;
    display: block;
    width: 100%;
    font-weight: bold;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%)!important;
    text-align: center;
    letter-spacing: -1px;
}

.province .pvList .pvInfo{
    float: right;
    width: calc( 100% - 115px );
    font-size: 16px;
    line-height: 24px;
}

.province .pvList .pvInfo .pvPad{
    display: block;
    padding-left: 16px;
    font-size: 16px;
}

.province .pvList:nth-child(2) .pvInfo:nth-child(3),
.province .pvList:nth-child(3) .pvInfo:nth-child(3){
    margin-top: 20px;
}

.province .pvList:nth-child(4) .pvInfo{
    line-height: 90px;
}

.province .pvList:nth-child(3),
.province .pvList:nth-child(5){
    margin-left: 60px;
}

.province .pvList:nth-child(5) .pvInfo{
    margin-top: 21px;
}

.customoverlay{
    height: 40px;
    border: 2px solid #0475f4;
    border-radius: 40px;
    line-height: 38px;
    position: relative;
    padding-right: 15px;
    padding-left: 40px;
    background: url('../../images/common/mapMarker.svg') no-repeat;
    background-color: #fff;
    background-size: 30px 30px;
    background-position: 5px;
    position: absolute;
    left: -30px;
    top: -55px;
}

.customoverlay span{
    font-size: 14px;
    font-family: 'nsR';
    font-weight: bold;
}

.triangle{
    position: absolute;
    width: 10px;
    height: 10px;
    bottom: -10.2px;
    left: 20px;
    background: url('../../images/common/arrowMap.svg') no-repeat;
}

@media screen and (max-width: 1650px){

    .visionBot {
        padding: 0px 20px;
        width: calc( 100% - 40px );
    }
}