.navigation{
    z-index: 10; position: fixed; top: 50%; left: 0;
    -webkit-transform: translateY(-50%); transform: translateY(-50%);
    font-size: 0;
}
.navigation .anchor-lists{
    position: absolute; top: 50%; left: 103px; margin-top: -10px;
    font-size: 0; white-space: nowrap;
    -webkit-transform-origin: left; transform-origin: left;
    -webkit-transform: rotate(-90deg) translateX(-50%); transform: rotate(-90deg) translateX(-50%);
    -webkit-transition: all ease-out .15s; transition: all ease-out .15s;
    direction: rtl;
}
.navigation .anchor-lists li{
    display: inline-block;
}
.navigation .anchor-lists a{
    display: inline-block; margin: 0 20px;
    font-family: 'Montserrat', NotoKR; font-size: 14px; font-weight: 200;
    background-repeat: no-repeat;
    background-image: linear-gradient(to right, rgba(51,51,51,1) 0%, rgba(51,51,51,1) 100%);
    background-position: 0 50%;
    background-size: 0 1px;
    -webkit-transition: all ease .5s;
    transition: all ease .5s;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    opacity: .4;
}
.navigation .anchor-lists a.active{
    background-size: 100% 1px;
    font-weight: 500;
    opacity: 1;
}
.navigation[data-navigation="light"] a:not(.active){
    color: #ffffff;
}
@media(max-width:1200px){
    .navigation .anchor-lists { left: 60px; }
}
@media(max-width:768px){
    .navigation { display: none; }
}


