@charset "utf-8";
/*----------------------공통 css로 쓸 부분---------------------------------*/
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@700&display=swap');


@font-face {
	font-family: 'Pretendard-Regular';
	src : url('/g5/theme/basic/font/Pretendard-Regular.woff2') format("woff2"), url('/g5/theme/basic/font/Pretendard-Regular.woff') format("woff");
}
@font-face {
	font-family: 'Pretendard-Medium';
	src : url('/g5/theme/basic/font/Pretendard-Medium.woff2') format("woff2"), url('/g5/theme/basic/font/Pretendard-Medium.woff') format("woff");
}


@font-face {
	font-family: 'Pretendard-Bold';
	src : url('/g5/theme/basic/font/Pretendard-Bold.woff2') format("woff2"), url('/g5/theme/basic/font/Pretendard-Bold.woff') format("woff");
}

*{;word-break:keep-all; margin:0; padding: 0; box-sizing: border-box; font-size:16px}
section{width:100%; position: relative; }
.content{width: 1400px!important; margin: 0 auto; }
li{list-style: none;}
a {color:#000;text-decoration:none}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
html{scroll-behavior: smooth}
body{overflow-x: hidden;}

section{padding: 100px 0;}

.center-title{ text-align: center; font-size: 2rem; margin:0 auto 60px;}
.center-title h1{ font-size: 2.5rem; }
.center-title h2{ font-size: 3.5rem; margin-top:10px;}
.center-title h2 span{ font-size: 2rem; background-image: url('/theme/basic/img/back_line.png'); background-position: center;background-size: cover;}
.center-title h3{ display: inline-block;font-size: 1.2rem; margin-top:30px; background:#06345a; color: #fff; padding: 15px 10%;font-weight: 400;}
.center-title h4{font-size: 1.4rem; margin-top:20px; font-weight: 400;}
.center-title h4 span{font-size: 1.4rem;  font-weight: 600}
.center-title p {font-size: 1.4rem; margin-top:40px;}

.left-title{ text-align : left; margin:0 auto 60px;}
.left-title h2{ font-size: 3rem;}
.left-title h4{ font-size: 1.4rem; font-weight: 400; margin-top:10px;}


.line{ width: 40px; height: 3px; background: #222; margin: 0px auto 40px;;}

.row-flex{ width:100%; display: flex; flex-direction: row; justify-content: center;flex-wrap: wrap}
.column-flex{display: flex; flex-direction:column;justify-content: center;align-items: center}


.banner-grid2 > div{ width: 48% ; margin: 0 1%; }
.banner-grid3 > div{ width: 31% ; margin: 0 1%; }
.banner-grid4 > div{ width: 22% ; margin: 0 1%; }
.banner-grid5 > div{ width: 18% ; margin: 0 0.5%; }
.bg-color{ background: #f2f2f2;}
.bg-img{  background-position: center; background-repeat:no-repeat; background-size:cover;}



.m_none{display: block!important;}
.m_block{display: none!important;}

.m_aside,.m_aside a{ display: none;}

footer{width:100%; background: #fff;padding: 60px 0;}

footer .content{}
footer .content .ft_left > img{width: 220px; }
footer .content .ft_left { width:100%; display: flex;align-items: flex-start;justify-content: space-between;}
footer .content .ft_left .ft_info{ color: #222; line-height: 1.5; font-size: 0.8rem;text-align: center; font-size: 1.1rem;;}
footer .content .ft_left span{ font-weight:bold; padding-right: 5px;font-size: 0.9rem;}
footer .content .ft_left .family_site{ padding: 10px 25px; border: 1px solid #00072b; border-radius: 30px; font-size: 1.2rem; }
footer .content .ft_left .family_site img{margin-left: 20px; }
aside{position: fixed; bottom: 4%; right:2%; z-index:10000; display: flex; flex-direction:column}
aside a{margin-bottom:10px}




@media (max-width: 767px ){

	footer{width:100%; padding: 40px 0;}
	footer .content{flex-direction:column;}
	footer .content div{margin-left: 0;  margin-top:20px; font-size: 0.8rem}
	
	footer .content .ft_left div{ text-align: left; font-size:14px;}
	footer .content div span{font-size:14px;}

	footer .content .ft_right{width:90%;flex-direction: row ;flex-wrap: wrap;justify-content: flex-start}
	footer .content .ft_right a{width: 45%; margin: 0px 1%;}

	footer .content .ft_right div{width: 100%; height: 40px;}

	footer .content .ft_right a{width:33px;}
	footer .content .ft_right a img{width:30px}

	aside img{width:50px;}



}

/*메인*/

.section1{padding-top: 60px;}
.main_title{width:100%; margin-bottom:60px; }
.main_slide{ width:100%;}
.main_slide .slick-slide{ width:100%;  height: 960px; background-position:center; background-repeat: no-repeat; background-size:cover;}
.slide_text{ position: absolute; top: 55%; left: 50%;transform: translate(-50%, -50%); width:1400px;}
.slide_text > h1{text-align:left; color: #fff; font-size:72px;}
.slide_text > p{text-align:left; color: #fff; font-size:28px; margin-top: 30px; line-height: 1.5}
.main1_ul{display: flex; flex-direction:row;justify-content: flex-start; margin-top:80px;}
.main1_ul li{ display : flex ;flex-direction:row; align-items: center;color: #fff;font-size:26px; margin-right:19px }
.main1_ul li span{color: #5dc8ba; margin-right:7px}


.video {
    width: 70%;
    height: 0;
	margin:0 auto;
    padding-top: 39.35%; /* 가장 중요 */
    position: relative;
}

.video iframe {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}



.section2 ul { width:100%; display: flex; flex-direction: row; flex-wrap: wrap;justify-content: space-around;align-items: center }
.section2 ul li{ width: 42% ;  margin: 1%;}
.section2 ul li h2{  color: #fff;  font-size: 4rem}
.section2 ul li h2 strong{ font-size: 4rem }
.section2 ul li p{ color: #fff;padding: 50px 0px 30px; font-size: 1.5rem; line-height: 2; word-break : keep-all}
.section2 ul li img {width:100%; }

.section8 .center-title h2, .section3 .center-title h2, .section3 .center-title h4{ color: #fff; } 
.section3 .row-flex { margin-top: 140px;}
.section3 .row-flex div{color: #fff; border-left: 4px solid #fff; line-height: 0.2; padding: 0 7%; text-align: center;}
.section3 .row-flex div:first-child{border: none;}
.section3 .row-flex div h3{ font-size: 5rem;   }
.section3 .row-flex div p{ margin-top: 60px;}

.section4 .content{width:100%!important; justify-content: flex-end }
.section4 .left-title h2, .section4 .left-title h4{ color: #fff; }
.section4 .left-title{width: 30%; padding:0 2% 0 5%;}
.sc_slide {width: 65%;}
.sc_slide li{  opacity: 0.6; margin:0 7px; text-align: center; background: #fff; padding:50px 20px; border-radius: 24px;
				display: flex!important; flex-direction: column; justify-content: center;align-items: center }
.sc_slide li img{width: 90%;}

.sc_slide li p{font-size: 1.5rem; margin-top: 10px; }
.section4 .left-title a{ display: inline-flex;  align-items: center; padding-bottom: 5px;color: #fff; margin-top: 30px; font-size: 1.3rem; border-bottom: 1px solid #fff;  }
.section4 .left-title a img{ margin-left: 10px; }
.sc_slide .slick-current{ opacity: 1; }


.section5{ background-image: url('/img/main_bg1.png')}
.section5 .left-title{width:100%; margin:0; }
.section5 .row-flex{ justify-content: space-between; align-items: center; margin-top: 60px; }
.section5 .row-flex > div:first-child{ width: 48%;  }

.section5 .row-flex > div:first-child div {width: 100%; padding: 40px 0; border-bottom: 1px solid #dfdfdf;}
.section5 .row-flex > div:first-child div h3{ font-size: 2rem;}
.section5 .row-flex > div:first-child div p{ margin-top: 20px; font-size: 1.3rem; line-height: 1.5}

.section5 .row-flex > div:first-child div:hover{ border-bottom:1px solid #222;}
.section5 .row-flex img{ width: 35%; }



.section6 {background-color: #f2f2f2}
.section6 .left-title{ display: flex; flex-direction: column; }
.section6 .left-title .row-flex{ margin-top:30px; justify-content: space-between;align-items: flex-end }
.section6 .left-title .row-flex a{ display: inline-flex;  align-items: center; padding-bottom: 5px;font-size: 1.3rem; border-bottom: 1px solid #222;}
.section6 .left-title .row-flex a img{ width:20px; margin-left: 10px; }

.portfolio_list {width: 100%;  display: flex; flex-wrap: wrap; justify-content: space-between;}
.portfolio_list img{ margin: 10px 1%; width: 18%;}



.section7 {background: #fff; }
.section7 .content{ width: 1600px!important; background : #091925; padding:70px; justify-content: space-between; }


.section7 .left-title h3, .section7 .left-title h4{ color: #fff; }
.section7 .left-title h4{margin-top:0; }
.section7 .left-title h3{ margin-top: 30px;margin-bottom: 60px; font-size: 1.5rem; }
.section7  .left-title{ margin:0;}


.section8{ padding-bottom: 32.25%; background-image: url('/img/main_top2.png'); background-repeat: no-repeat, no-repeat; background-position: bottom;  }
.section8 .center-title{margin-top: 40px;}
.section8 .center-title h2{ font-size: 5rem; display: flex; align-items: baseline;justify-content: center;}
.section8 .center-title h4{ color: #fff; font-size: 3rem; text-align: right; font-weight: bold;}
.section8 .center-title h2 img{margin-left: 15px;}


.section9{background-color: #f2f2f2}
.section9 .content{width:100%!important; overflow-x: hidden; }
.section9 .center-title{ display: flex; flex-direction: column; }

.section9 .list_box{ width: 100%;  overflow: hidden; position: relative;}
.section9 .list li{width: 3.3%; margin: 30px 0.1%; position: relative;}
.section9 .list li img{width: 100%;}
.section9 .list li div{ position: absolute; top: 10px; right:10px; background: #fff; width: 120px; border-radius: 30px; padding:10px 0;text-align: center;}

.list {
  display: flex;
  width: max-content;
  animation: scrollLeft 60s linear infinite;
  padding: 0;
  margin: 0;
  list-style: none;
}

@keyframes scrollLeft {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-50%);
  }
}


.counseling_box{ width: 55%;display: flex; flex-direction : row;}
.counseling_box > .row-flex{ margin-right:20px;  align-items: flex-end;justify-content: space-around;padding-bottom: 10px; border-bottom: 1px solid #fff;}
.counseling_box > .row-flex > img{ }
.counseling_box a{color: #fff; display: inline-flex; align-items: center;font-size: 1rem;  }
.counseling_box a img{margin-left: 10px ;}



aside{ position: fixed; right:0; bottom: 10%; background: #fff; width: 260px; border-radius: 21px; }
aside > div:first-child{ background: linear-gradient(180deg,rgba(42, 112, 250, 1) 0%, rgba(86, 75, 227, 1) 50%, rgba(102, 31, 207, 1) 100%); padding: 15px;
							text-align: left; color: #fff; font-size: 1.3rem; font-weight: 500; border-top-left-radius: 20px; border-top-right-radius: 20px;}

aside > div:last-child{ padding: 10px 20px 20px;; }

aside > div:last-child input,  aside > div:last-child textarea , aside > div:last-child select{width: 100%; border: 1px solid #f5f5f5;
	margin-top: 10px; border-radius: 10px; padding: 7px 5px; font-size: 0.8rem; resize: none;}

 aside > div:last-child textarea{ height: 80px;}

aside > div:last-child button {margin-top: 10px; width: 100%; padding :10px 7px; text-align: center; color: #fff; background: #222; border-radius: 10px; border: none;}

/*서브*/



.sub_top{width:100%; height: 540px;position: relative;  background-size: cover;background-position: center; }

.sub_top_text{ width:1400px; position: absolute; z-index: 10; top: 50%; left: 50%; transform: translate(-50%,-50%);  }
.sub_top_text h1{color: #fff; font-size: 60px; line-height: 1.3; text-align: left;}
.sub_top_text h2{color: #fff; font-size:32px; margin-top:20px; text-align: left;}

.sub_top_nav{ width:100%; height: 80px; background: #05345e;bottom:0;}
.sub_top_nav .content{display: flex; height: 79px;align-items: center;justify-content: flex-start;flex-direction: row}
.sub_top_nav .content a{ margin-right: 4%; color:#fff; border-bottom: 2px solid #05345e; padding-bottom:3px;}
.sub_top_nav .content .active{ border-bottom: 2px solid #fff;}



/*서브상단*/
.sub_page_title{ text-align: left; margin: 160px auto 60px; }
.sub_page_title h1{font-size: 54px; font-family: 'Pretendard-Bold';}
.sub_page_title h2{ font-size: 3rem;color: #fff; margin: 30px 0 ; font-family: 'Pretendard-Bold'; }
.sub_page_title h2 span{ font-size: 3rem; font-family: 'Pretendard-Bold'; }
.sub_page_title h3{ color: #fff; font-size: 1.5rem; font-family: 'Pretendard-Regular'; font-weight: 100;}
.sub_page_title p { font-size: 1.5rem; line-height: 1.5; word-break: inherit; color: #fff; }
.sub_scroll{ height: 380px; background-attachment: fixed; background-repeat: no-repeat; background-size:contain; background-position:bottom;}


/*회사소개*/
.sub1_1 .center-title{margin: 120px auto 160px; display: flex; flex-direction:column;align-items: center; justify-content: space-between;}
.sub1_1 .center-title h4{color: #fff; line-height: 1.7; margin-bottom: 60px; text-align: center;word-break : keep-all}
.sub1_1 .center-title .sub1_1_link { display: flex ;flex-direction:row;}
.sub1_1 .center-title .sub1_1_link a{ background: #0bc7db; ; text-align: center; padding: 14px 35px; border-radius: 30px; font-size: 1.4rem;margin: 30px 10px;}
.sub1_1 .center-title .box{ width:1px; height: 60px; background: #f2f2f2; margin: 30px auto;}							 


.sub_flex{ display: flex; justify-content:  flex-start; align-items: flex-start; color: #fff; width:1200px; margin: 0 auto 80px}
.sub_flex .title{ width: 390px; }
.sub_flex .title h2{ width: 100%; height: 160px;justify-content: space-around; color: #2f87ff; font-size: 7.5em; font-family: 'Pretendard-Bold'!important;
						 display: flex; align-items: center; }

.sub_flex .title h2 span{ width: 20px; height:20px; background: #2f87ff; display: inline-block; }

.sub_flex .info{ padding: 30px 0 0 45px; }
.sub_flex .info li{ margin-bottom: 30px;}
.sub_flex .info h3{ font-size: 1.8rem; letter-spacing: 1px;}
.sub_flex .info p{margin-top: 10px; font-size: 1.2rem; line-height: 1.5}


/*함께한 작품들*/

.sub1_4 .center-title { margin: 120px; auto ;}
.sub1_4 .center-title h4{color: #fff; font-size: 6rem; font-family: 'Pretendard-Bold'!important;}
.sub1_4 .center-title p{ color: #fff; font-size: 2rem}
.sub1_4 .center-title div{ width:1px; height: 160px; background: #f2f2f2; margin: 120px auto;}
.sub1_4 .sub_tab{ background: #171b3f; border-radius: 30px;width:70%; display: flex; flex-direction:row; justify-content: space-between; margin: 60px auto 30px;  }
.sub1_4 .sub_tab li{width: 32%; text-align: center; padding: 20px 10px; color: #fff; font-size: 1.2rem; cursor: pointer;}
.sub1_4 .sub_tab .tab_active{ background:#2f87ff; border-radius: 30px; }

.sub1_4_list{ display: flex; justify-content: center;flex-wrap: wrap; justify-content: flex-start; }
.sub1_4_list li{width: 23%; margin: 30px 1%; position: relative;}
.sub1_4_list li img{width: 100%;}
.sub1_4_list li div{ position: absolute; top: 10px; right:10px; background: #fff; width: 120px; border-radius: 30px; padding:10px 0;text-align: center;}



#list1 div{border: 2px solid #ff0084; color: #ff0084; }
#list2 div{border: 2px solid #6220d0; color: #6220d0; }
#list3 div{border: 2px solid #3cd39c; color: #3cd39c; }

.list_box{ display: none;}
.active_box{ display: block!important;}


.m_asdie{display: none;}

@media(max-width:1800px){

.section7 .content{ width: 100%!important;}

.section8{ padding-bottom: 42.25%;}


}

@media(max-width:1400px){

	.content{ width:95%!important; ; margin:0 auto;}

	.section9 .content{width:95%!important; overflow-x: hidden; }

	footer .content{ width: 95%!important;}
	.ft_left > img{ width: 140px;}

	
.section8{ padding-bottom: 52.25%;}


}

@media(max-width:1200px){

	.main_slide .slick-slide{ height: 100vh;}


	.section5 .row-flex > div:first-child div{padding: 20px 0;}
	.section5 .row-flex > div:first-child div h3{font-size: 2rem ;}
	.section5 .row-flex > div:first-child div p{font-size :1rem; }
	.section5 .row-flex img{ width: 40%;}

	

	.counseling_box > .row-flex{flex-direction: column; align-items: center}

	
	.sub_flex{ width:95%;flex-direction: column; }

	.sub_flex .title{width:  100%; }
	.sub_flex .title h2{font-size: 4rem;justify-content: flex-start; height: auto; margin-bottom: 20px;}
	.sub_flex .title h2 span{margin-left: 30px; width: 15px; height: 15px;}

	.sub_flex .info{padding: 0;}
	.sub_flex .info h3{ font-size: 1.3rem; letter-spacing: 1px;}
	.sub_flex .info p{margin-top: 10px; font-size: 1rem; line-height: 1.5}


	.sub1_4 .center-title img{width: 85%;}
	.sub1_4 .center-title{margin: 80px auto;}

	.sub1_4 .center-title div{ margin: 80px auto; height: 80px;}
	.sub1_4 .center-title h4{font-size: 3rem;}

	footer .content .ft_left{ flex-direction: column; align-items: center}
	.ft_info{ margin: 20px 0; text-align :left;}

	.sub1_1 .center-title{flex-direction: column;}
	.sub1_1 .center-title h4{text-align: center; }

	.sub1_1 .center-title .sub1_1_link{width: 100%;align-items: center}



}
@media(max-width:900px){



.row-flex{justify-content: center; }

.banner-grid5 > div{ width: 48% ; margin:  1% 1% 40px; }
.banner-grid4 > div{ width: 48% ; margin:  1%; }

.m_block{display: block!important;}
.m_none{display: none!important;}


.center-title {margin:0 auto 40px;padding: 0 ;}
.center-title h1{ font-size: 1.4rem; }
.center-title h2{ font-size: 2rem; }
.center-title h2 br{ display: none}
.center-title h2 span{ font-size: 1.4rem; }
.center-title h3{font-size:1rem; padding: 15px 2%;width:100%; }
.center-title p{font-size: 1rem}

.left-title{ margin:0 auto 40px;}
.left-title h1{ font-size: 1.7rem;}
.left-title h2{ font-size: 2rem; }
.center-title h4{ font-size:1.25rem}

.sub_scroll{ height: 240px; background-position: -506px; background-size: inherit;}


.section3 .row-flex{ width:100%; margin-top: 50px; justify-content: space-evenly }
.section3 .row-flex div h3{ font-size: 3rem ;}

.section2 ul li h2{font-size: 3rem; }
.section2 ul li h2 strong{ font-size: 3rem }
.section2 ul li p{font-size: 1.25rem; padding: 10px 0px 20px}
.section2 ul { flex-direction: column; }
.section2 ul li{width: 90%; }

.section3 .row-flex div{padding: 0 3%; line-height: 1;  border: none; }
.section3 .row-flex div p{margin-top: 20px; }


.sc_slide{width: 100%;  margin-top: 30px; }
.sc_slide li{opacity: 1; padding: 20px 10px; }
.sc_slide li img{width: 98%;}
.sc_slide li p{font-size: 1rem; }

.section4 .left-title{width: 100%; }

.section5 .row-flex > div:first-child{width: 55%;}


.section7 .content{padding: 30px; }
.counseling_box{width: 100%;}

.counseling_box a{margin: 20px auto 10px; }

.video {width: 90%; padding-top: 50.35%; /* 가장 중요 */}

.section5 .row-flex > div:first-child div h3{font-size: 1.3rem}
.section5 .row-flex > div:first-child div p { word-break: keep-all}
.section5 .row-flex > div:first-child div p br{ display: none;}


.section7{padding: 0!important;}

.section9 .list li{width: 2.5%;}
}





@media(max-width:767px){

	*{font-size: 16px;}

	section{padding: 60px 0;}
	aside {display: none;}


	.center-title p br{ display: none;}

	.section4 .content{ flex-direction: column; }

	.section5{background-position: center; }
	.section5 .row-flex{margin-top: 30px ;}
	.section6 .left-title .row-flex{ flex-direction: column; align-items: flex-start}
	.section6 .left-title .row-flex a{ margin-top: 30px; }

	

	.section8{ padding-bottom: 52.25%;background-size: contain; background-position: bottom}
	.section8 .center-title h2{font-size: 3rem;}
	.section8 .center-title h2 img{height: 40px;}
	.section8 .center-title h4{ font-size: 1.5rem; text-align: center;}

	.portfolio_list{justify-content: flex-start;}
	.portfolio_list img{width :30%;}


	.sub1_1 .center-title h4 br{ display: none;}



	.sub1_4 .sub_tab{width: 100%;}

	.sub1_4 .sub_tab li{padding: 10px 5px;}

	.sub1_4 .sub_tab{width:100%;}

	
	.sub1_4_list li{width: 48%;}




	footer .content .ft_left > img{width: 180px;}
}

@media(max-width:550px){

*{font-size: 14px; }
.sub_top{height: 235px}
.sub_top_text h1{font-size:26px}
.slide_text{top: 54%;}
.main1_ul{ margin-top:30px;}
.main1_ul li{font-size: 1rem}

.sub_page_title{ margin: 120px auto 60px}

.sub_page_title h2, .sub_page_title h2 span{font-size: 1.8rem;}
.sub_page_title h2{margin: 15px auto 30px;}
.section5 .row-flex > div{flex-direction: column;}
.section5 .row-flex > div:first-child{width:100%;}

.section5 .row-flex img{width: 100%; margin-top: 60px; }

.section5 .row-flex > div:first-child div p{margin-top: 5px; }

.counseling_box{flex-direction: column;}
.counseling_box > .row-flex{flex-direction: row;justify-content: space-between; margin: 0 0 20px 0;align-items: flex-end;}

.counseling_box a{margin:0;}

.counseling_box > .row-flex > img{width: 50px; }

.sub_scroll{ height: 240px; }

.sub1_1 .center-title{ margin: 80px auto;}
.sub1_4_list li div{width: 80px; padding: 7px ;}

.sub1_1 .center-title .sub1_1_link a{width:100%;}
}

@media(max-width:400px){


.banner-grid4 > div{ width: 100% ; margin:  2% 1%; margin-bottom:25px; }
.banner-grid5 > div{ width: 48% ; margin:  2% 1%; }

.banner3 > div img{ width: 55%}

.banner-grid5 > div{ width: 86% ; margin:  1% 1% 30px; }

.section7 .row-flex div{width: 100%; margin-bottom:15px;}

	.section8 .center-title h2{font-size: 2.5rem;}
	.section8 .center-title h2 img{height: 30px; margin-left: 5px;}
	.section8 .center-title h4{ font-size: 2rem;}
}