@charset 'utf-8';

@font-face {
    font-family:'NotoSansKR';
    font-style:normal;
    font-weight:300;
    src:url('fonts/NotoSansKR-Light.woff') format('woff');
}
@font-face {
    font-family:'NotoSansKR';
    font-style:normal;
    font-weight:500;
    src:url('fonts/NotoSansKR-Medium.woff') format('woff');
}
@font-face {
    font-family:'NotoSansKR';
    font-style:normal;
    font-weight:700;
    src:url('fonts/NotoSansKR-Bold.woff') format('woff');
}
@font-face {
    font-family:'GalanoGrotesque';
    font-style:normal;
    font-weight:300;
    src:url('fonts/GalanoGrotesque-Light.woff') format('woff');
}
@font-face {
    font-family:'GalanoGrotesque';
    font-style:normal;
    font-weight:500;
    src:url('fonts/GalanoGrotesque-Medium.woff') format('woff');
}
@font-face {
    font-family:'GalanoGrotesque';
    font-style:normal;
    font-weight:600;
    src:url('fonts/GalanoGrotesque-SemiBold.woff') format('woff');
}
@font-face {
    font-family:'GalanoGrotesque';
    font-style:normal;
    font-weight:700;
    src:url('fonts/GalanoGrotesque-Bold.woff') format('woff');
}

