@charset "utf-8";


@import url('navi.css');

/*index*/

.top-banner-txt-wrap {
	position:absolute;
	width:100%;
	z-index:1;
	top:30%;
}

.top-banner-txt {
	position:relative;
	max-width:1400px;
	margin:0 auto;
}

.top-banner-txt h2 {
	color:#ef8944;
	font-size:3.8rem;
	font-weight:700;
	text-shadow:5px 5px 6px rgb(88 60 40 / 20%);
	line-height:5rem;
	margin-bottom:2rem;
}

.top-banner-txt h3 {
	color:#fff;
	font-size:2.25em;
	font-weight:800;
	padding-bottom:10px;
}

.top-banner-txt p {
	color:#fff;
	font-size:1.3rem;
	padding-bottom:7px;
	font-weight:300;
}

.top-banner-txt p i {
	display:inline-block;
	margin-right:5px;
	font-size:.75em;
}

.top-banner-txt a {
	display:inline-block;
	background-color:#ff6700;
	border:1px solid #ff6700;
	color:#fff;
	text-align:Center;
	padding:15px 100px;
	border-radius:50px;
	font-size:1.125em;
	margin-top:30px;
	transition:all .4s ease;
}

.top-banner-txt a.process_btn{padding:0; font-size:15px; border-color:#fff; color:#fff;  background-color:transparent; padding:11px 40px}
.top-banner-txt a.process_btn:hover{border-color:#ff6700; background-color:#ff6700; color:#fff}
.top-banner-txt a:hover, .top-banner-txt a:focus {
	background-color:transparent;
	color:#ff6700;
}

.index-topbanner-img-wrap {
	position:relative;
	overflow:hidden;
	height:1000px;
}

.index-topbanner-img-wrap:before {
	content:'';
	position:absolute;
	width:100%;
	height:100%;
	top:0;
	left:0;
	background-color:rgba(0,0,0,.4);
}

.index-topbanner-img-wrap img {
	width:100%;
	object-fit:cover;
	height:100%;
}


.why-uni-area {
	position:relative;
	max-width:1155px;
	margin:0 auto;
	padding:80px 0;
	display:flex;
	justify-content:space-between;
}

.why-uni {
	position:relative;
	width:45%;
}

.why-uni h4 {
	font-size:1.75em;
	font-weight:800;
}

.why-uni p {
	padding:10px 0;
}

.why-uni p i {
	display:inline-block;
	margin-right:5px;
}

.why-uni-cont {
	position:relative;
	padding:20px 0;
}

.why-uni-cont ul li {
	position:relative;
	display:flex;
	padding-bottom:30px;
}

.why-uni-cont ul li em {
	display:inline-block;
	width:80px;
}

.why-uni-cont ul li em img {
	width:100%;
}

.why-uni-cont ul li dl {
	padding-left:10px;
	width:calc(100% - 80px);
}

.why-uni-cont ul li dl dt {
	font-weight:600;
	padding-bottom:10px;
}

.why-uni-cont ul li dl dd {
	font-size:.875em;
	color:#a4a4a4;
	line-height:1.5;
}

.alumni-story {
	position:relative;
	width:calc(100% - 45%);
	padding-left:5%;
}

.alumni-story h4 {
	font-size:1.75em;
	font-weight:800;
}

.alumni-story p {
	padding:10px 0;
}

.alumni-story p i {
	display:inline-block;
	margin-right:5px;
}

.matching-course-area {
	position:relative;
	max-width:1155px;
	margin:0 auto;
	padding:80px 0;
}

.matching-course-area h4 {
	text-align:center;
	font-size:2.125em;
	font-weight:600;
}

.matching-course-area ul {
	padding-top:60px;
}

.matching-course-area ul:after {
	content:'';
	clear:both;
	display:block;
}

.matching-course-area ul li {
	float:left;
	width:25%;
	padding-bottom:30px;
}

.matching-course-area ul li a {
	display:block;
	padding:0 10px;
	color:#333;
}

.matching-course-area ul li em {
	display:inline-block;
	border-radius:10px;
	transition:all .4s ease;
}

.matching-course-area ul li em img {
	width:100%;
	border-radius:10px;
	
}

.matching-course-area ul li em:hover, .matching-course-area ul li em:focus {
	box-shadow:0 15px 30px rgba(0,0,0,0.20), 0 40px 40px rgba(0,0,0,0.10);
	z-index:10;
}

.matching-course-area ul li span {
	display:block;
	text-align:center;
	padding-top:10px;
	font-size:.875em;
}


.teacher-area {
	position:relative;
	height:400px;
}


.parallax {
  position: relative;
  background-attachment: fixed;
  background-position: center 0;
  background-repeat: no-repeat;
  background-size: cover;

  /**
   * Default height
   */
  height: 100%;
}

.parallax .overlay {
	position:absolute;
	width:100%;
	height:100%;
	background-color:rgba(0,0,0,.5);
	top:0;
	left:0;
}

.parallax-txt-wrap {
	position:relative;
	max-width:1155px;
	margin:0 auto;
	top:20%;
	z-index:1;
}

.parallax-txt-wrap .teacher-tit {
	font-size:2em;
	color:#fff;
	line-height:1.2;
}

.parallax-txt-wrap .teacher-txt {
	color:#fff;
	line-height:1.5;
	padding:15px 0;
}

.teacher-search-btn {
	display:inline-block;
	background-color:#ff6700;
	bordeR:1px solid #ff6700;
	text-align:center;
	color:#fff;
	padding:10px 30px;
	border-radius:20px;
	line-height:1em;
	font-size:.875em;
	transition:all .4s ease;
}

.teacher-search-btn:hover, .teacher-search-btn:focus {
	background-color:transparent;
	color:#ff6700;
}


.why-uni-2 {
	position:relative;
	max-width:1155px;
	margin:0 auto;
	padding:80px 0;
	border-bottom:1px solid #ebebeb;
}

.why-uni-2:after {
	content:'';
	display:block;
	clear:both;
}

.why-uni-2 h4 {
	font-size:2.125em;
	font-weight:800;
	text-align:center;
}

.why-uni-2 p {
	font-size:1.125em;
	text-align:center;
	padding-top:10px;
}

.why-uni-2 ul {
	position:relative;
	padding:50px 0 0;
}

.why-uni-2 ul li {
	position:relative;
	display:flex;
	padding-bottom:30px;
	float:left;
	width:33.333%;
	padding:30px 1.5%;
	transition:all .4s ease;
}

.why-uni-2 ul li:hover, .why-uni-2 ul li:focus {
	background-color:#fff;
	box-shadow:0 15px 30px rgba(0,0,0,0.20), 0 40px 40px rgba(0,0,0,0.10);
}

.why-uni-2 ul li em {
	display:inline-block;
	width:80px;
}

.why-uni-2 ul li em img {
	width:100%;
}

.why-uni-2 ul li dl {
	padding-left:10px;
	width:calc(100% - 80px);
}

.why-uni-2 ul li dl dt {
	font-weight:600;
	padding-bottom:10px;
	font-size:.875em;
}

.why-uni-2 ul li dl dd {
	font-size:.75em;
	color:#a4a4a4;
	line-height:1.5;
}

.uni-family {
	position:relative;
	max-width:1155px;
	margin:0 auto;
	padding:80px 0;
	display:flex;
	justify-content:space-between;
}

.uni-business {
	position:relative;
	width:50%;
	margin-right:10%;
}
.uni-business p.tit {
	font-size:1.5em;
	font-weight:600;
	line-height:1.5;
	letter-spacing:-.5px;
}

.uni-business p.stit {
	font-size:1.125em;
	font-weight:400;
	color:#798696;
	line-height:1.5;
	padding:10px 0;
	letter-spacing:-.5px;
}

.uni-business p.txt {
	font-size:.875em;
	font-weight:400;
	color:#798696;
	line-height:1.5;
	padding-top:10px;
	padding-bottom:20px;
}

.youtube {
	width:100%;
	height:320px;
	margin-top:20px;
	box-shadow:0px 20px 20px rgba(0,0,0,.2);
}


.gallery-area {
	position:relative;
	padding:80px 0;
	overflow:hidden;
}

.gallery-background {
	content:'';
	position:absolute;
	width:100%;
	height:80%;
	background-color:#eeeeee;
	top:30%;
	left:0;
}

.content-slideshow {
  position: relative;
  margin: 0;
  top: 2px;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  height: 40rem;
  overflow: hidden;
}

.uni-cooper {
	position:relative;
	width:calc(100% - 50%);
}

.uni-cooper a {
	display:inline-block;
}

.uni-cooper a img {
	width:100%;
	transition:all .4s ease;
}

.uni-cooper a img:hover {
	opacity:.5;
}

/* instar */
section.instagram{margin:0 auto;}
	div.sec_title_g{text-align:center; padding:50px 0}
	div.sec_title_g div.title2{ font-size:2.125em; font-weight:800;}
	div.sec_title_g div.title4{ font-size:1.25em; font-weight:600;}		
	.instagram_feed.ani{display:flex; margin: 0 auto; justify-content:center; flex-wrap:wrap;}
	.instagram_feed.ani > div{margin:0 10px}
	.instagram_feed.ani div a{position:relative}
	.instagram_feed.ani div a span{display:block; width:220px; height:220px;}
	.instagram_feed.ani div a > div{position:absolute; top:45%; left:50%; transform:translate(-50%)}
	.instagram_feed.ani div a > div > svg{transform:scale(0); transition:0.5s cubic-bezier(0.25, 0.1, 0, 1.03); fill:#eb2222;}
	.instagram_feed.ani div:hover svg{transform:scale(0.75); }

/* 퀵토킹의 강점*/
article.strength_wrap{background-color:#f1f4f6; margin:0 auto 100px; width:95%; padding:70px 0; border-radius:10px}
	article.strength_wrap h1{font-size:2.125em; font-weight:600; text-align:center; margin-bottom:60px}
	.strength_list{display:flex; justify-content:center; max-width:1155px; margin:0 auto}
	.strength_list > article{width:calc(33% - 20px); margin:0 10px; }
	.strength_list > article div.swiper{padding-bottom:30px}
	.strength_list > article div.swiper-slide img{width:100%;}
	.strength_list div.swiper .swiper-button-prev,
	.strength_list div.swiper .swiper-button-next { background-color:rgba(0,0,0,0.6);  padding: 25px 25px;  color: #ff6700 !important;}
	.strength_list div.swiper .swiper-button-prev{left:0}
	.strength_list div.swiper .swiper-button-next{right:0}
	.strength_list div.swiper .swiper-button-prev:after,
	.strength_list div.swiper .swiper-button-next:after {  font-size: 28px !important;  font-weight: 600 !important;}
	.shorts-container {position: relative; width: 100%;}
	.shorts-iframe {position: absolute;width: 100%;height: 100%;left: 0;top: 0;border: none;}
	.swiper-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet, 
	.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{background-color:#ff6700}

@media screen and (max-width: 1680px){
	
}

@media(max-width:1300px){
	.instagram_feed.ani div a span{width:170px; height:170px}
}

@media screen and (max-width: 1200px){
	.gnb-wrap {
		padding:15px 5%;
	}

	.top-banner-txt {
		padding:0 5%;
	}

	.why-uni-area, .why-uni-2, .uni-family {
		padding:80px 5%;
	}

	.parallax-txt-wrap {
		padding:0 5%;
	}

	.matching-course-area ul {
		padding:60px 5% 0;
	}
}


@media screen and (max-width: 1024px){

}
@media(max-width:1023px){
	.top-banner-txt h2{font-size:2.6rem; margin-bottom:2rem; margin-bottom:1rem;}
	.top-banner-txt p{font-size:1.1rem}
	.instagram_feed.ani > div{margin:0 5px;}
	.instagram_feed.ani div a span{width:130px; height:130px}
	.strength_list div.swiper .swiper-button-prev, 
	.strength_list div.swiper .swiper-button-next{padding:25px 15px}
	.strength_list div.swiper .swiper-button-prev:after,
	.strength_list div.swiper .swiper-button-next:after {  font-size: 20px !important;}
}
@media screen and (max-width: 860px){
	.why-uni-area, .uni-family {
		display:block;
	}

	.why-uni {
		width:100%;
	}

	.alumni-story {
		width:100%;
		padding-left:0;
		padding-top:30px;
	}

	.why-uni-cont ul li dl dd br {
		display:none;
	}

	.why-uni-2 ul li {
		float:none;
		width:100%;
	}

	.uni-business {
		width:100%;
		margin-right:0;
		padding-bottom:50px;
	}

	.why-uni-2 ul li dl dt br {
		display:none;
	}
}

@media (max-width: 768px) {
	  .parallax {
	 background-attachment: scroll;
	}
	
	.parallax-txt-wrap .teacher-tit {
		font-size:1.5em;
	}

}


@media(max-width:767px){
	
	.top-banner-txt-wrap {top:56%;transform:translateY(-50%);}
	.top-banner-txt h2{font-size:21px; line-height:2rem; margin-bottom:10px;}
	.top-banner-txt p{font-size:14px}

	.instagram_feed.ani{height:400px; padding:0 5%; }
	.instagram_feed.ani > div{margin:0 5px 10px 5px;height:130px; box-sizing:border-box;display:flex; justify-content:center; align-items:center; }
	.instagram_feed.ani div a{}
	.instagram_feed.ani div a span{width:130px; height:130px;}
	article.strength_wrap{padding:30px 0; width:90%;}
	article.strength_wrap h1{font-size:1.25em; margin:0}
	.strength_list{padding:20px; flex-wrap:wrap; }
	.strength_list > article{width:90%; margin:0 0 20px; }
	.strength_list > article:last-child{margin-bottom:0}

}

@media screen and (max-width: 520px){
	body { letter-spacing:-1px;}
	.index-topbanner-img-wrap {
		height:400px;
	}

	.gnb-wrap p a {
		font-size:.875em;
	} 


	.top-banner-txt h3 {
		font-size:1.75em;
	}
	.top-banner-txt a {
		font-size:.875em;
	}

	.why-uni-area {
		padding:50px 5%;
	}

	.uni-business p.tit {
		font-size:1em;
	}

	.uni-business p.stit {
		font-size:.875em;
	}
	
	.uni-business p.txt {
		font-size:.75em;
	}

	.matching-course-area h4, .why-uni-2 h4 {
		font-size:1.75em;
	}

	.parallax-txt-wrap .teacher-tit {
		font-size:1.125em;
	}

	.parallax-txt-wrap .teacher-txt {
		font-size:1em;
		padding:15px 0px 30px;
	}

	.parallax-txt-wrap .teacher-txt br {
		display:none;
	}

	.content-slideshow {
		height:20em;
	}

	.matching-course-area ul li {
		width:50%;
	}

	.matching-course-area ul li span {
		font-size:.75em;
	}
	
}

@media (max-width: 480px) {
	body {font-size:.875em;}
	.why-uni h4, .alumni-story h4 {
		font-size:1.25em;
	}

	.why-uni p, .alumni-story p, .why-uni-2 p {
		font-size:.875em;
	}

	.why-uni-cont ul li dl dt {
		font-size:.875em;
	}

	.why-uni-cont ul li dl dd {
		font-size:.75em;
	}

	.matching-course-area h4, .why-uni-2 h4 {
		font-size:1.25em;
	}

	.parallax-txt-wrap .teacher-tit {
		font-size:1em;
	}

	.parallax-txt-wrap .teacher-txt {
		font-size:.875em;
	}

	.teacher-search-btn {
		font-size:.75em;
	}
}

@media screen and (max-width: 400px){
	.gnb-wrap p a {
		font-size:.75em;
	} 

	.matching-course-area ul li {
		width:100%;
	} 

}

@media screen and (max-width: 300px){
	body {font-size:.75em;}
}