.visual{
    height: 100vh;
}
.visual-box {
    width: 100%;
    height: 100%;
}
.visual-box-wrap {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.visual-box-background {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 200%;
}
.visual-box-foreground {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 0%;
}
.visual-box-background .svg-background,
.visual-box-background .svg-image,
.visual-box-foreground .svg-background,
.visual-box-foreground .svg-image {
    clip-path: url(#clip-rect);
}
.svg-clip {
    display: block;
    width: 100%;
    height: 100%;
}
.svg-image{
    opacity: 0;
    -webkit-transform-origin: top;
    transform-origin: top;
}
.visual-box-rect {
    display: block;
    z-index: 2;
    position: relative;
    width: 100%;
    height: 100%;
}
.visual-box-svg {
    display: block;
    overflow: hidden;
    width: 100%;
    height: 100%;
}
/* [data-box="init"] .visual-box-background{
    animation: background 1s cubic-bezier(0.73, 0, 0.25, 1) .15s forwards;
} */
[data-box="init"] .visual-box-foreground{
    animation: foreground 1s cubic-bezier(0.73, 0, 0.25, 1) .15s forwards;
}
[data-box="init"] .svg-image {
    -webkit-transition: all ease .3s;
    transition: all ease .3s;
    -webkit-transition: opacity .5s ease-out .3s,
                        width .3s ease-out,
                        height .3s ease-out,
                        transform .5s ease-out;
            transition: opacity .5s ease-out .3s,
                        width .3s ease-out,
                        height .3s ease-out,
                        transform .5s ease-out;
    animation: logo .65s ease-out .35s forwards;
}
[data-box-scroll="scrolled"] .svg-image{
    animation: none;
    opacity: 1;
    -webkit-transition: opacity .5s ease-out .3s,
                        width .3s ease-out,
                        height .3s ease-out;
            transition: opacity .5s ease-out .3s,
                        width .3s ease-out,
                        height .3s ease-out;
}
@-webkit-keyframes logo {
    from { opacity: 0; -webkit-transform: scale(0.9); transform: scale(0.9); }
    to { opacity: 1; -webkit-transform: scale(1); transform: scale(1); }
}
@keyframes logo {
    from { opacity: 0; -webkit-transform: scale(0.9); transform: scale(0.9); }
    to { opacity: 1; -webkit-transform: scale(1); transform: scale(1); }
}
@-webkit-keyframes foreground {
    0% { height: 0; }
    100% { height: 40vh; }
}
@keyframes foreground {
    0% { height: 0; }
    100% { height: 40vh; }
}
@media(max-width:1200px){
    @-webkit-keyframes foreground {
        0% { height: 0; }
        100% { height: 43vh; }
    }
    @keyframes foreground {
        0% { height: 0; }
        100% { height: 43vh; }
    }
}
@media(max-width:768px){
    @-webkit-keyframes foreground {
        0% { height: 0; }
        100% { height: 46.5%; }
    }
    @keyframes foreground {
        0% { height: 0; }
        100% { height: 46.5%; }
    }
}


.section{
    overflow: hidden; position: relative;
    padding: 30px 0; height: 100vh;
}
.section--about .container{
    position: relative; height: 100%;
}
.section--about .text-shape{
    position: relative; top: 15px; left: 12%;
}
.section--about .text-shape img{
    display: block; width: auto; height: 170px;
}
.section--about .title{
    display: -webkit-box; display: -ms-flexbox; display: flex;
    position: absolute; top: 50px; left: -50px;
    font-size: 60px; font-weight: 800;
}
.section--about .title span{
    display: block; position: relative;
    margin-right: 40px; padding-right: 50px; line-height: 1;
}
.section--about .title span::after{
    content: ''; position: absolute; bottom: 0; right: 0;
    width: 40px; height: 6px;
    background: #333333;
}
.section--about .pr{
    position: absolute; right: 15px; bottom: 320px;
    padding: 24px 54px 26px 0; line-height: 1.8;
    text-align: right; font-size: 18px; font-weight: 200; color: rgba(255,255,255,.6);
}
.section--about .pr::before{
    content: ''; position: absolute; top: 0; right: 0; width: 35px; height: 100%;
    border: 10px solid #ffffff;
    border-left: none;
    pointer-events: none;
}
.section--about .pr b { display: block; margin-bottom: 2px; }
.text-comparison-container{
    display: -webkit-box; display: -ms-flexbox; display: flex;
    -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column;
    -webkit-box-pack:end; -ms-flex-pack:end; justify-content:flex-end;
    position: absolute; right: 0; bottom: 0;
    width: 100%; height: 60%;
}
.text-comparison{
    display: -webkit-box; display: -ms-flexbox; display: flex;
    position: relative;
    width: 100%;
}
.text-comparison .left{
    overflow: hidden;
    width: 52%; height: 100%;
    background: #ffffff;
    -webkit-transition: all ease-out .3s; transition: all ease-out .3s;
}
.text-comparison .right{
    width: 48%;
    background: #333333;
    -webkit-transition: all ease-out .3s; transition: all ease-out .3s;
}
.text-comparison span { display: block; }
.text-comparison span img{
    max-width: none; width: auto;
}
.text-comparison:nth-child(1) span { height: 145px; }
.text-comparison:nth-child(2) span { height: 420px; }
.text-comparison:nth-child(1) span img { position: absolute; top: 35px; right: 7%; height: 110px; }
.text-comparison:nth-child(2) span img { position: absolute; top: 200px; left: 20%; height: 180px; }
@media(max-width:1200px){
    .section{
        height: auto;
    }
    .section--about{
        height: 900px;
    }
    .section--about .title { font-size: 40px; }
    .section--about .title span { margin-right: 28px; padding-right: 46px; }
    .section--about .title span::after { width: 35px; }

    .section--about .pr { font-size: 16px; }
    .section--about .pr::before { border-width: 7px; }
    .section--about .text-shape { left: 32%; }
    .section--about .text-shape img { height: 135px; }

    .text-comparison:nth-child(1) span img { right: 27%; height: 100px; }
    .text-comparison:nth-child(2) span img { left: 50%; height: 165px; }
}
@media(max-width:768px){
    .section--about .title { font-size: 30px; }
    .section--about .title span { margin-right: 20px; padding-right: 40px; }
    .section--about .title span::after { width: 30px; height: 4px; }

    .section--about .pr { bottom: 260px; padding: 24px 42px 26px 0; font-size: 14px; }
    .section--about .pr::before { border-width: 5px; }
    .section--about .text-shape { left: 42%; }
    .section--about .text-shape img { height: 90px; }

    .text-comparison .left { width: 15%; }
    .text-comparison .right { width: 85%; }
    .text-comparison:nth-child(1) span img { right: 40%; height: 95px; }
    .text-comparison:nth-child(2) span img { left: 80%; height: 115px; }
}
@media(max-width:500px){
    .section--about { height: 700px; }
    .section--about .title { left: -25%; font-size: 26px; }
    .section--about .title span { margin-right: 18px; padding-right: 36px; }
    .section--about .title span::after { width: 24px; height: 4px; }

    .section--about .text-shape img { height: 70px; }
    .section--about .pr { bottom: 180px; padding: 40px 0 26px 0; }
    .section--about .pr::before{
        width: 80px;
        height: 24px;
        border-top: 4px solid #ffffff;
        border-left: 4px solid #ffffff;
        border-right: 4px solid #ffffff;
        border-bottom: none;
    }

    .text-comparison .left { width: 30px; }
    .text-comparison .right { width: calc(100% - 30px); }
    .text-comparison:nth-child(1) span img { right: 130%; height: 65px; }
    .text-comparison:nth-child(2) span { height: 340px; }
    .text-comparison:nth-child(2) span img { left: 175%; height: 75px; }
}

.section--faculty{
    display: -webkit-box; display: -ms-flexbox; display: flex;
    -webkit-box-align: center; -ms-flex-align: center; align-items: center;
    padding: 100px 0 90px; height: auto; min-height: 100vh; background: #f9f9f9;
}
.section--faculty .container{
    width: 100%; height: 100%;
}
.main-gallery-container{
    display: -webkit-box; display: -ms-flexbox; display: flex;
    height: 100%;
}
.main-gallery-container .left{
    display: -webkit-box; display: -ms-flexbox; display: flex;
    -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column;
    -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between;
    padding-right: 20px; width: 34%;
}
.main-gallery-container .right{
    text-align: right;
}
.main-gallery-container .pr{
    position: relative; padding: 66px 0 0; line-height: 1.8;
    font-size: 18px; font-weight: 200;
}
.main-gallery-container .pr::before{
    content: ''; position: absolute; top: 0; left: 0; width: 120px; height: 30px;
    border-top: 10px solid #172a88;
    border-left: 10px solid #172a88;
    border-right: 10px solid #172a88;
    pointer-events: none;
}
.main-gallery-container .pr b { display: block; margin-bottom: 2px; }
.main-gallery-container .right{
    width: 66%;
}
.box-container { display: inline-block; max-width: 650px; width: 100%; }
.box-lists{
    display: -webkit-box; display: -ms-flexbox; display: flex;
    -ms-flex-wrap: wrap; flex-wrap: wrap;
    margin: -15px;
}
.box-list{
    padding: 15px; width: 33.33333%;
}
.box{
    position: relative; padding-top: 100%; max-width: 240px; width: 100%; max-height: 240px; height: 0;
}
.box__shape { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.box__shape::before{
    content: ''; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    animation: shape linear 30s infinite;
    background: url('/child/img/icon/round-dotted-border.svg') no-repeat center;
}
.box__contents{
    display: -webkit-box; display: -ms-flexbox; display: flex;
    -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column;
    -webkit-box-align: center; -ms-flex-align: center; align-items: center;
    -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;
    position: absolute; top: 0; left: 0; padding: 14px; width: 100%; height: 100%;
    text-align: center; font-size: 14px;
}
.box__name{
    display: block; width: 100%; line-height: 1; font-size: 24px; font-weight: 600; color: #172a88;
}
.box__type{
    display: -webkit-box; display: -ms-flexbox; display: flex;
    -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;
    margin-top: 14px; width: 100%;
}
.box__type span { display: block; line-height: 0.8; }
.box__type span:not(:last-child){
    margin-right: 12px; padding-right: 12px;
    border-right: 1px solid #333333;
}
@keyframes shape {
    100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}
@media(min-width:1201px){
	.box-list:nth-child(4),
    .box-list:nth-child(5),
    .box-list:nth-child(6),
    .box-list:nth-child(10),
    .box-list:nth-child(11),
    .box-list:nth-child(12){
        -webkit-transform: translateX(-80px); transform: translateX(-80px);
    }
    .box-list:nth-child(7),
    .box-list:nth-child(8),
    .box-list:nth-child(9){
        -webkit-transform: translateX(-180px); transform: translateX(-180px);
    }
}
@media(max-width:1200px){
    .section--faculty { padding: 140px 0 120px; min-height: auto; }
    .main-gallery-container .pr { font-size: 16px; }
    .box__contents { font-size: 13px; }
    .box__name { font-size: 22px; }
}
@media(max-width:768px){
    .main-gallery-container{
        -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column;
    }
    .main-gallery-container .left { padding: 0 0 35px; width: 100%; }
    .main-gallery-container .right { width: 100%; text-align: center; }
    .main-gallery-container .pr { padding-top: 50px; font-size: 14px; }
    .main-gallery-container .pr::before { border-width: 5px; }
    .box-container { }
    .box-lists { margin: -5px; }
    .box-list { padding: 5px; }
    .box__contents { font-size: 12px; }
    .box__name { font-size: 18px; }
}
@media(max-width:500px){
    .section--faculty { padding: 100px 0 80px; }
    .box__contents { font-size: 10px; }
    .box-lists { margin: -5px -15px; }
    .box__name { font-size: 16px; }
    .box__type { margin-top: 10px; }
    .box__type span:not(:last-child) { margin-right: 6px; padding-right: 6px; }
}


.section--curriculum{
    display: -webkit-box; display: -ms-flexbox; display: flex;
    -webkit-box-align: center; -ms-flex-align: center; align-items: center;
    padding: 100px 0; height: auto; min-height: 100vh;
}
.section--curriculum .container{
    width: 100%;
}
.main-curriculum-head{
    display: -webkit-box; display: -ms-flexbox; display: flex;
    -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between;
}
.main-curriculum-head .title{
    margin: -5px 0 0; line-height: 1; font-family: 'Montserrat', NotoKR; font-size: 60px; font-weight: 800;
}
.curriculum-category{
    display: -webkit-box; display: -ms-flexbox; display: flex;
    -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column;
    -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end;
}
.curriculum-category .mobile-scroll-inner{
    min-width: auto;
}
.curriculum-category .tabs{
    display: -webkit-box; display: -ms-flexbox; display: flex; width: 100%;
}
.curriculum-category .tabs li{
    flex: 1 1;
    position: relative; padding: 0 30px;
    font-family: 'Montserrat', NotoKR; font-size: 18px; font-weight: 200;
}
.curriculum-category .tabs li:first-child { padding-left: 0; }
.curriculum-category .tabs li:last-child { padding-right: 0; }
.curriculum-category .tabs li:not(:last-child)::after{
    content: ''; position: absolute; top: 0; right: 0; bottom: 0;
    margin: auto; width: 1px; height: 14px; background: #d6d6d6;
}
.curriculum-category .tabs a.active{
    color: #172a88; font-weight: 800;
}
.curriculum-category .selects{
    display: -webkit-box; display: -ms-flexbox; display: flex;
    margin: 40px -10px 0; max-width: 420px; width: 100%;
}
.curriculum-category .selects select{
    flex: 1 1; margin: 0 10px; height: 50px; font-size: 16px; font-weight: 800;
}

.main-curriculum-body{
    margin-top: 100px;
}
@media(max-width:1200px){
    .section--curriculum { padding: 140px 0; min-height: auto; }
    .main-curriculum-head .title { font-size: 40px; }
    .curriculum-category .tabs li { font-size: 16px; }
    .curriculum-category .selects { margin: 40px -5px 0; }
    .curriculum-category .selects select { margin: 0 5px; font-size: 15px; }
}
@media(max-width:768px){
    .main-curriculum-head{
        -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column;
    }
    .main-curriculum-head .title { font-size: 20px; }
    .curriculum-category{
        -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start;
        margin-top: 35px;
    }
    .curriculum-category .mobile-scroll-container { width: 100%; }
    .curriculum-category .mobile-scroll-inner { min-width: 450px; }
    .curriculum-category .tabs li { padding: 0 20px; text-align: center; font-size: 15px; }
    .curriculum-category .selects { margin-top: 20px; }
    .curriculum-category .selects select { height: 40px; font-size: 14px; }
    .main-curriculum-body { margin-top: 60px; }
}
@media(max-width:500px){
    .section--curriculum { padding: 100px 0; }
    .main-curriculum-body { margin-top: 45px; }
}