@CHARSET "UTF-8";

/*banner*/
#bannerVideo {
        display: block;
    }
    #bannerImage {
        display: none;
    }
.mainbn .swiper .swiper-slide .video-txt{display:none;}

.mainbn{background-color:#222;}
.mainbn .swiper{height:49.7vw; margin:0 auto; position: relative;}
.mainbn .swiper .swiper-slide{position:relative; overflow: hidden; -webkit-backface-visibility: hidden; -webkit-transform: translate3d(0, 0, 0);}
.mainbn .swiper .swiper-slide canvas{position:absolute; z-index:2;}
.mainbn .swiper .swiper-slide .banner-link{cursor:pointer; display:block; height:100%;}
.mainbn .swiper .swiper-slide .video-wrap{}
.mainbn .swiper .swiper-slide .video-wrap video{width:100%; height:auto; object-fit:cover;}
.mainbn .swiper .swiper-slide .banner-link img:not(.video-logo){width:100%; height:100%;}
.mainbn .swiper .swiper-pagination{position: absolute; bottom:65px;}
.mainbn .swiper .swiper-pagination-bullet{transition: all .5s; -webkit-transitioin: all .5s; background-color: transparent; border-radius: 2px; border: 2px solid rgb(255,255,255); opacity: 0.2; width: 18px; height: 18px;}
.mainbn .swiper .swiper-pagination-bullet-active{background-color: #fff; border: 2px solid #fff; opacity: 1;}
.mainbn .swiper .swiper-arrow{background-color:rgba(0, 0, 0, 0.3); height:60px; width:60px; position:absolute;}
.mainbn .swiper .swiper-button-next{right:10%;}
.mainbn .swiper .swiper-button-prev{left:10%;}
.mainbn .swiper .swiper-arrow:after{color:#fff; font-size:27px;}
/*동영상태그 16:9비율 유지 중앙정리*/
.swiper-wrapper{/*align-items: center;*/ cursor:pointer;}

.bn-txtbox{position:absolute; top:0; left:0; width:100%; height:100%; display:flex; justify-content:center; align-items:center;}
.bn-txt{text-align:center;}
.bn-txt h1{color:#fff; font-size: min(6vw, 72px); margin-bottom:16px;}
.bn-txt4 h1{color:#3b33c2;}
.bn-txt p{color: #E0281E; font-size:21px; line-height:30px;}
.bn-txt2 p{color: #70DDFF;}
.bn-txt3 p{color: #F3FFA7;}
.bn-txt4 p{color: #222;}
.bn-txt5 p{color: #4BF1F3;}
.bn-txt6 p{color:#ED4646;}
/*테스트를 위한 글자삽입*/
.bn-txt-left{display:none;}
/*테스트를 위한 글자삽입*/
.bn-txt7 p{color:#251704;}
.bn-txt8 p{color:#00CDFF;}
.bn-txt .bn-click{display:block; width:217px; height:66px; margin:0 auto; line-height: 66px; color:#fff; font-size:17px; border-radius:21px;margin-top:52px; backdrop-filter: blur(2px) brightness(1.2); -webkit-backdrop-filter: blur(2px) brightness(1.2); border:1px solid rgba(255,255,255,.2)}
.bn-txt2 .bn-click{backdrop-filter: blur(2px) brightness(1.2); -webkit-backdrop-filter: blur(2px) brightness(1.2); border:1px solid rgba(255,255,255,.2);}
.bn-txt3 .bn-click{backdrop-filter: blur(1.5px) brightness(1.7); -webkit-backdrop-filter: blur(1.5px) brightness(1.7); border:1px solid rgba(255,255,255,.2);}
.bn-txt8 .bn-click{backdrop-filter: blur(1.5px) brightness(1.7); -webkit-backdrop-filter: blur(1.5px) brightness(1.7); border:1px solid rgba(15,183,226,.2);}
.bn-txt .bn-click:hover{backdrop-filter: brightness(2);}
.bn-txt2 .bn-click:hover{backdrop-filter: brightness(2);}
.bn-txt3 .bn-click:hover{backdrop-filter: brightness(2);}
.bn-txt1 .bn-click:hover{backdrop-filter: brightness(3);}
.bn-txt5 .bn-click:hover{backdrop-filter: brightness(1.5);}
.bn-txt8 .bn-click:hover{backdrop-filter: brightness(2.5);}
.bn-txt .bn-click::after{content:url(/resources/images/main/banner/banner-arrow.svg); width:10px; height:10px; display:inline-block; margin-left: 7px;}

/*quick-line*/
.quickline{position:relative; width:100%; height:150px; background-color: #fff; box-shadow: 0px 1px 9px rgba(0,0,0,0.15); z-index: 10;}
.quickline .inner{display: flex; justify-content: space-between; height:100%;}
.quickline .inner section{padding:18px 13px 15px; cursor:pointer;}
.quickline .inner section h2{color:var(--color-darkblue); font-size:46px; margin-bottom:3px; font-weight:800; letter-spacing:-0.07em; font-family: "Inter", sans-serif;}
.quickline .inner section p{color: var(--color-black2); font-size: 18px; font-weight:600; line-height:1.5;}
.quickline .inner section p span{margin-top:3px; font-size:15px; font-weight:500;}

.quickline .inner ul{display: table; letter-spacing:0;  transform: perspective(0);}
.quickline .inner ul li{ transition: all 0.5s ease; -webkit-transition: all 0.5s ease; transform: scale(1); -webkit-transform: scale(1); border-radius: 15px; display: table-cell; width: 172px; height: 100%; padding: 7px; text-align: center; vertical-align: middle; border-right:1px solid #f8f9fd; background-color: #fff; margin: 0px 5px;}
.quickline .inner ul li:last-child{border-right: 0;}
                  
.quickline .inner ul li:hover{transform: scale(1.05); -webkit-transform: scale(1.05); border-radius: 15px; box-shadow: 0px 5px 5px rgba(0,0,0,0.08);}
.quickline .inner ul li a{ display: block; height: 100%;}
.quickline .inner ul li a img{display: block; width: 45px; height: 45px; margin: 0 auto; margin-bottom: 11px;}    
                    
/*공통*/
.container{width:100%; height:auto; padding:var(--content-padding) 0px;}

/*메인 타이틀박스*/
.maintitle-box{display:flex; justify-content:space-between; align-items: flex-end; padding-bottom:40px;}
.maintitle-box h2{font-size: 43px; font-weight:700; letter-spacing: -0.1rem;}


.container-btn{display:flex;}
.main-btn{display: block; transition: all 0.5s; -webkit-transition: all 0.5s; width: 176px; height:54px; border-radius: 54px; text-align: center; line-height:3.5;}
.main-indicator{margin-left:16px; display:flex; gap: 3px;}
.main-indicator .indicator-btn{display:inline-block; cursor:pointer; width: 54px; height: 54px; border-radius:54px; text-align:center;} 
.main-indicator .indicator-btn img{margin-top: 14px;}
.main-indicator .btn-pre{border:1px solid var(--color-line-btn); background-color: #fff;}
.main-indicator .btn-pre:hover{background-color: #f9f9f9;}
.main-indicator .btn-next{background-color: #222;}
.main-indicator .btn-next:hover{background-color: #333;}

.btn-white{border: 1px solid var(--color-line-btn); background-color: #fff; color:var(--color-black);}
.btn-white:hover{background-color: #f9f9f9; color:#333;}

.btn-blue{background-color: var(--color-btn-blue); color: #fff;}
.btn-blue:hover{background-color: var(--color-primary);}

.btn-black{background-color: var(--color-btn-black); color: #fff; border:1px solid #4D5762; margin-left: 10px;}
.btn-black:hover{background-color: #333;}

/*curriculum*/
.wrap-curriculum{background-color: var(--color-bg-white);}
.wrap-curriculum .inner{}
.wrap-curriculum .inner .curriculum-box{width:100%; margin:0 auto;}
.wrap-curriculum .inner .curriculum-box .curri-main{display:flex; justify-content:space-between; gap:7px;}
.wrap-curriculum .inner .curriculum-box .curri-main .curri-content{position:relative; width:100%; height:280px; border:5px solid transparent; border-radius:28px; overflow:hidden !important;}
.wrap-curriculum .inner .curriculum-box .curri-main .curri-content .curri-content-bg{display:block; overflow:hidden; height:100%; transition: all .7s ease; -webkit-transition: all .7s ease; transform: scale(1); -webkit-transform:scale(1);}
.wrap-curriculum .inner .curriculum-box .curri-main .curri-content .curri-content-bg::after{content: ''; position: absolute; top: 0px; right: 0px; width: 100%; height: 50%; background: linear-gradient(to top, transparent 0%, #191919 150%);}
.wrap-curriculum .inner .curriculum-box .curri-main .curri-content section{width:100%; position:absolute; top: 0; left:0; text-align: center; padding-top: 32px; z-index:1; cursor:pointer;}
.wrap-curriculum .inner .curriculum-box .curri-main .curri-content .list-gradient{position:absolute; top:0; left:0; cursor:pointer;
    background: linear-gradient(270deg, rgba(25, 25, 25, 0.8) 10%, rgba(25, 25, 25, 0.02) 65%);
    background: -webkit-linear-gradient(270deg, rgba(25, 25, 25, 0.8) 10%, rgba(25, 25, 25, 0.02) 65%);}
.wrap-curriculum .inner .curriculum-box .curri-main .curri-content section h3{color: #fff; font-size: 24px; font-weight:500; padding-top: 7px;}
.wrap-curriculum .inner .curriculum-box .curri-main .curri-content section h3 .smalltxt:first-child{margin-top:10px;}
.wrap-curriculum .inner .curriculum-box .curri-main .curri-content section h3 .smalltxt{font-size:20px; display:block; opacity:0.5; line-height:1.7;}

/*.wrap-curriculum .inner .curriculum-box .curri-main .curri-content.emphasize{box-shadow: 0 10px 20px rgba(23,25,29,.08); overflow:hidden; border-radius:28px; background-image: linear-gradient(#fff, #fff), linear-gradient( to right,#34DCFA 0%,#CFFFFF 29%,#2C5AE9 67%, #3182F6 100%); background-origin: border-box; background-clip: content-box, border-box;}
교육과정 메인 슬라이드 삭제하며 효과 주석*/
.wrap-curriculum .inner .curriculum-box .curri-main .curri-content:hover .curri-content-bg{transform: scale(1.1); -webkit-transform:scale(1.1);}

/*curriculum-line(slick-slide)*/
.curri-item{margin: 24px 0;}
.curri-item .slick-list .slick-track{width:3000px !important;}
.curri-item .curri-slide{box-shadow: 3px 2px 3px rgba(23,25,29,.08); color: #222 !important;overflow:hidden; transition: all 0.5s; -webkit-transition: all 0.5s; width:286px !important; height:180px; border-radius: 14px; margin-right:14px; background-color: #fff;}
.curri-item .curri-slide a{background-position:0px 33px !important; transition: all 0.5s; -webkit-transition: all 0.5s; overflow:hidden; position:relative; display:block; width:100%; height:100%; padding: 22px 24px;}
.curri-item .curri-slide a .curri-keword{line-height:1.4;}
.curri-item .curri-slide a .curri-keword span{font-weight:500; display:inline-block; background-color: #4D5762; border-radius: 7px; color: #fff; font-size: 13px; padding: 2px 5px 1px 5px; margin-right: 4px; }
.curri-item .curri-slide a .curri-keword span:last-child{marign-right:0;}
.curri-item .curri-slide a h3{margin-top:12px; font-size:20px; font-weight:600;}
.curri-item .curri-slide a h3 span{display: block;}

.curri-item .curri-slide a .item-up{transition: .5s ease; -webkit-transition: .5s ease; color: #fff; position: absolute; bottom:-97px; line-height:1.8;}
.curri-item .curri-slide a .item-up p{font-size: 15px; margin-bottom:46px; color:rgba(203,223,252,0.8);}
.curri-item .curri-slide a .item-up .more-up{margin-bottom:26px;}
.curri-item .curri-slide a .item-up span{font-size: 14px;}

/***교육과정 내부 제외 메인 전체 slick-slider 공통사항***/
.slide-item{border-radius: 28px; margin-right:16px; overflow:hidden;}
.slide-item a{display:block; width:100%; height:100%; padding: 24px;}
.slide-item a p{color:#FCCC75; font-size:18px;}
.slide-item a h3{color:#fff; font-size: 24px; margin-top:6px; line-height:1.5; font-weight:600;}
.slide-item a h3 span{display: block;}

/*hot*/
.wrap-hot .inner{overflow:hidden;}
.wrap-hot .inner .slider-hot{width:100%; height:232px;}
.wrap-hot .inner .slider-hot .slick-track{overflow:hidden; height:232px;}
.wrap-hot .inner .slider-hot .slide-item{width: 410px!important; height:232px;}
.wrap-hot .inner .slider-hot .slide-item a .txt-blue{color:#c3fdfe;}
.wrap-hot .inner .slider-hot .slide-item a .txt-red{color:#e099a7;}

/*lineBanner*/
.lineBanner{width:100%; height:auto; padding-bottom: var(--content-padding);}
.lineBanner a{display:block; width:100%; background:url('/resources/images/main/lb-bg1.jpg') center/cover no-repeat;}
.lineBanner a .inner img{width:100%; max-width:645px; height:auto;}

/*portfolio*/
.wrap-portfolio{padding-top:0;}
.wrap-portfolio .inner .portfolio-box{display:grid; grid-template-columns: repeat(5, 1fr); grid-auto-rows: 280px; grid-gap:16px;}
.wrap-portfolio .inner .portfolio-box .portfolio-item{overflow:hidden; width:100%; height:100%; filter: grayscale(1) sepia(15%) hue-rotate(185deg) brightness(60%) saturate(234%); transform:scale(0.9); -webkit-transform:scale(0.9);  transition: transform 1s ease; -webkit-transition: transform 1s ease;}
.wrap-portfolio .inner .portfolio-box .portfolio-item.enlarge{transform:scale(1); -webkit-transform:scale(1);}
.wrap-portfolio .inner .portfolio-box .portfolio-item a{position:relative; display:block; width:100%; height:100%; border-radius: 28px;}
.wrap-portfolio .inner .portfolio-box .portfolio-item a .list-gradient{border-radius: 28px;
	background: linear-gradient(90deg, rgba(25, 25, 25, 0.8) 10%, rgba(25, 25, 25, 0.02) 56%);
    background: -webkit-linear-gradient(90deg, rgba(25, 25, 25, 0.8) 10%, rgba(25, 25, 25, 0.02) 56%);
}
.wrap-portfolio .inner .portfolio-box .portfolio-item a h4{position:absolute; bottom:24px; left: 24px; margin-right:24px; font-size:18px; color: #fff; font-weight:500; line-height:1.5;}
.wrap-portfolio .inner .portfolio-box .portfolio-item a h4 span:not(.no-white){display:block; font-size:15px; color:#D9D9D9;}
.wrap-portfolio .inner .portfolio-box .folio4{grid-column: 4 / 6; grid-row:1 / 3;}
.wrap-portfolio .inner .portfolio-box .folio5{grid-column: 1 / 3;}
.wrap-portfolio .inner .portfolio-box .folio8{grid-column: 2 / 4;}

.wrap-portfolio .inner .portfolio-box .portfolio-item:hover{filter:grayscale(0);}

/*plus*/
.wrap-plus{background-color:#E8EBF0; padding: 70px 0;}
.wrap-plus .inner{display:flex; justify-content: space-between; align-items: center;}
.wrap-plus .inner .plus-title h3{font-size:32px; font-weight:700; line-height:1.3;}
.wrap-plus .inner .plus-title h3 span{display:block;}
.wrap-plus .inner .plus-title h3 .txt-blue{color:#1E5EFF;}

.wrap-plus .inner .plus-box{flex-basis:75%;}
.wrap-plus .inner .plus-box ul{display: flex; width:100%;}


.wrap-plus .inner .plus-box ul li{width:25%; height:auto; /*transition: all 0.25s; -webkit-transition: all 0.25s;*/ background-color:#F7F9FD; border-radius:28px; overflow:hidden; margin-left:1.5%; text-align:center;}

.wrap-plus .inner .plus-box ul li a{display:flex; flex-direction:column; justify-content:center; width:100%; height:100%; padding-bottom:12%;}
.wrap-plus .inner .plus-box ul li a img{margin-top:32px;}
.wrap-plus .inner .plus-box ul li a h4{font-size:17px; color: #222; margin-top:15px;}
.wrap-plus .inner .plus-box ul li:first-child a img{height:55px;}
.wrap-plus .inner .plus-box ul li:nth-child(2) a img{height:60px;}
.wrap-plus .inner .plus-box ul li:nth-child(3) a img{height:60px;}
.wrap-plus .inner .plus-box ul li:last-child a img{height:55px; margin-top:30px;}
.wrap-plus .inner .plus-box ul li:last-child a h4{margin-top:16px;}
.wrap-plus .inner .plus-box ul li a h4 span:not(.block-tb){font-size: 15px; display:block; color:#4D5762; margin-bottom:6px; font-weight:500;}

.wrap-plus .inner .plus-box ul li:hover{ box-shadow: 0 10px 20px rgba(23,25,29,.08);}

/*interview*/
.wrap-interview{background-color:#191A19; color:#fff;}
.wrap-interview .inner .title-box .container-btn a{width:200px;}
.wrap-interview .inner .interview-box{display:grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 390px; grid-gap:16px;}
.wrap-interview .inner .interview-box .interview-item{overflow:hidden; transform:scale(0.9); -webkit-transform:scale(0.9);  transition: transform 1s ease; -webkit-transition: transform 1s ease;}
.wrap-interview .inner .interview-box .interview-item.enlarge{transform:scale(1); -webkit-transform:scale(1);}
.wrap-interview .inner .interview-box .interview-item a{display:block; position:relative; width:100%; height:100%; border-radius: 28px;}
.wrap-interview .inner .interview-box .interview-item a .list-gradient{
	background: linear-gradient(90deg, rgba(25, 25, 25, 0.8) 10%, rgba(25, 25, 25, 0.02) 56%);
    background: -webkit-linear-gradient(90deg, rgba(25, 25, 25, 0.8) 10%, rgba(25, 25, 25, 0.02) 56%);
}
.wrap-interview .inner .interview-box .interview-item a h4{position:absolute; bottom:24px; left: 24px;font-size:18px; color: #fff; font-weight:500; line-height:1.5; margin-right:24px;}
.wrap-interview .inner .interview-box .interview-item a h4 span:not(.no-white){display:block; font-size:15px; color:#D9D9D9;}
.wrap-interview .inner .interview-box .interview3{grid-column: 3 / 5;}
.wrap-interview .inner .interview-box .interview9{grid-column: 2 / 4;}


/*employ*/
.wrap-employ{padding:100px 0;}
.wrap-employ .employ-box{width:100%; margin:0 auto; height:auto;}
.wrap-employ .employ-box .employ-top{margin-bottom:36px; width:100%;}

.wrap-employ .employ-box .employ-top ul{width:100%;display: grid; grid-template-rows: repeat(4, 1fr); grid-template-columns: repeat(6, 1fr); grid-gap: 8px;}
.wrap-employ .employ-box .employ-top ul li{display:flex; justify-content:center; align-items:center; border:1px solid #E8EBF0; border-radius: 12px; overflow:hidden; width:100%; height:77px; margin:0 auto;}
.wrap-employ .employ-box .employ-top ul li img{width:163px; height:auto;}

.wrap-employ .employ-box .employ-bottom{display:flex; justify-content:space-between; gap:70px;}
.wrap-employ .employ-box .employ-bottom ul{width:100%;}
.wrap-employ .employ-box .employ-bottom li{border-bottom: 1px solid #E8EBF0;}
.wrap-employ .employ-box .employ-bottom li:last-child{border-bottom:none;}
.wrap-employ .employ-box .employ-bottom ul li a{display:flex; justify-content: space-between; padding:25px 0;}
.wrap-employ .employ-box .employ-bottom ul li a h4{font-size:18px; font-weight:500;}
.wrap-employ .employ-box .employ-bottom ul li a p{color:#4D5762;}
.wrap-employ .employ-box .employ-bottom ul li a p::after{ content:url("/resources/images/main/employ/icon-right.svg"); width:10px; height:5px; display:inline-block;margin-left:17px;}

/*seminar*/ 
.wrap-seminar{background-color: var(--color-bg-white);}
.wrap-seminar .inner{overflow:hidden;}
.wrap-seminar .inner .slider-seminar{width:100%; height:398px;}
.wrap-seminar .inner .slider-seminar .slick-list .slick-track{width:10000px !important;}
.wrap-seminar .inner .slider-seminar .slide-item { width: 285px !important;}
.wrap-seminar .inner .slider-seminar .slide-item  a{height:398px;}

/*news*/
.wrap-news .inner{overflow:hidden;}
.wrap-news .inner .slider-news .slick-list .slick-track{width:10000px !important;}
.wrap-news .inner .slider-news{width:100%; height:232px !important;}
.wrap-news .inner .slider-news .slide-item{width:374px !important; height:232px; margin-right:16px !important;}
.wrap-news .inner .slider-news .slide-item a{display:block; width:100%; height:232px; position:relative; padding:0;}
.wrap-news .inner .slider-news .slide-item a div{width:100%; height:100%;}
.list-gradient{width:100%; height:100%;
    background: linear-gradient(360deg, rgba(25, 25, 25, 0.8) 10%, rgba(25, 25, 25, 0.02) 56%);
    background: -webkit-linear-gradient(360deg, rgba(25, 25, 25, 0.8) 10%, rgba(25, 25, 25, 0.02) 56%);}
.wrap-news .inner .slider-news .slide-item a h3{position:absolute; top:0; padding:24px;}

/*consult*/
.wrap-consult{width:100%; height:auto; padding: 100px 0;}
.wrap-consult .inner h2{font-size: 42px; color: #fff; margin-bottom:36px; line-height:1.3; font-weight:600;}


/*********호버, addclass해당부분만 미디어쿼리 적용*********/
@media screen and (min-width: 1024px) {
  .curri-item .curri-slide:hover{background-color: #0034ff; width: 327px !important; color:#fff;}
	.curri-item .curri-slide:hover a{background-position:40px 33px !important; opacity:0.9; color:#fff;}
	.curri-item .curri-slide:hover a .curri-keword span{background-color:#fff; color:#1E5EFF; font-weight:600;}
	.curri-item .curri-slide:hover .slide-opacity{opacity:1;}
	.curri-item .curri-slide:hover a h3 span{display:inline;}
	.curri-item .curri-slide:hover .item-up{bottom: 18px;}
	  
	/*addclass로 호버처리하기*/
	.curri-item .curri-slide.slide-wide{background-color: #0034ff; width: 327px !important; color:#fff;}
	.curri-item .curri-slide a.slide-right{background-position:40px 33px !important; opacity:0.9; color:#fff;}
	.curri-item .curri-slide a .curri-keword span.keword-color{background-color: #fff; color:#1E5EFF; font-weight:600;}
	.curri-item .curri-slide a h3 span.slide-line{display:inline;}
	.curri-item .curri-slide a .item-up.slide-up{bottom:20px;}
}
/******적용 종료**********/
@media screen and (max-width: 1400px) {
	.quick-rightBar{display:none !important;}
}

