@charset "utf-8";

/* 테마/sub/서브페이지.php 에 사용되는 css를 추가 할 수 있습니다. */


/* ****************************************************************************************** */
/* sub section common */
.sub_sec{padding:100px 0 150px}
.sub_sec .title{padding-bottom:4rem; text-align:center;}
.sub_sec .title h3{padding-bottom:4px; letter-spacing:0.02em; text-transform:capitalize; font-size:36px; font-weight:400;}
.sub_sec .title h3 span{text-transform:uppercase;}
.sub_sec_con{}

.snb_inner {/*border-top: 1px solid rgb(241, 241, 241);  border-bottom: 1px solid rgb(241, 241, 241);*/ text-align:center }
.snb_inner ul.snb_list { margin:0 auto}
.snb_inner ul.snb_list li { display:inline-block; padding:0 50px; width:auto; margin:0; text-align:center;}
.snb_inner ul.snb_list li a { display:inline-block;  position:relative;  margin:0 auto; font-size: 18px;letter-spacing: .05em; line-height: 1.2em;  padding:20px 0; color:#fff; font-weight:600; opacity:1; text-transform: uppercase; transition: all .4s}
.snb_inner ul.snb_list li a:after {content: ""; display:block; height: 2px; width:0; position: absolute; bottom:-1px; left: 0px; background-color:#72f3db; -webkit-transition: all .4s; transition: all .4s;}
.snb_inner ul.snb_list li:hover a, .snb_inner ul.snb_list li.active a{ color:#72f3db; opacity:1  } 
.snb_inner ul.snb_list > li:hover > a:after, .snb_inner > ul.snb_list > li.active a:after { width:100%; } 
@media screen and (max-width:1440px){
	.snb_inner ul.snb_list li { padding:0 30px; }
}
@media screen and (max-width:1200px){
	.snb_inner ul.snb_list li { padding:0 15px; }
	.snb_inner ul.snb_list li a { font-size:16px; padding:18px 0;}
}
@media screen and (max-width:1024px){
	.snb_inner ul.snb_list li { padding:0 10px; }
	.snb_inner ul.snb_list li a { font-size:15px; padding:15px 0;}
}
@media screen and (max-width:980px) {
	.snb_inner ul.snb_list li { padding:0 8px; }
	.snb_inner ul.snb_list li a { font-size:13px; padding:12px 0;}
}

/* ****************************************************************************************** */
/* about.php - 회사소개 */
.about_intro_sec dl{}
.about_intro_sec dl dt{position:relative; height:360px; background:url('../img/about_intro.jpg') center no-repeat; background-attachment:fixed;}
.about_intro_sec dl dt span{position:absolute; font-size:72px; font-weight:100; color:#fff;}
.about_intro_sec dl dt span:first-child{top:1rem; right:1rem;}
.about_intro_sec dl dt span:last-child{bottom:1rem; left:1rem;}
.about_intro_sec dl dd{padding-top:2rem;}
.about_intro_sec dl dd h2{padding-bottom:1rem; letter-spacing:-0.04em; font-size:48px; font-weight:300;}
.about_intro_sec dl dd div{padding-left:11rem; font-size:0}
.about_intro_sec dl dd p{display:inline-block; width:50%; padding-left:1rem; vertical-align:top; line-height:1.8; font-size:15px;}
.about_intro_sec dl dd span{display:block;}

/* 회사철학 */
.about_phil{max-width:1024px; width:100%; margin:auto; font-size:0;}
.about_phil li{display:inline-block; width:calc(33.3333% - 32px); margin:0 16px; box-shadow:0 3px 6px 0 rgba(0,0,0,0.1); text-align:center; font-size:15px; vertical-align:top;}
.about_phil li:first-child{background:#237ab8; color:#fff;}
.about_phil li:nth-child(2){background:#5bb6e2; color:#fff;}
.about_phil li:nth-child(3){background:#f7f7f7;}
.about_phil li .icon{padding:24px; position:relative;}
.about_phil li:nth-child(3) .icon:after{background:#646873;}
.about_phil li .icon figure{width:4rem; height:4rem; margin:0 auto; padding:0; border-radius:2rem; background:#fff; position:relative;}
.about_phil li .icon figure img{position:absolute; top:50%; left:50%; margin-top:-22px; margin-left:-22px;}
.about_phil li .txt{padding:0 24px 16px;min-height:150px;}
.about_phil li .txt h4{padding-bottom:1rem; text-transform:uppercase; letter-spacing:0.1em; font-size:1.125rem; font-weight:700; }

/* 프로필 */
.about_profile_sec{background:#fafafa;}
.about_profile_sec > .inner{max-width:1024px; margin:auto; padding:0 14px;}
.about_profile_sec dl{margin-bottom:10px; padding:15px 40px; background:#fff; line-height:1;}
.about_profile_sec dl:after{content:""; display:block; clear:both;}
.about_profile_sec dl dt{float:left; width:200px; padding:10px 0; text-align:center; font-weight:600;}
.about_profile_sec dl dd{margin-left:200px; padding:10px 0;}



/* ****************************************************************************************** */
/* contact.php - 오시는길 */
.contact_sec .address_info{margin-top:-5px; padding:1.5rem 2rem; background:#f9f9f9; font-size:0;}
.contact_sec .address_info dl, .contact_sec .address_info dl dt, .contact_sec .address_info dl dd{display:inline-block; vertical-align:middle; line-height:1;}
.contact_sec .address_info dl{width:50%; font-size:15px;}
.contact_sec .address_info dl dt{font-weight:600; padding:.75rem 1.5rem; border:1px solid #646873; border-radius:2rem;}
.contact_sec .address_info dl dd{padding-left:.5rem; font-size:18px;}
.contact_sec { height:100%}
.contact_sec .content{ width:100%; height:100%; padding:5% 7%; }
.contact_sec .cont_map { width:60%; height:100%; float:right}
.contact_sec .cont_txt { width:40%; float:left; text-align:left; }
.contact_sec .content h1{/*font-family: proxima-nova;*/ font-size:38px; line-height:1.4; letter-spacing:1px; margin:40px 0 30px; color:#72f3db; font-weight: 600; /*text-transform: uppercase;*/}
.contact_sec .content h1:first-child { margin-top:0}
.contact_sec .content p {font-family: Open Sans; font-weight: 100; font-style: normal; font-size: 20px; letter-spacing: 0; line-height: 1.5; color: #fff; word-break:normal; }
.contact_sec .content a { color:#fff}
.contact_sec .content a:hover { color:#72f3db;}
@media screen and (max-width:1200px){
	.contact_sec .content{ padding:5% }
	.contact_sec .content h1 {font-size:30px; margin:30px 0 20px;}
	.contact_sec .content p {font-size: 15px; }
}
@media screen and (max-width:480px) {
	.contact_sec .content{ padding:8% 5% }
	.contact_sec .cont_map { width:100%; height:200px; float:left; display:block}
	.contact_sec .cont_txt { width:100%; float:right; padding-top:30px }
	.contact_sec .content h1 {font-size:22px; margin:30px 0 10px;}
	.contact_sec .content p {font-size:14px; }
}

/* ****************************************************************************************** */
/* work.php - 사업분야 */
.work_area_sec { width:100%; display:inline-block; margin:30px 0}
.work_area_sec ul{margin:0 -16px; font-size:0;}
.work_area_sec ul li{display:inline-block; width:calc(33.3333% - 32px); margin:0 16px; font-size:15px;}
.work_area_sec ul li *{-webkit-transition:all .3s ease-out; transition:all .3s ease-out;}
.work_area_sec ul li > div:first-child{height:240px; background:#fafafa; overflow:hidden;}
.work_area_sec ul li > div:last-child{padding:1.5rem 0 3rem;}
.work_area_sec ul li h4{padding-bottom:.5rem; font-size:18px;}
.work_area_sec ul li img{width:100%; height:100%; object-fit:cover; -webkit-filter:grayscale(100%); filter:grayscale(100%);}
.work_area_sec ul li:hover img{-webkit-filter:inheirt; filter:inherit;}
.work_area_sec ul li:hover h4{color:#5bb6e2;}
@media screen and (max-width:480px) {
	.work_area_sec { margin-top:0}
}

/* 진행과정 */
.process_sec{background:linear-gradient(to right bottom, #fff 50%, #fafafa 50%);}
.process_sec .content{width:100%; margin:auto;}
.process_sec .process{text-align:center;}
.process_sec .process li{display:inline-block; width:16rem; height:16rem; margin:0 2rem 2rem; padding:2rem 2rem 1rem; border-radius:8rem; border:2px solid #646873;	
	vertical-align:top; -webkit-transition:all .3s ease-out; transition:all .3s ease-out;}
.process_sec .process li > h4{padding-bottom:1rem; font-size:1.25rem;}
.process_sec .process li:hover{background:#3e4046; border-color:#3e4046; color:#fff;}

.outer {width: 100%;height: 100%; margin: 0 auto;overflow-x: hidden;  
	  /* 글자 드래그 방지 */
	  -ms-user-select: none; 
	  -moz-user-select: -moz-none; 
	  -webkit-user-select: none; 
	  -khtml-user-select: none; 
	  user-select: none;
}
	
.section {display: flex;transition: .3s ease-out;height: 100%;}

.inner {border: 6px solid olive;padding: 0 16px;}

.slider-controls {  }
.slider-controls button { position:absolute; top:55%;width:50px; height:100px; }
.slider-controls button.prev { left:0;}
.slider-controls button.next { right:0;}

.tab_content { display:inline-block; position:relative; width:100%; height:calc(100% - 122px); background:rgba(0, 0, 0, .4); overflow:hidden}
.frame.tab_content {height:calc(100% - 122px);}
.tab_content.define, .tab_content.contact { margin-top:70px; height:calc(100% - 70px);}
.sub_wide_boundary{ height:90%}
.workCont {}
.workCont .content{ width:100%; padding:6rem 9rem; }
.workCont .cont_img { width:37%; float:left; text-align:center }
.workCont .cont_img img { width:100%; vertical-align:top }
.workCont .cont_txt { width:60%; float:right; text-align:left; padding-left:6%}
.workCont .content h1{/*font-family: proxima-nova;*/ font-size:48px; line-height:1.4; letter-spacing:1px; margin:40px 0 50px; color:#72f3db; font-weight: 500; /*text-transform: uppercase;*/}
.workCont .content p {font-family: Open Sans; font-weight: 100; font-style: normal; font-size: 18px; letter-spacing: 0; line-height: 1.5; color: #fff; word-break:normal; }
.tab_content.define  .workCont .cont_img h4 { width:100%; display:block; height:30px; line-height:30px; margin:50px 0; font-size:19px; color:#fff; font-weight:400}
.tab_content.define  .workCont .cont_img > div { width:32%; padding:0 1.5%; height:auto; display:inline-block}
.workCont.owl-carousel .owl-nav button.owl-prev { margin-left: 0;}
.workCont.owl-carousel .owl-nav button.owl-next { margin-right:0}
.tab_content.define .owl-carousel .owl-nav button.owl-next, 
.tab_content.define .owl-carousel .owl-nav button.owl-prev { top:60%}
@media screen and (max-width:1440px){
	.workCont .content{ padding:6% 5%; }
	.workCont .content h1 { font-size:40px}
	.workCont .cont_img { width:40%;}
	.workCont .cont_txt { padding-left:4%}
}
@media screen and (max-width:1380px){
	.workCont .content h1 { font-size:36px}
}
@media screen and (max-width:1200px) {
	.workCont .content h1 { font-size:34px; line-height:1.2; margin:20px 0 30px;}
	.workCont .content p { font-size:16px; line-height:1.3}
}
@media screen and (max-width:1023px) {
	.workCont .content h1 { font-size:30px}
	.workCont .content p { font-size:15px}
}
@media screen and (max-width:480px) {
	.tab_content.define, .tab_content.contact { margin-top:0; height:calc(100%); padding-bottom:40px}
	.tab_content.define  .workCont .cont_img h4 { margin:10px 0; font-size:14px}
	.workCont .content{ margin-top:0; height:calc(100%); padding:8% 15% ; }
	.workCont .cont_img { width:100%;}
	.workCont .content h1 { font-size:20px; margin: 30px 0 15px}
	.workCont .cont_txt { width:100%; padding-left:0}
	.workCont .content p { font-size:13px; padding-bottom:40px }
}


/* 프로젝트 의뢰하기 */
.project_request_sec{padding:8rem 0; background:url('../img/sub_start_project.jpg') no-repeat; background-attachment:fixed;}
.project_request_sec .content{max-width:1200px; margin:auto;}
.project_request_sec .content p{font-size:18px;}
.project_request_sec .content a{position:relative; font-size:40px; -webkit-transition:all .3s ease-out; transition:all .3s ease-out;}
.project_request_sec .content i{position:absolute; top:50%; right:0; width:0; height:32px; background:url('../img/icon_arrow_next.svg') no-repeat;
	background-size:auto 16px; opacity:0; -webkit-transition:all .3s ease-out; transition:all .3s ease-out;}

/* 프로젝트 의뢰하기 hover */
.project_request_sec .content a:hover{color:#5bb6e2;}
.project_request_sec .content a:hover i{opacity:1; right:-80px; width:70px;}



/* ****************************************************************************************** */
/* partner.php - 사업분야 */
.partner_sec ul{max-width:1600px; margin:auto; font-size:0}
.partner_sec ul li{position:relative; display:inline-block; width:calc(25% - 24px); height:240px; margin:0 12px; font-size:16px; overflow:hidden;}
.partner_sec ul li .original{position:relative; width:100%; height:100%; background:#f7f7f7; }
.partner_sec ul li .original span{position:absolute; top:50%; left:50%; -webkit-transform:translate(-50%, -50%); transform:translate(-50%,-50%); 
	text-transform:capitalize; letter-spacing:0.1em; font-size:20px; font-weight:600;}
.partner_sec ul li .covered{position:absolute; bottom:-100px; left:0; width:calc(100% - 32px); height:100px; padding:1rem; background:#fff; opacity:0; font-size:14px;
	-webkit-transition:all .3s ease; transition:all .3s ease;}
.partner_sec ul li:hover .covered{bottom:0; opacity:1}

/* our client */
.client_sec{background:#f5f6f7;}
.client_sec .client{max-width:1024px; margin:auto; }
.client_sec ul{margin:0 -12px; font-size:0;}
.client_sec ul li{display:inline-block; width:calc(33.3333% - 24px); margin:0 12px 24px; height:160px; background:#fff; text-align:center; vertical-align:top; font-size:16px;
	-webkit-transition:all .3s ease-out; transition:all .3s ease-out;}
.client_sec ul li figure{position:relative; width:100%; height:100%; margin:0; padding:0; }
.client_sec ul li img{position:absolute; top:50%; left:50%; -webkit-transform:translate(-50%, -50%); transform:translate(-50%,-50%); width:50%; height:auto;}
.client_sec ul li:hover{box-shadow:0 10px 30px 0 rgba(0,0,0,0.1);}





/* ****************************************************************************************** *
 * 1200px
 * ****************************************************************************************** */
@media screen and (max-width:1200px) {
	
	/* about */
	.about_contact_sec{padding:6rem 2rem;}

}
/* 1200px end */



/* ****************************************************************************************** *
 * 1024px
 * ****************************************************************************************** */
@media screen and (max-width:1024px) {
	
	/* about */
	.about_profile_sec > .inner{padding:0 24px;}

}
/* 1024px end */



/* ****************************************************************************************** *
 * 768px
 * ****************************************************************************************** */
@media screen and (max-width:768px) {
	
	/* about.php - 회사소개 */
	.about_phil li{width:calc(100%); margin:0 0 1rem; font-size:13px;}
	.about_phil li .txt{padding:0 24px 24px;}
	.about_contact_sec{padding:4rem 2rem;}
	.about_intro_sec dl dt span{font-size:48px;}
	.about_intro_sec dl dd h2{font-size:32px;}
	.about_intro_sec dl dd div{padding-left:0;}
	.about_intro_sec dl dd p{width:100%; padding-left:0;}
	.about_intro_sec dl dd p:first-child{padding-bottom:1rem;}


	/* contact */
	.contact_sec .address_info{padding:1.5rem 1rem 1rem;}
	.contact_sec .address_info dl dt{margin-bottom:.5rem; font-size:14px;}
	.contact_sec .address_info dl dd{font-size:16px;}
	.contact_sec .contact_info dl dt{width:80px; height:80px;}
	.contact_sec .contact_info dl dd{width:calc(100% - 80px); padding-top:.25rem;}

}
/* 768px end */



/* ****************************************************************************************** *
 * 767px
 * ****************************************************************************************** */
@media screen and (max-width:767px) {

	/* about.php - 회사소개 */
	.about_profile_sec > .inner{padding:0 20px;}
	.about_profile_sec dl{padding:10px 15px;}
	.about_profile_sec dl dt, 
	.about_profile_sec dl dd{float:none; width:100%; margin-left:0; padding:5px 0; text-align:left;}
	

	/* contact */
	.contact_sec .address_info{padding:1.5rem;}
	.contact_sec .address_info dl{width:100%;}
	.contact_sec .address_info dl:nth-child(1){padding-bottom:.5rem;}
	.contact_sec .address_info dl dt{margin-bottom:0; padding:0; border:0; font-size:14px;}
	.contact_sec .address_info dl dd{font-size:14px;}

	.contact_sec .contact_info dl{width:100%;}
	.contact_sec .contact_info dl dt{width:60px; height:60px; font-size:16px;}
	.contact_sec .contact_info dl dd{width:calc(100% - 60px); padding-left:.5rem;}
	.contact_sec .contact_info dl dd p{display:inline; font-size:13px;}
	.contact_sec .contact_info dl dd p:nth-of-type(1){padding-right:8px;}
	.contact_sec .contact_info dl dt i {font-size:18px;}


	/* work */
	.work_area_sec ul li{width:calc(100% - 32px);}
	.process_sec{background:#f7f7f7;}
	.project_request_sec{padding:4rem 20px;}
	.project_request_sec .content a{font-size:36px;}

}
/* 767px end */





/* ****************************************************************************************** *
 * 480px
 * ****************************************************************************************** */
@media screen and (max-width:480px) {
	
	/* sub section common */
	.sub_sec .title{padding:0 1rem 3rem;}	
	.sub_sec .title h3{letter-spacing:0; font-size:28px;}
	.sub_sec .title p{display:inline;}

	/* about */
	.about_intro_sec dl dt span{font-size:36px;}	

	/* work */
	.work_area_sec ul li > div:last-child{padding:1.5rem 0 2rem;}
	.project_request_sec > .inner{padding:0 15px;}

}
/* 480px end */





/* ****************************************************************************************** *
 * 320px
 * ****************************************************************************************** */
@media screen and (max-width:320px) {
	
	/* contact */
	.contact_sec .contact_info dl dt{display:none;}
	.contact_sec .contact_info dl dd{width:100%; padding:0;}

}
/* 320px end */