/* common */
html{scroll-behavior:smooth;}
body{margin:0; padding:0; font-family:'NotoSansKR'; font-size:29px; font-weight:300; color:#333; line-height:1.2; -webkit-text-size-adjust:none;}
a,
a:hover,
a:focus{color:inherit; text-decoration:none;}
hr, caption, legend{display:none;}
colgroup{background:none;}
h1, h2, h3, h4, h5, h6{font-size:100%; line-height:1.2}
h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, form, fieldset, table, caption, tbody, tfoot, thead, tr, th, td, figure, figcaption, img{margin:0; padding:0; border:0;}
b, strong{font-weight:700;}
ul, ol, li{list-style:none;}
table{clear:both; width:100%; border-spacing:0; border:0;}
p, div, th, td{font-size:100%;}
img,input,select,textarea{vertical-align:middle;}
input.type-image, input.type-radio{border:0 none;}
input,select,textarea, button{font-family:'NotoSansKR'; font-size:100%;}
textarea{resize:none;}
input[type="submit"], button{cursor:pointer;}
button{outline:none;}
button::-moz-focus-inner{padding: 0; border:0;}
.blind{position:absolute; top:0; left:-9999px; width:0; height:0; font-size:0; line-height:0;}
.lock{overflow:hidden;}
.gg{font-family:'GalanoGrotesque';}

.header{position:fixed; top:0; left:0; z-index:2; display:flex; justify-content:space-between; align-items:center; width:100%; height:150px; box-sizing:border-box; padding:0 50px; transition:all .2s;}
.header h1{width:156px; height:50px; overflow:hidden; color:transparent; background:url(../images/logo.png) no-repeat 0 center;}
.header h1 a{display:block; width:156px; height:50px;}
.header .nav{font-size:17px; font-family:'GalanoGrotesque'; font-weight:600;}
.header .nav a{margin:0 20px; transition:all .2s;}
.header .nav a.active{color:#999;}
.header .sns a{display:inline-block; width:24px; height:21px; overflow:hidden; margin:0 5px; text-indent:-9999px;}
.header .sns .youtube{background:url(../images/ico_youtube.png) no-repeat center;}
.header .sns .cafe{background:url(../images/ico_cafe.png) no-repeat center;}
.header.fixed{height:52px; background:#333;}
.header.fixed h1{background:url(../images/logo_w.png) no-repeat 0 center;}
.header.fixed .nav a{color:#fff;}
.header.fixed .nav a.active{color:#999;}
.header.fixed .sns .youtube{background:url(../images/ico_youtube_w.png) no-repeat center;}
.header.fixed .sns .cafe{background:url(../images/ico_cafe_w.png) no-repeat center;}

.footer{display:flex; justify-content:space-between; align-items:center; padding:80px 50px; background:#000;}
.footer .logo{font-family:'GalanoGrotesque'; font-size:42px; font-weight:600; color:#fff;}
.footer .logo span{font-family:'NotoSansKR';}
.footer .site-info{font-size:14px; color:#fff; line-height:1.6; text-align:right;}
.footer address{font-style:normal;}
.footer .copyright{margin:10px 0 0;}
.footer .ibk{margin:35px 0 0;}
.footer .ibk img{width:72px;}

.contents{position:relative;}
.contents .inner{position:relative; width:100%; max-width:1920px; margin:0 auto;}
.contents section{position:relative; width:100%;}
.contents section .inner{width:1270px; box-sizing:border-box; padding:120px 0 300px;}

.btn-form{position:fixed; top:50%; left:-40px; z-index:2; font-size:17px; font-weight:700; transform:rotate(-90deg) translateY(-50%);}

.sub-title{position:relative; margin:0 0 50px;}

.btn-link{position:absolute; top:15px; right:0; width:230px; height:53px; box-sizing:border-box; font-family:'GalanoGrotesque'; font-size:17px; font-weight:600; text-align:center; line-height:43px; border:5px solid #333; background:#fff; transition:all .2s;}
.btn-link:hover{color:#fff; background:#333;}

.btn-top{position:sticky; bottom:50px; right:50px; float:right; display:block; width:53px; height:30px; overflow:hidden; margin:0 0 40px;visibility:hidden; text-indent:-9999px; border:0; background:none; opacity:0; transition:all .2s;}
.btn-top:after{position:absolute; top:8px; left:8px; width:37px; height:37px; box-sizing:border-box; content:''; border-top:5px solid #333; border-left:5px solid #333; transform:rotate(45deg);}
.btn-top.active{visibility:visible; opacity:1;}

.contents .kv{position:relative;}
.contents .kv .bg{position:absolute; bottom:0; left:0; width:100%; height:623px; visibility:hidden; background:url(../images/img_kv.jpg) no-repeat center bottom;}
.contents .kv .inner{position:relative; height:900px; padding:239px 0 0;}
.kv .txt{font-size:64px; font-weight:500;}
.kv .txt p:not(:first-child){margin-top:65px;}
.kv .course{position:absolute; left:0; bottom:50px; font-size:17px; font-weight:700; font-family:'GalanoGrotesque';}

.contents:after{clear:both; display:block; content:'';}
.contents .intro{font-size:64px;}
.contents .intro .inner{padding-top:200px;}
.intro .txt{font-weight:300; line-height:1.1; letter-spacing:-0.054em;}
.intro .txt b{font-weight:500;}
.intro .how{padding:400px 0; font-weight:300; text-align:center;}
.intro .how b{position:relative; display:inline-block; padding:0 18px; font-weight:300;}
.intro .how b .line{position:absolute; top:36%; left:0; z-index:-1; width:100%; height:27px; content:''; background:rgba(255, 242, 0, .3);}
.intro .how span{position:relative; z-index:2;}
.intro .how .em{font-weight:500;}
.intro .how p{margin:40px 0 0; font-size:29px;}
.intro strong{display:block; font-weight:300;}
.intro strong span{font-weight:500;}

.curriculum .article{position:relative; margin:0 -96px 0 -55px; padding:0 55px;}
.curriculum .article:before{position:absolute; top:10px; left:0; width:5px; height:100%; content:''; background:#999;}
.curriculum .article + .article{margin-top:210px;}
.curriculum .article .bar{position:absolute; top:10px; left:0; width:5px; height:0;}
.curriculum .article.orientation .bar{background:#fff200;}
.curriculum .article.layout .bar{background:#329073;}
.curriculum .article.color .bar{background:#ea5b50;}
.curriculum .article.practical .bar{background:#027bf2;}
.curriculum .article.three .bar{background:#575da4;}
.curriculum .article h3{position:relative; display:inline-block; margin:0 0 0 -10px; padding:0 10px; font-size:64px; font-weight:700; letter-spacing:-0.04em;}
.curriculum .article h3 .line{position:absolute; top:36%; left:0; z-index:-1; width:100%; height:27px; content:''; background:rgba(0, 0, 0, .3);}
.curriculum .article.three h3{font-weight:600;}
.curriculum .article.orientation h3 .line{background:rgba(255, 242, 0, .3);}
.curriculum .article.layout h3 .line{background:rgba(50, 144, 115, .3);}
.curriculum .article.color h3 .line{background:rgba(234, 91, 80, .3);}
.curriculum .article.practical h3 .line{background:rgba(2, 123, 242, .3);}
.curriculum .article.three h3 .line{background:rgba(87, 93, 164, .3);}
.curriculum .article h4{margin:30px 0; font-size:64px; font-weight:300; letter-spacing:-0.06em;}
.curriculum .article strong{display:block; margin:0 0 10px; font-size:29px; font-weight:700; letter-spacing:-0.04em;}
.curriculum .article .past{color:#c6c6c6;}
.curriculum .article.layout strong{color:#329073;}
.curriculum .article.color strong{color:#ea5b50;}
.curriculum .article.practical strong{color:#027bf2;}
.curriculum .article.three strong{color:#575da4;}
.curriculum .article > div{position:relative;}
.curriculum .article > div + div{margin-top:120px;}
.curriculum .article p{font-weight:300; font-size:24px; line-height:1.5; letter-spacing:-0.04em;}
.curriculum .article p + p{margin:35px 0 0;}
.curriculum .article .img{position:absolute; top:-40px; right:-55px;}
.curriculum .curriculum-list{padding:0 0 200px;}
.curriculum .txt{margin:220px 0 500px; font-size:29px; font-weight:300; text-align:center;}
.curriculum .txt p + p{margin:35px 0 0;}
.curriculum .txt b{font-weight:500;}
.curriculum .txt span{position:relative;}
.curriculum .txt .line{position:absolute; top:36%; left:0; z-index:-1; width:100%; height:17px; content:''; background:rgba(255, 242, 0, .3);}
.curriculum .etc{display:flex; margin:0 -40px 450px; font-size:14px; font-weight:300; line-height:1.5;}
.curriculum .etc > div{position:relative; padding:0 0 0 70px;}
.curriculum .etc .bar{position:absolute; top:10px; left:0; width:5px; height:100%; background:#333;}
.curriculum .etc .review{margin-right:120px;}
.curriculum .etc h3{font-size:60px;}
.curriculum .etc .cate{margin:0 0 55px; font-size:21px;}
.curriculum .review .list > div:not(:first-child){margin-top:22px;}
.curriculum .review .list b{font-family:'GalanoGrotesque';}
.curriculum .history .list{margin:24px 0 60px;}
.curriculum .history .list p + p{margin:20px 0 0;}
.curriculum .youtube{position:relative;}

.class .info{margin:0 0 20px; font-size:64px; font-weight:500; line-height:1.4;}
.class .info li{margin-right:-140px;}
.class .info span{margin-right:-20px; color:#999; font-weight:700;}
.class .info del{color:#999;}
.class .info .short{margin:0 -.45em 0 0; letter-spacing:.45em;}
.class p{color:#999;}
.class p + p{margin:32px 0 0;}
.class p span{color:#333;}
.class .date{margin:0 0 80px; font-size:40px; font-weight:600;}
.class .em{margin:400px 0 0; font-size:64px; text-align:center; color:#333; letter-spacing:-.04em;}
.class .em b{font-weight:500;}

.seminar .sub-title{margin:0 0 180px;}
.seminar .sort{display:flex; justify-content:space-between; margin:0 -30px 450px;}
.seminar .sort dl{position:relative; width:50%; box-sizing:border-box; padding:0 0 0 65px; font-size:64px; font-weight:600;}
.seminar .sort dl:before{position:absolute; top:10px; left:0; width:5px; height:calc(100% - 10px); content:''; background:#333;}
.seminar .sort dd{font-weight:500; color:#999; letter-spacing:-.04em;}
.henceforth h2{margin:0 0 420px; font-size:64px; font-weight:300;}
.henceforth h2 b{font-weight:500;}
.henceforth h3{margin:0 0 30px; font-size:64px;}
.henceforth > div{position:relative; margin:0 -55px; padding:0 55px; letter-spacing:-0.04em; line-height:1.4;}
.henceforth > div:before{position:absolute; top:10px; left:0; width:5px; height:calc(100% - 10px); content:'';}
.henceforth > div + div{margin-top:210px;}
.henceforth .expert:before{background:#ea5b50;}
.henceforth .rendering:before{background:#329073;}
.henceforth .ai:before{background:#575da4;}
.henceforth p + p{margin:32px 0 0;}

.contents .contact .inner{padding-bottom:150px; font-size:26px; font-weight:700; line-height:1.4;}
.contact h2{margin:0 0 40px; font-size:54px;}
.contact .transportation{margin:40px 0 95px;}

.modal{position:fixed; top:0; left:0; z-index:10; width:100%; height:100%; box-sizing:border-box; padding:10vh 0; overflow:auto; visibility:hidden; background:rgba(0, 0, 0, .2); opacity:0; transition:all .2s;}
.modal.active{visibility:visible; opacity:1;}
.modal-inner{position:relative; top:0; left:50%; width:1300px; height:1200px; box-sizing:border-box; padding:0 65px; background:#fff; transform:translateX(-50%);}
.modal-header{position:relative; padding:50px 0 0; border-bottom:5px solid #333;}
.modal-header h1{font-size:94px; font-weight:700; line-height:.7;}
.modal-header .disc{padding:42px 0 20px; font-size:24px; font-weight:300;}
.modal-header .disc span{font-family:'GalanoGrotesque'; font-weight:300;}
.modal-header .btn-close{position:absolute; top:50px; right:0; width:65px; height:65px; overflow:hidden; text-indent:-9999px; border:0; background:none;}
.modal-header .btn-close:before{position:absolute; top:-10px; left:30px; width:5px; height:85px; content:''; background:#000; transform:rotate(45deg);}
.modal-header .btn-close:after{position:absolute; top:-10px; left:30px; width:5px; height:85px; content:''; background:#000; transform:rotate(-45deg);}
.modal-body .request{padding:20px 0 0; border-top:5px solid #333;}
.modal-body .request p{font-size:24px;}
.modal-body .request a{font-family:'GalanoGrotesque';}
.seminar-slide{overflow:hidden;}
.swiper-pagination-bullets.swiper-pagination-horizontal{position:absolute; bottom:46px; left:0; text-align:center;}
.slide-paging .swiper-pagination-bullet{width:116px; height:6px; font-size:0; border-radius:0; background:#999; opacity:1; transition:background .2s;}
.slide-paging .swiper-pagination-bullet.swiper-pagination-bullet-active{background:#333;}

.animated{animation-duration:1s; animation-fill-mode:both;}
@keyframes fadeInUp{
    0% {
        opacity:0;
        transform:translateY(50px);
    }
    100% {
        opacity:1;
        transform:translateY(0);
    }
}
.fadeInUp{animation-name:fadeInUp;}
@keyframes fadeInDown{
    0% {
        opacity:0;
        transform:translateY(-50px);
    }
    100% {
        opacity: 1;
        transform:translateY(0);
    }
}
.fadeInDown{animation-name:fadeInDown;}
@keyframes fadeInRight {
    0% {
        opacity:0;
        transform:translateX(50px);
    }
    100% {
        opacity:1;
        transform:translateX(0);
    }
}
.fadeInRight{animation-name:fadeInRight;}
@keyframes extendWidth{
    0% {
        width:0;
    }
    100% {
        width:100%;
    }
}
.extendWidth{animation-name:extendWidth;}
@keyframes extendHeight{
    0% {
        height:0;
    }
    100% {
        height:100%;
    }
}
.extendHeight{animation-name:extendHeight;}