@charset "utf-8";

/* 
 * main CSS Document
 * KOWEB
 */

.main-board{border-bottom:1px solid var(--color-line);}
.main-board *{box-sizing:border-box; word-break:keep-all;}

.main-empty{width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;}
 
.main-board{position:relative; padding-right:540rem; box-sizing:border-box;}
.main-board h3{ font-size:30rem;}
.main-slide{width: 100%; border-right: 1px solid var(--color-line);}

.main-top__visual{ width: 100%; position:relative; height:698rem; overflow: hidden; border-bottom: 1px solid var(--color-line); box-sizing: border-box;}
.main-top__visual .main-visual__list li{position:relative; height:698rem; width: 100%;}
.main-top__visual .main-visual__list li{background-repeat:no-repeat; background-position:50% 50%; background-size:cover;}
.main-top__visual .main-visual__text{position:absolute; padding-left:64rem; top:60rem; width:100%; box-sizing:border-box;}
.main-visual__text{display:none !important;}
.main-visual__text > *{display: block; color: #fff;}
.main-visual__text img{display:block; margin-bottom:10rem; height:78rem;}
.main-visual__text h2{font-size:var(--fs55); display:none !important;}
.main-top__visual #main-pager{position: absolute;left: 64rem;bottom: 83px;z-index: 111;}
.main-top__visual #main-pager a {width: 12rem; height: 12rem; background-color:transparent; box-sizing: border-box; border:2px solid #fff; border-radius: 40rem; transition: all 0.3s ease 0s;}
.main-top__visual #main-pager {display: flex; gap: 20rem;}
.main-top__visual #main-pager a.active {background-color: #fff; }
.main-top__visual #main-pager a:hover {opacity: 1;}

.main-top__guide{width: 540rem; box-sizing: border-box; height:698rem; position: absolute; right: 0; top: 0; z-index: 2;}
.main-top__guide ul li, .main-top__guide ul li a{position: relative;transition: all .3s;}
.main-top__guide .li{border-bottom: 1px solid var(--color-line); height: calc(100% - 98rem * 4); position: relative; display: flex; flex-direction: column-reverse; padding: 45rem 64rem; box-sizing: border-box;} 
.main-top__guide .li .mark{width:75rem; top:50rem; left: 64rem;}
.main-top__guide .li img{position: absolute;}
.main-top__guide .li strong{display: flex; font-size: 28rem; font-weight: 600; transition: all .3s;}
.main-top__guide .li strong .link_arrow{width: 20rem; margin-left: 14rem;  transition: all .3s;}
.main-top__guide .li p{font-size: 16rem; line-height: 1.68; margin-top: 7rem;}
.main-top__guide .li a:hover strong{color: var(--color-point); }
.main-top__guide .li a:hover .link_arrow{fill: var(--color-point);}
.main-top__guide ul{position: absolute; bottom: 0; width: 100%; left: 0;}
.main-top__guide ul li a{display: flex;width: 100%; align-items: center; justify-content: space-between; height: 98rem;  }
.main-top__guide ul li a *{transition: all .3s;}
.main-top__guide ul li a em{position: relative; padding-left: 49rem; box-sizing: border-box; font-weight: 700; font-size: 20rem;}
.main-top__guide ul li a em svg{position: absolute; left: 0; top: 50%; transform: translateY(-50%); width:32rem;}
.main-top__guide ul li a:hover *{color: var(--color-point); fill: var(--color-point);}
.main-top__guide ul li + li{border-top: 1px solid #ddd;}
.main-top__guide ul li a{padding:0 64rem;box-sizing: border-box; }
.main-top__guide .link_btn{width: 15rem;}

/* 버튼 */
.all-view{width: 82rem; height: 31rem; border-radius: 40rem; box-sizing: border-box; font-size: 15rem; line-height: 31rem; text-align: center; border:1px solid #ddd; color: #a6a6a6; font-weight: 400;}
.slide-nav span{position: relative; cursor: pointer;}
.slide-nav span + span{margin-left: 40rem;}
.slide-nav span + span::before{content: ""; position: absolute; width: 1px; height: 15rem; background-color: #212121; opacity: 0.54; left: -20rem; top: 0rem;}
.slide-nav span svg{width: 20rem;}
.slide-nav .prev svg{transform: rotate(-180deg);}

/* 교육신청 */
.main-edu{height: 438rem; overflow: hidden; width: 100%; display: flex;}
.main-edu__base{background-color: var(--color-black);width: 23.7%; position: relative; z-index: 10; box-sizing: border-box; padding: 0 62rem; display: flex; flex-direction: column; justify-content: center;}
.main-edu__base *{color: #fff;}
.main-edu__base .all-view{border:1px solid #fff; color: #fff; margin-top: 30rem; width: 92rem; }
.main-edu__base .main-edu__tit i{font-size:var(--fs16); color:var(--color-point); font-family:var(--lang-en); line-height:1; font-weight:bold;}
.main-edu__nav{margin-top: 90rem;/*  position: absolute;  */}
.main-edu__nav span svg{fill: #fff;}
.main-edu__nav span + span::before{background-color: #fff;}
.main-edu__list{width: 76.3%;}
.main-edu__list .main-edu__item{ border-right:1px solid #ddd;}
.main-edu__list a{display: block; width: 100%; height: 100%; padding:60rem 34rem; box-sizing: border-box; position: relative;}
.main-edu__item .thumb{width:100%; aspect-ratio:57/36; border:1px solid var(--color-line); box-sizing:border-box;}
.main-edu__item .thumb img{display:block; width:100%; height:100%; object-fit:cover;}
.main-edu__item .title span{display:inline-block; padding:5rem 10rem; font-size:16rem; line-height: 1; color:#fff; font-weight:600; margin:15rem 0 10rem; border-radius:5rem; background:var(--color-point);}
.main-edu__item .title span.deadline{background:#aaa;}
.main-edu__item .title em{transition: all .3s; font-size: 20rem; font-weight: 600; color: var(--color-black); line-height: 1.5; display: -webkit-box; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: break-all;}
.main-edu__item .period{margin-top:25rem;}
.main-edu__item .period dl{display: flex; align-items: center;}
.main-edu__item .period dl + dl{margin-top: 7rem;}
.main-edu__item .period dt{font-size:15rem; color: #999; box-sizing: border-box; font-weight: 500; }
.main-edu__item .period dd{color: #303030; font-size:15rem; padding-left: 10rem; box-sizing: border-box;}

/* 포트폴리오 */
.main-portfolio{width: 100%; overflow: hidden; border-top: 1px solid var(--color-line); box-sizing: border-box; padding: 60rem 64rem;}
.main-portfolio .title{position: relative; display: flex; align-items: center; margin-bottom: 17rem;}
.main-portfolio .title .slide-nav{position: absolute; right: 0;}
.main-portfolio .title .all-view{margin-left: 23rem; color: #a6a6a6;}
.main-portfolio__list .image{border:1px solid var(--color-line); position: relative; width: 100%; padding-bottom:67.84%; box-sizing: border-box;}
.main-portfolio__list img{width: 100%; height: 100%; object-fit: cover; position: absolute; left: 0; top: 0; object-position: 50% 50%;}
.main-portfolio-wrap{overflow: hidden;}
.main-portfolio-wrap .main-empty{min-height: 314rem;}
.main-portfolio__item strong{margin-top: 19rem; display: -webkit-box;  overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: 1;  -webkit-box-orient: vertical; word-break: break-all; font-size: 20rem; font-weight: 600; color: var(--color-black);}

.main-news{position: absolute;right: 0;top: 697rem; box-sizing: border-box; padding: 60rem 64rem; border-top: 1px solid var(--color-line);width: 540rem;box-sizing: border-box;}
.main-news .main-empty{min-height: 200rem;}
.main-news .all-view{color: #a6a6a6;}
.main-news .title{display: flex; align-items: center; justify-content: space-between; margin-bottom: 19rem;}
.main-news__list li a{display:block; padding: 40rem 0;}
.main-news__list li + li{border-top: 1px solid #ddd;}
.main-news__list a strong,.main-news__list a p{display: -webkit-box;  overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: 1;  -webkit-box-orient: vertical; word-break: break-all;   color: var(--color-black); }
.main-news__list a strong{font-size: 20rem; font-weight: 600;}
.main-news__list a span{display: block; font-size: 14rem; color: #999;}
.main-news__list a .image{position: relative; width: 100%;  border:1px solid var(--color-line); box-sizing: border-box; overflow: hidden;}
.main-news__list a img{width: 100%; height: 100%; position: absolute; left: 0; top: 0; object-fit: cover; object-position: 50% 50%;}
.main-news__list li:nth-child(1) a{padding-top: 0; display: block;}
.main-news__list li:nth-child(1) a .image{padding-bottom: 62.19%;}
.main-news__list li:nth-child(1) a strong{margin-top: 25rem;}
.main-news__list li:nth-child(1) a p{margin-top: 4rem;}
.main-news__list li:nth-child(1) a span{margin-top: 18rem;}
.main-news__list li:not(:nth-child(1)) a .image{display:none;}
.main-news__list li:not(:nth-child(1)) a span{margin-top: 16rem;}

.main-faq{display:flex; align-items:center; justify-content:center; gap:15rem; position:absolute; right:0; bottom:0; width:540rem; height:120rem; background:url('/images/main/main_faq_bg.jpg')no-repeat center/cover; font-size:var(--fs20); color:#fff !important; line-height:1; font-weight:bold; border-top:1px solid var(--color-line);}
.main-faq img{display:block; width:30rem;}


@media (hover: hover) {
    .main-edu__item:hover .title em{opacity: 0.5;}
}
@media (min-width:2000px){}
@media all and (max-width:1860px){

    .main-board{padding-right: 26%;}
    .main-news{width: 26%; padding: 64rem 44rem;}
    .main-top__guide{width: 26%;}
    .main-top__guide .li{padding: 45rem 44rem;}
    .main-top__guide ul li a{padding:  0 44rem;}
    .main-top__guide .li .mark{top:30rem; left:44rem;}
    .main-portfolio{padding: 60rem 44rem;}
    .main-edu__base{padding: 0 44rem;}
    
    .main-faq{width:26%;}
} 
 @media all and (max-width:1640px){
    .main-news{padding: 44rem;}
     
    .main-edu{height: 420rem;}
    .main-edu__list a{padding:40rem 20rem;}
     
    .main-portfolio{padding: 40rem 44rem;}
     
     .main-news__list li a{padding:30rem 0;}
   
 }
@media all and (max-width:1560px){
    .main-top__guide .li{padding:45rem 44rem 30rem;}
    .main-top__guide .li p > br{display:none;}
}
 @media all and (max-width:1440px){
    .main-news__list li:not(:nth-child(1)) a .image{width: 80rem;}
    .main-news__list li:not(:nth-child(1)) a .info{width: calc(100% - 80rem);}
 }
@media all and (max-width:1399px){
    .main-edu{height:450rem;}
    .main-edu__list a{padding:40rem;}
}
 @media all and (max-width:1024px){
    .main-board{width: 100%; padding-right: 0;}

    .main-top__visual,.main-top__visual .main-visual__list li{height: 580rem;}

    .main-slide{border-right: 0;}
    .main-top__guide,.main-news{position: relative; top: 0;width: 100%;}
    .main-top__guide{height: auto; border-bottom: 1px solid var(--color-line); border-left: 0;}
    .main-top__guide ul{display: flex; position: relative;}
    .main-top__guide ul li a em{padding-left: 40rem; font-size: 18rem;}
    .main-top__guide ul li{flex: 1;}
    .main-top__guide ul li + li{border-top: 0; border-left: 1px solid #ddd;}
    .main-top__guide ul li a{padding: 0 34rem;}
    .main-top__guide .li {padding: 34rem; border-bottom: 1px solid #ddd;}
    .main-top__guide .li strong{font-size: 24rem;}
    .main-top__guide .li .small{left: 0; top: 0; position: relative;}
    .main-top__guide .li .mark{right: 20rem; top: 50%; transform: translateY(-50%);}
    .main-top__guide .li a{display: flex; }
    .main-top__guide .li a div{width:calc(100% - 40rem); box-sizing: border-box; padding-left:110rem;}

     .main-edu{height:430rem;}
    .main-edu__base{padding: 0 34rem; width: 30%;}
    .main-edu__list{width: 70%;}
     .main-edu__list a{padding:40rem 25rem;}
     
    .main-portfolio,.main-news{padding: 34rem;}
    .main-news__list{display: flex; gap:40rem;}
    .main-news__list li + li{border-top: 0;}
    .main-news__list li{width:calc((100% - 80rem) / 3) !important;}
    .main-news__list li:not(:nth-child(1)) a{display: block;}
    .main-news__list li:not(:nth-child(1)) a .image{display:block; width: 100%; padding-bottom: 62.19%;}
    .main-news__list li a{padding: 0;}
    .main-news__list li:not(:nth-child(1)) a .info{padding-left: 0; width: 100%;}
    .main-news__list a strong,.main-news__list li:nth-child(1) a strong{margin-top: 18rem;}
    .main-news__list a p{margin-top: 4rem;}
    
     .main-faq{position:relative; width:100%; height:80rem;}
 }
 @media all and (max-width:860px){
     .main-visual__text img{height:55rem;}
     
    .main-top__guide .li{border-bottom: none;}
    .main-top__guide ul{flex-wrap: wrap;}
    .main-top__guide ul li{flex: none; width: 50%;box-sizing: border-box; border-top: 1px solid #ddd !important;}
    .main-top__guide ul li + li{border-top: inherit;}
    .main-top__guide ul li a{height: 74rem;}
     .main-top__guide ul li a em svg{width:28rem;}
    .main-top__guide .li strong{font-size: 20rem;}
    .main-top__guide .li p{padding-right: 25rem;}

    .main-edu{height:360rem;}
    .main-edu__base{width:30%;}
    .main-edu__list{width:70%;}
    .main-edu__item .title em{font-size: 18rem;}
    .main-edu__item .title span{font-size:14rem; margin-bottom: 5rem;}
     .main-edu__item .period{margin-top:20rem;}
    
    .main-board h3{font-size: 26rem;}
     .main-news__list{gap:30rem;}
    .main-news__list li {width: calc((100% - 60rem) / 3) !important;}
     .main-news__list a strong{font-size:17rem;}
    
 }
 @media all and (max-width:540px){
    .main-top__visual,.main-top__visual .main-visual__list li{height: 480rem;}
    .main-top__visual .main-visual__text{top:50rem; padding: 0 22rem;}
    .main-top__visual #main-pager{left: 28rem;}
    .main-top__visual .main-visual__text{padding-left: 28rem;}
     .main-visual__text img{height:auto; width:85%;}
     .main-visual__text h2{line-height:1.4;}

    .all-view{font-size: 14rem; width: 74rem; height: 28rem; line-height: 27rem;}

    .main-top__guide ul li a{padding: 0 14rem; height: 62rem;}
    .main-top__guide ul li a em{font-size: 15rem; padding-left:30rem;}
    .main-top__guide .link_btn{width: 11rem;}
    .main-top__guide ul li + li{border-top: 1px solid #ddd;}
     .main-top__guide ul li a em svg{width:20rem;}
    .main-top__guide .li{padding:100rem 20rem 20rem;}
    .main-top__guide .li a{display: block;}
    .main-top__guide .li a div{width: 100%; padding-left: 0;}
    .main-top__guide .li strong{font-size: 18rem; font-weight: 800;}
    .main-top__guide .li p{font-size: 14rem;}
    .main-top__guide .li .mark{width:60rem; left:20rem; top:20rem; transform: none;}
    .main-top__guide .li p{padding-right: 0; margin-top: 10rem; line-height:1.6;}

    .main-edu{/* flex-direction: column; */ height: auto;}
    .main-edu__base{width: 140rem; padding: 28rem 20rem; display: flex; flex-direction: column; flex-wrap: wrap; position: relative; justify-content: flex-start;}
    .main-edu__base .all-view{margin-top: 20rem;}
    .main-edu__nav{left: 20rem; bottom: 22rem; position: absolute;}
    .main-board h3{font-size: 23rem; line-height: 1.2; margin-top: 4rem;}
    .main-edu__list a{padding:34rem 15rem; width: 100%;}
    .main-edu__list{ width: calc(100% - 140rem);}
    .main-edu__list .main-schedule__item{border-right: 0;}
    .main-edu__item .title span{font-size: 14rem;}
    .main-edu__item .period{margin-top: 24rem;}
    .main-edu__base .all-view{font-size: 14rem; width: 77rem;}
    .main-edu__item .period dt{font-size:14rem;}
    .main-edu__item .period dd{font-size: 14rem;}
    .main-edu__item .title em{line-height: 1.4; font-size: 16rem;}
    .main-edu__item .title span{margin-bottom: 5rem;}
    .main-edu__nav{margin-top: 0;}

    .slide-nav span svg{width: 16rem;}
    .slide-nav span + span{margin-left: 30rem;}
    .slide-nav span + span::before{height: 13rem; left: -17rem; top: 3rem;}
    .main-portfolio, .main-news{padding: 34rem 20rem;}
    .main-portfolio__item strong{font-size: 16rem; margin-top: 12rem;}

    .main-news__list li{width: 100% !important;}
    .main-news__list{flex-direction: column;}
    .main-news__list a strong{font-size:18rem;}
     .main-news__list a span{margin-top:10rem !important;}
     
     .main-faq{height:65rem; gap:10rem;}
     .main-faq img{width:22rem;}
     


 }
 @media all and (max-width:480px){}
 @media all and (max-width:360px){}

 /* 레이어팝업 */
.layerpop-area{--sizePop:500rem;--color-white:#fff;position:relative;}
.layerpop-area .layerPop{position:absolute; z-index:30; left:100rem; top:100rem; width:var(--sizePop); border-width:0; border-radius:30rem; box-shadow:0 40rem 30rem rgba(0,0,0,0.3); /* transform:translateY(-50%); */ }
.layerpop-area .layerPop .swiper{height:var(--sizePop);}
.layerpop-area .layerPop img{object-fit:contain; width:100%; max-width:inherit; height:100%;}
.layerpop-area .layerPop .btn{padding:0; background-color:transparent; border-left:1rem solid #121212;}
.layerpop-area .layerPop .btn button:last-child{float:none;}
.layerPop .btn button{opacity:0.6; height:100%; transition:opacity 0.3s;}
.layerPop .btn button:hover{opacity:1;}
.layerPop .btn button.layer-close{width:60rem; height:100%; margin:0; border-left:1rem solid #121212; font-size:0;}
.layerPop .btn button.layer-close i{font-size:22rem;}
.layerPop .btn button.layer-close__today{padding:0 25rem; margin-left:0; font-size:15rem;}
.layerpop-control{position:relative;z-index:1;display:flex; justify-content:space-between; align-items:stretch; height:60rem; background-color:#302d2b;}
.layerpop-control > div{display:flex; align-items:center;}
.layerpop-control .swiper_control{display:flex; gap:0 10rem; padding-left:30rem;}
.layerpop-control .swiper_control button{--sizeBtn:30rem; flex:none; opacity:0.4; width:var(--sizeBtn); height:var(--sizeBtn); background-color:transparent; font-size:0; color:var(--color-white); transition:opacity 0.3s;}
.layerpop-control .swiper_control button i{font-size:22rem;}
.layerpop-control .swiper_control button:hover{opacity:1;}
.layerpop-control .swiper_control .swiper_page{display:flex; align-items:center; gap:0 5rem; color:var(--color-white); font-size:16rem; font-weight:700;}
.layerpop-control .swiper_control .swiper_page span{min-width:15rem;}
.layerpop-control .swiper_control .swiper_page i{content:''; opacity:0.2; display:inline-block; width:4rem; background-color:var(--color-white); border-radius:100%; aspect-ratio:1/1;}
.layerpop-control .swiper_control .swiper_page .swiper-pagination-total{opacity:0.3; text-align:right;}
.layer-slide .swiper-slide a{overflow:hidden; display:block;height:100%;background: #fff;}
 	/* open button */
.layer-open{--sizeOut:130rem; opacity:0; display:flex; justify-content:center; align-items:center; position:absolute; right:70rem; bottom:60rem; z-index:30; width:var(--sizeOut); height:var(--sizeOut); border-radius:100%; animation:showPop 0.5s ease 1 forwards;}
.layer-open button{--sizeInner:100rem; flex:none; position:relative; z-index:1; width:var(--sizeInner); height:var(--sizeInner); background-color:#302d2b; border-radius:100%; font-size:0;}
.layer-open button i{font-size:30rem; color:var(--color-white); transition:color 0.3s;}
.layer-open button:hover i{color:#ecc99f;}
.layer-open__text{position:absolute; width:100%; height:100%; color:#ecc99f; /* animation:rotateText 7s cubic-bezier(0.15, 0.83, 0.36, 0.99) infinite;*/}
.layer-open__text span{position:absolute; left:50%; font-size:11rem; transform-origin:0 calc(var(--sizeOut) / 2);}
	/* active */
.layer-open{display:none;}
.layerPop{opacity:1; visibility:visible; transition:0.5s cubic-bezier(0.15, 0.83, 0.36, 0.99);}
.layerpop-area.close-today:not(.open) .layerPop{display:none;}
.layerpop-area:is(.close) .layerPop{opacity:0; visibility:hidden;}
.layerpop-area:is(.close-today:not(.open), .close) .layer-open{display:flex;}
@keyframes rotateText {
	0%{transform:rotate(360deg);}
	100%{transform:rotate(0deg);}
}
@keyframes showPop {
	0%{opacity:0;}
	100%{opacity:1;}
}
	/* 레이어팝업 - 반응형 */
@media screen and (max-width:1660px){
	.layer-open{right:30rem;}
}
@media screen and (max-width:1300px){
	.layerpop-area .layerPop{left:30rem;}
	.layer-open{bottom:130rem;}
}
@media screen and (max-width:480px){
	.layerpop-control{height:50rem;}
	.layerpop-area{--sizePop:350rem;}
	.layerpop-area .layerPop{border-radius:20rem;}
	.layerpop-control .swiper_control{padding-left:20rem;}
	.layerPop .btn button.layer-close__today{padding:0 15rem; font-size:14rem;}
	.layerPop .btn button.layer-close{width:50rem;}
	.layer-open{--sizeOut:100rem; right:10rem; bottom:10rem;}
	.layer-open button{--sizeInner:70rem;}
	.layer-open button i{width:30rem; font-size:25rem;}
	.layer-open__text span{font-size:9rem;}
}