@charset "utf-8";


/* Main */
.container{height:100vh; width:100%; position:relative; overflow:hidden}
.cont{max-width:1400px; margin:0 auto; position:relative; padding:0 10px; overflow:hidden}
.conp{padding:92px 10px}
h2.tac{margin-bottom:75px}
h2.nryeo{margin-bottom:75px;text-align:left!important;}
.main_visual *{color:#fff}
.main_visual li.visual_01{background:url(/img/main_visual01.png)no-repeat;background-size:cover}
.main_visual li.visual_02{background:url(/img/main_visual02.png)no-repeat;background-size:cover}

.main_visual .slick-slide{width:100%; height:100vh; min-height:700px; position:relative}
.main_visual .slick-slide:nth-child(1) video{position:absolute; top:50%; left:50%; transform:translate(-50.1%, -50.1%); -ms-transform:translate(-50.1%, -50.1%); -webkit-transform:translate(-50.1%, -50.1%); min-width:100%; min-height:100%; width:auto; height:auto; object-fit:cover; z-index:-1}
.main_visual .slick-slide::before{content:''; position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.5)}
.main_visual .slick-slide > div{position:absolute; top:55%; left:50%; transform:translate(-50.1%, -50.1%); max-width:1400px; width:100%; padding:0 10px}
.main_visual .slick-slide .tit p{overflow:hidden}
.main_visual .slick-slide .tit p span{position:relative; top:90px; font-size:65px; font-weight:bold}
.main_visual .slick-slide .text{position:relative; margin:40px 0 80px; color:#fff; font-size:22px; line-height:1.8; opacity:0}
.main_visual .slick-slide .text strong{color:#57c2d8; font-weight:400}
.main_visual .slick-slide.slick-active .tit p span{animation:txtToTop .7s ease-in-out .2s forwards}
.main_visual .slick-slide.slick-active .text{animation:txtToBtm .6s ease-in-out .8s forwards}
.main_visual .slick-slide.slick-active .basic_btn{opacity:0; animation:txtToBtm .6s ease-in-out 1.3s forwards}
@keyframes txtToTop{0%{opacity:0; top:90px} 100%{opacity:1; top:0px}}
@keyframes fadeToTop{0%{opacity:0; top:50px} 100%{opacity:1; top:0px}}
@keyframes txtToBtm{0%{opacity:0; top:-10px} 100%{opacity:1; top:0px}}
.basic_btn{display:inline-block; position:relative; width:200px; text-align:center; border-radius:100px; border:1px solid #fff; transition:all .3s ease}
.basic_btn:hover{background:#57c2d8; border:1px solid #57c2d8}
.basic_btn.arrow span{position:relative; padding-right:25px; transition:background, padding .3s ease; font-size:16px; line-height:55px; vertical-align:middle}
.basic_btn.arrow span:after{content:''; position:absolute; z-index:1; right:0; top:5px; width:19px; height:10px; background:url('/img/ico_arrow.png') no-repeat center right}
.basic_btn.arrow:hover span{padding-right:40px; color:#111; font-weight:bold}
.basic_btn.arrow:hover span:after{background-image:url('/img/ico_arrow_d.png')}
.iconmouse{position:absolute; bottom:30px; left:50%; transform:translateX(-50%); z-index:1; width:30px; height:50px; border:2px solid #fff; border-radius:20px}
@keyframes Mouse_act{0%{transform:translateY(2px); opacity:1} 30%{opacity:1} 100%{transform:translateY(25px); opacity:0}}
.iconmouse::before{content:'SCROLL'; display:block; position:absolute; top:-25px; left:50%; margin-left:-23px;color:#fff; letter-spacing:0px; font-size:12px}
.iconmouse .ball{position:absolute; top:5px; left:11px; width:5px; height:5px; background:#fff; border-radius:50%; animation:Mouse_act 1.5s ease-out infinite}

.want-store{overflow:hidden; z-index:10; position:fixed; right:50px; bottom:50px; width:76px; height:76px; border-radius:60px; /*box-shadow:0px 6px 12px 0px rgba(0,0,0,.25);*/ transition:width .2s, bottom 1s; background:#57c2d8}
.want-store a{display:table; width:100%; height:100%}
.want-store a span{display:table-cell; text-align:center; vertical-align:middle}
.want-store a span.hover{display:none; opacity:0}
.want-store a > img{display:none}
.want-store.hover{width:255px}
.want-store.hover a{display:block; padding-left:33px}
.want-store.hover a span{display:none}
.want-store.hover a span.hover{display:inline; text-align:left; font-size:18px; line-height:78px; opacity:1; color:#fff}
.want-store.hover a > img{padding-left:40px; display:inline; vertical-align:middle}

.main04_bg{background: #f8f8f8;}
.main02 .tit{flex:0 0 50%}
.main02 .text{flex:0 0 50%; color:#777}

.main02_1{padding-top:0; max-width: 100%;}
.main02_1 .slick-list, .main06 .slick-list{margin:-20px}
.main02_1 .slick-slide, .main06 .slick-slide{margin:20px}
.main02_1 p{margin-top:20px; text-align:center}
.slick-dots{display:flex; justify-content:center; margin-top:20px}
.slick-dots li{height:15px}
.slick-dots li + li{margin-left:10px}
.slick-dots button{text-indent:-9999px; width:15px; height:15px; background:#ddd; border-radius:100px; transition:all .3s ease; vertical-align:top}
.slick-dots .slick-active button{width:45px; background:#57c2d8}

.main03{overflow:hidden}
.main03 .main03_img{float:left; width:50%}
.main03 .main03_img .img{height:100vh}
.main03 .main03_img .img1{background:url('/img/main03_1.png') center; background-size:cover}
.main03 .main03_img .img2{background:url('/img/main03_2.png') center; background-size:cover}
.main03 .main03_img .img3{background:url('/img/main03_3.png') center; background-size:cover}
.main03 .main03_img .img4{background:url('/img/main03_4.png') center; background-size:cover}
.main03_video{float:right; width:50%; height:50vh; overflow:hidden; position:relative}
.main03_video video{position:absolute; top:50%; left:50%; transform:translate(-50.1%, -50.1%); -ms-transform:translate(-50.1%, -50.1%); -webkit-transform:translate(-50.1%, -50.1%); min-width:100%; min-height:100%; width:auto; height:auto; object-fit:cover}
.main03_text{display:flex; width:50%; height:50vh; align-items:center; padding:0 5%; position:relative}
.main03_text .swiper-slide > *{opacity:0; padding-left:15px}
.main03_text .swiper-slide-active > *{animation:fadeInRight 0.8s 1 forwards; -webkit-animation:fadeInRight 0.8s 1 forwards; animation-delay:0.1s}
.main03_text .swiper-slide-active .text{animation-delay:0.4s}
@-webkit-keyframes fadeInRight {
	0% {opacity:0; -webkit-transform:translate3d(100px, 0, 0); transform:translate3d(100px, 0, 0)}
	25% {opacity:0; -webkit-transform:translate3d(50px, 0, 0); transform:translate3d(50px, 0, 0)}
	100% {opacity:1; -webkit-transform:none; transform:none}
}
@keyframes fadeInRight {
	0%{opacity:0; -webkit-transform:translate3d(100px, 0, 0); -ms-transform:translate3d(100px, 0, 0); transform:translate3d(100px, 0, 0)}
	25%{opacity:0; -webkit-transform:translate3d(50px, 0, 0); -ms-transform:translate3d(50px, 0, 0); transform:translate3d(50px, 0, 0)}
	100%{opacity:1; -webkit-transform:none; -ms-transform:none; transform:none}
}
.main03_text h2::before{content:''; position:absolute; top:0; left:0; width:35px; height:35px; background:#57c2d8; border-radius:100%; z-index:-1}
.main03_text .text{color:#777; margin-top:30px}
.main03_btn{position:absolute; bottom:0; left:-70px; font-size:0; z-index:3}
.main03_btn button{width:70px; height:70px; background:#fff; border-radius:5px 0 0 0}
.main03_btn button svg{width:22px; vertical-align:middle}
.main03_btn .main03_prev:hover svg{position:Relative; animation:slideInRight 0.5s 1 forwards; -webkit-animation:slideInRight 0.5s 1 forwards}
@-webkit-keyframes slideInRight {0% {-webkit-transform:translate3d(50%, 0, 0); transform:translate3d(50%, 0, 0)} 100% {-webkit-transform:translate3d(0, 0, 0); transform:translate3d(0, 0, 0)}}
@keyframes slideInRight {0% {-webkit-transform:translate3d(50%, 0, 0); transform:translate3d(50%, 0, 0)} 100% {-webkit-transform:translate3d(0, 0, 0); transform:translate3d(0, 0, 0)}}
.main03_btn .main03_next:hover svg{position:Relative; animation:slideInLeft 0.5s 1 forwards; -webkit-animation:slideInLeft 0.5s 1 forwards}
@-webkit-keyframes slideInLeft {0% {-webkit-transform:translate3d(-50%, 0, 0); transform:translate3d(-50%, 0, 0)} 100%{-webkit-transform:translate3d(0, 0, 0); transform:translate3d(0, 0, 0)}}
@keyframes slideInLeft {0% {transform:translate3d(-50%, 0, 0); transform:translate3d(-50%, 0, 0)} 100% {transform:translate3d(0, 0, 0); transform:translate3d(0, 0, 0)}}

.main04 ul{display:flex}
.main04 li{width:100%}
.main04 li + li{margin-left:20px}
.main04 p, .main06 p{margin-top:20px; text-align:center}

.mainbanner{position:relative; height:306px}
.mainbanner::before{content:''; position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.5)}
.mainbanner h2{color:#fff; text-align:center; position:absolute; top:50%; transform:translateY(-50%); left:0; width:100%}
.mainbanner01{background:url('../../img/main_banner01.png') center; background-size:cover}
.mainbanner02{background:url('../../img/main_banner02.png') center; background-size:cover}

.main06{display:flex;gap:30px;margin-bottom:10px;}
.main06 .img{border:1px solid #ddd; overflow:hidden}
.main06 a .img {
    width: 100%;
    height: 300px;          /* 원하는 동일 높이 */
    overflow: hidden;      /* 넘치는 부분 자르기 */
}
.main06 .slick-slide:hover img{-webkit-transform: scale(1.1); transform: scale(1.1); -webkit-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out}

/* About */
.sub{text-align:center}
.topimg{position:relative}
.topimg img{
	object-fit: cover;
    width: 100%;
}
.topimg p{position:absolute; top:50%; transform:translateY(-50%); color:#fff; width:100%; text-align:center; font-size:80px; font-weight:bold; letter-spacing:0}
.sub .title{margin:60px 0 40px 0}
.sub .line{position:relative; display:inline-block}
.sub .line::before{content:''; position:absolute; bottom:0; left:-4px; right:-4px; background:#57c2d8; height:35px; z-index:-1}
.sub .text{color:#777}
.sub .text.contact_txt{
	color: #111;
    font-size: 45px;
	text-align:left;
    font-weight: 700;
	margin-top:50px;
	}
.about, .portfolio, .solution, .suneung,.busi_solution {margin-top:150px}
.about ul{margin:-20px; text-align:left}
.about li{display:inline-block; width:calc(50% - 40px); margin:20px; position:relative}
.about .info{position:relative; margin-top:-150px; z-index:2; padding-left:10px}
.about .info *{position:relative; z-index:1}
.about .info h2::after{content:''; position:absolute; top:-50px; left:-11px; width:475px; height:200px; background:#fff; z-index:-2}

.portfolio ul{margin:-20px; display:flex; flex-wrap:wrap}
.portfolio li{display:inline-block; width:calc(33.33% - 40px); text-align:center; margin:20px}
.portfolio li .logo{height:40px; margin:30px 0 15px 0}
.portfolio li .logo img{height:100%}
.portfolio li .logo.circle{height:80px}
.portfolio li .tit{font-weight:bold; margin-top:30px; font-size:22px}
.portfolio li .text{color:#777}

.suneung li{display:grid; text-align:left; grid-template-columns:446px auto}
.suneung li + li{margin-top:100px}
.suneung li > div + div{margin-left:40px}
.suneung h2{margin-bottom:20px}

.solution{text-align:left}
.solution > div + div{margin-top:100px}
.solution .flex > *{flex:0 0 50%}
.solution .list{margin-left:40px}
.solution .learner .list{margin-left:0}
.solution .list h2{margin-bottom:20px}
.solution li{text-align:left; position:relative; padding-left:20px}
.solution li::before{content:''; position:absolute; top:9px; left:0; width:12px; height:12px; background:url('/img/solution_li.png') no-repeat center}
.solution li + li{margin-top:3px}

.service{background:#57c2d8; padding:100px 10px; z-index:-2; position:relative}
.service h2{margin-bottom:40px}
.sub.service .line::before{background:#fff}
.sub.service .text{color:#fff}

.service.icon ul{
	display: flex;
    justify-content: space-around;
}
.service.icon ul span{
	color: #fff;
    font-size: 20px;display: block;margin-top:10px;
}

.order{overflow:visible}
.order > div{font-size:0}
.order ul{margin-top:60px; position:relative; display:inline-block; width:50%}
.order ul::before{z-index:-1; content:""; position:absolute; top:123px; left:0; right:0; height:1px; background:#ddd}
.order li{display:inline-block; width:50%}
.order li img{margin-bottom:20px}
.order li .num{position:relative; display:block; width:100%; height:32px; margin-bottom:20px}
.order li .num span{display:inline-block; width:32px; height:32px; line-height:32px; font-weight:700; color:#fff; border-radius:50%; background:#111}
.order li{font-weight:bold}

.qna{text-align:left; max-width:1000px; margin:100px 0}
.qna > div + div{margin-top:100px}
.qna h3{margin-bottom:40px}
.qna .input_list{display:flex}
.qna .input_list li{width:100%}
.qna .input_list li + li, .qna .flexbox > * + *{margin-left:20px}
.qna .input_list input[type="checkbox"]{display:none}
.qna .input_list label{display:block; border:1px solid #ddd; border-radius:100px; padding:15px 0; cursor:pointer}
.qna .input_list input:checked + label{background:#57c2d8; border:1px solid #57c2d8; color:#fff}
.qna .flexbox > *{width:100%}
.qna .flexbox + .flexbox{margin-top:20px}
.qna select{border-bottom:1px solid #ddd; padding:15px 10px; width:100%; background:url('../../img/arrow_icon.png') no-repeat; background-position:right 10px center}
.qna select::placeholder{color:#999}
.qna input[type="text"]{border-bottom:1px solid #ddd; padding:15px 10px; width:100%}
.qna textarea{border:1px solid #ddd; padding:15px 10px; margin-top:20px; height:200px}
::placeholder{color:#aaa}
label input[type="checkbox"]{width:20px; height:20px; margin-top:-2px}
.button{padding:15px; border-radius:100px; color:#fff}
.lg_btn{width:300px; font-weight:bold; font-size:30px}
.bk_blue{background:#57c2d8}

/**/
.work_bg_wrap{
	background: url(/img/portfolio_detail01.png)no-repeat;
    min-height: 700px;
    background-size: cover;
    background-position: center;
	margin-top: 92px;
}

.work_bg_inner{
	min-height: 700px;position: relative;position:relative;
}

.text_inner{
	position: absolute;
    transform: translate(-50%,-50%);
    max-width: 1380px;
    left: 50%;
    margin: 0 auto;
    width: 100%;
    top: 40%;
}

.text_inner h2{
	font-size: 70px;
    font-weight: 700;
    color: #fff;
}
.text_inner p{
	color: #fff;
    font-size: 26px;
    margin-top: 10px;
    padding-left: 5px;
}

.main04{
	display: flex;
    width: 100%;
    justify-content: space-between;gap: 30px;
}
.main04 .f_box{
	max-height: 600px;overflow: hidden;
}
.main04 .f_box.left{
	position: relative;background:#000;width:60%;
}
.main04 .f_box.left p{
	font-size: 40px;
	position: absolute;
	bottom: 50px;
	left: 50px;
	color: #fff;
	z-index: 99;
}
.main04 .f_box.left img,.main04 .f_box.right .three_box img{
	width: 100%;
	height: 100%;
	object-fit: cover;transition:all .3s ease;
}
.main04 .f_box.left img:hover,.main04 .f_box.right .three_box img:hover{
	transform: scale(1.1);
	opacity:0.7;
}
.main04 .f_box.right{
width:40%;
}
.main04 .f_box.right .three_box{
	height: 30%;
	position: relative;margin-bottom: 30px;overflow:hidden;background:#000;
}
.main04 .f_box.right .three_box:last-child{margin-bottom: 0px}
.main04 .f_box.right .three_box p{
	font-size: 25px;
    position: absolute;
    bottom: 25px;
    left: 25px;
    color: #fff;
    z-index: 99;
}

.cont.cont_wrap{padding:100px 0}
.works_title h2{margin-bottom: 30px;}

ul.title_text{
	margin-top:30px;
}

.works_title h2{font-size: 55px;}
.works_title h2 span{
	font-weight:700;font-size: 55px;
}
.works_title p{
	margin-bottom: 30px;
}
.works_title p span{
	margin-right: 30px;color: #666;
}
.pofol_link_btn{
	background: #57c2d8;
    padding: 10px 30px;
    color: #fff;
    border-radius: 30px;
    margin-top: 50px;
	display:inline-block;
}
.title_text li{
	line-height: 50px;
}

.contact_box{
	position: relative;
}
.contact_box .qna{
	width: 70%;
}
.contact_box .right_text{
	width: 30%;
    position: absolute;
    top: 0;
    right: 0;
}
.contact_box .right_text.fixed{
	position: fixed;
    right: -9.4%;
    top: 40%;
    transform: translate(-50%,-50%);
}
.contact_box .right_text p{
	text-align: left;
    font-size: 23px;
    font-weight: 600;
    padding-left: 70px;
    letter-spacing: 0.01em;
}
.contact_box .right_text p span{
	font-size: 23px;
    font-weight: 600;
    color: #ddd;
}

.contact_box .right_text p span.active{
	font-size: 24px;
    font-weight: 600;
	color:#57c2d8;
}

.busi_solution{
	text-align:left;
}
.busi_solution .flex{
	gap: 50px;margin-bottom:100px;
}
.busi_solution .img{
	width: 60%;
    height: 400px;
    overflow: hidden;
}
.busi_solution .text{
	width: 40%;
}
.busi_solution .text h2{
	margin:10px 0 50px;font-weight: 600;
}
.busi_solution .text p{
	color:#777;font-weight: 300;
}
.busi_solution .text p br{display:none;}
.busi_solution .flexnone{
	flex-direction: row-reverse;
}



@media (max-width: 1380px) {
	.conp {
		padding: 50px 10px;
	}
	.sub .title {
		margin: 30px 0 20px 0;
	}
	.topimg p{
		font-size: 50px;
	}
	.busi_solution .text h2 {
		margin: 3.623vw 0 ;
		font-size: 2.899vw;word-break: break-all;
	}
	.busi_solution .text h2 br{display:none;}
	.busi_solution .text p{font-size: 16px;}
}
@media (max-width: 1100px) {
    /* Main */
    .conp{text-align:center; padding:5vw 5px}
    .main_visual .slick-slide > div{text-align:center}
    .main_visual .slick-slide .tit p span{font-size:5vw}
    .main_visual .slick-slide .text{font-size:18px}
    .main02 .tit, .main02 .text{flex:none}
    .main02 .tit{margin-bottom:30px}
    .main04 ul{margin-top:30px}

	.pc_header .menu li + li{
		margin-left: 38px;
	}
    .topimg p {
		font-size: 35px;
	}
    /* About */
    .sub .line::before{height:3vw}
    .about .info h2::after{top:-35px; width:35vw}
	.main04{flex-wrap: wrap;}
	.main04 .f_box.left,.main04 .f_box.right{width:100%;}
	.main04 .f_box.left p{bottom: 25px;
    left: 25px;}
	.main04 .f_box.left{
		max-height:300px;
	}
	.busi_solution .text h2 {
	margin: 0px 0 20px ;font-size: 3.899vw;word-break: break-word;}

}
@media (max-width: 900px) {
	.pc_header .menu li + li {
		margin-left: 20px;
	}
	.contact_box .right_text {
		display:none;
	}
	.contact_box .qna {
		width: 100%;
	}
	.busi_solution .flex{
		display: flex;flex-wrap: wrap;gap: 0;
	}
	.busi_solution .flex .img,.busi_solution .flex .text{
		width: 100%;
	}
	.busi_solution .text h2{
		margin: 40px 0 20px;
	}
}

@media (max-width: 768px) {
    /* Main */
    .container{height:85vh}
    .conp{padding:3vw 10px}
    h2.tac{margin-bottom:7vw}
    .main_visual .slick-slide{height:85vh}
    .main_visual .slick-slide .tit p span{font-size:7vw}
    .main_visual .slick-slide .text{font-size:16px; margin:20px 0 40px 0}
    .basic_btn{width:180px}
    .basic_btn.arrow span{font-size:14px; line-height:50px}
    .want-store{right:20px; bottom:20px; width:65px; height:65px}
    .want-store a span img{width:31px}
    .want-store.hover{width:215px}
    .want-store.hover a span.hover{line-height:65px; font-size:16px}
    .want-store.hover a > img{height:15px; padding-left:20px}

	
    .main02 h2{margin-bottom:20px}
    .main02_1{padding-top:0}
    .main02_1 .slick-list, .main02_1 .slick-slide{margin:0}
    .slick-dots li{height:10px}
    .slick-dots li + li{margin-left:7px}
    .slick-dots button{width:10px; height:10px}
    .slick-dots .slick-active button{width:30px}
    .main03 .main03_img{float:none; width:100%}
    .main03 .main03_img .img{height:35vh}
    .main03_text{display:block; width:100%; height:auto; padding:20px 10px 0 10px}
    .main03_text .swiper-slide > *{padding-left:10px}
    .main03_text h2::before{width:15px; height:15px}
    .main03_text .text{margin-top:20px}
    .main03_btn{right:0; left:auto; top:-50px}
    .main03_btn button{width:50px; height:50px; border-radius:0}
    .main03_btn button svg{width:20px}
    .main04 ul{flex-wrap:wrap}
    .main04 li{width:100%}
    .main04 li + li{margin:20px 0 0 0}


    /* About */
    .topimg {
		position: relative;
		padding-top: 45px;
	}
	.topimg p {
		font-size: 5vw;
		margin-top: 6vw;
	}
    .sub .title{margin:10vw 0 20px 0}
    .about, .portfolio, .solution, .suneung, .qna{margin-top:15vw}
    .about ul{margin:0}
    .about li{width:100%; margin:0}
    .about li + li{margin-top:40px}
    .about li:nth-child(2n){text-align:right}
    .about li:nth-child(2n) .info{padding:0 10px 0 0}
    .about .info{margin-top:-20vw}
    .about .info h2::after{top:-20px; width:52vw; height:20vw}
    .about li:nth-child(2n) .info h2::after{left:auto; right:-11px}
    .sub .img{position:relative; padding-bottom:35vh; overflow:hidden}
    .sub .img img{position:absolute; top:50%; transform:translateY(-50%); left:0; width:100%}

    /* Service */
    .solution .flex > div + div{margin-left:0}
    .solution > div + div, .qna > div + div{margin-top:40px}
    .solution .list h2{margin:20px 0}
    .service{padding:10vw 0}
    .order{overflow:hidden}
    .order ul{width:100%}
    .order ul::before{top:24vw}
    .order li img{height:18vw; margin-bottom:10px}
    .order li .num{height:23px}
    .order li .num span{width:28px; height:28px; line-height:28px}
    
    .suneung li{display:block; text-align:center}
    .suneung li + li{margin-top:40px}
    .suneung li > div + div{margin:20px 0 0 0}

    .qna h3{margin-bottom:20px}
    .qna .input_list li + li, .qna .flexbox > * + *{margin-left:10px}
    .qna .input_list label, .qna select, .qna textarea, .qna input[type="text"]{padding:10px}
    .qna .flexnone > div + div{margin:40px 0 0 0}
    .lg_btn{width:50%; padding:10px; font-size:4.5vw}
	
	.main06{flex-wrap: wrap;gap:0}
	.main06 a{width: 100%;margin-bottom: 50px;}
	.main06 a p{font-size: 20px;margin-top: 5px;}
	.main06 a .img img{width:100%;}
	.main06 a:nth-child(2n){margin-right:0}
	
	.main04 .f_box.left p,.main04 .f_box.right .three_box p{font-size: 17px;}
	.main04 .f_box.left{
		max-height:200px;
	}
	
}