@charset "utf-8";

/* ************************************ CONTENT  :: 컨텐츠 레이아웃 ************************************ */
#container{position:relative;width:100%;height:auto;margin:60px 0 0;padding:0 0 15%;background-color:#fff;}
.subTitle{position:relative;width:100%;margin-top:40px;margin-bottom:10%;font-size:110%;font-weight:600;line-height:1.8;text-align:center;color:#000;}
.subTitleBar{display:inline-block;width:auto;height:auto;border-bottom:1px solid #929292;padding:0 0;}
.bannerPadding{width:100%;padding:15% 12%;}
.bannerLgPadding{width:100%;padding:15% 12%;}

@media (min-width: 576px) {
}
@media (min-width: 768px) {
    #container{margin:80px 0 0;}
    .subTitle{font-size:140%;margin-top:50px;margin-bottom:8%;}
	.bannerPadding{padding:12% 10%;}
	.bannerLgPadding{padding:12% 10%;}
}
@media (min-width: 992px) {
    #container{padding:0 0 12%;}
    .subTitle{font-size:145%;margin-top:50px;margin-bottom:5%;}
	.bannerPadding{padding:8% 8%;}
	.bannerLgPadding{padding:12% 8%;}
}
@media (min-width: 1025px) {
    #container{margin:90px 0 0;}
    .subTitle{margin-top:80px;}
}



/* ************************************ SUB VIAUAL ************************************ */
#subVisual{position:relative; margin:0; padding:0; width:100%; height:360px;}
#subVisual .visualVideo{
	position:absolute; 
	top:0px; 
	left:0px; 
	width:100%;
	height:100%;
}
#subVisual .visualVideo > video{min-width:100%; min-height:100%; object-fit: cover;}
#subVisual .visualVideo > iframe{min-width:100%; min-height:100%;}
#subVisual .visualImg{
	position:absolute; 
	top:0px; 
	left:0px; 
	width:100%;
	height:100%;
	background-size:cover !important;
	-webkit-transition:transform 1500ms  cubic-bezier(0, 0.41, 0.58, 1) ;
	-moz-transition:transform 1500ms cubic-bezier(0, 0.41, 0.58, 1) ;
	-o-transition:transform 1500ms cubic-bezier(0, 0.41, 0.58, 1) ;
	-ms-transition:transform 1500ms cubic-bezier(0, 0.41, 0.58, 1) ;
    transition:transform 1500ms cubic-bezier(0, 0.41, 0.58, 1) ;
	-ms-transform: scale(1.0,1.0) rotate(0.002deg);
    -o-transform: scale(1.0,1.0) rotate(0.002deg);
    -moz-transform: scale(1.0,1.0) rotate(0.002deg);
    -webkit-transform: scale(1.0,1.0) rotate(0.002deg);
     transform: scale(1.0,1.0) rotate(0.002deg);
}
#subVisual .visualTxt{position:absolute; top:0%; left:0%; width:100%; height:100%; text-align:center; padding:0 30px;}
#subVisual .visual-category,
#subVisual .visual-txt{
	opacity:0;filter:Alpha(opacity=0);
	-ms-transform: translateY(50px); 
    -o-transform: translateY(50px); 
    -moz-transform: translateY(50px);
    -webkit-transform: translateY(50px); 
     transform: translateY(50px);
	-webkit-transition:opacity 1.0s, transform 1.0s;
	-moz-transition:opacity 1.0s, transform 1.0s;
	-o-transition:opacity 1.0s, transform 1.0s;
	-ms-transition:opacity 1.0s, transform 1.0s;
	transition:opacity 1.0s, transform 1.0s;
}
#subVisual .visual-category{
	margin-bottom:20px;
}
#subVisual .visual-txt{
	-webkit-transition-delay:0.3s;
	-moz-transition-delay:0.3s;
	-o-transition-delay:0.3s;
	-ms-transition-delay:0.3s;
	transition-delay:0.3s;
}
/* SubVisual :: active */
#subVisual.active .visualImg{
	-ms-transform: scale(1.0,1.0) rotate(0.002deg);
    -o-transform: scale(1.0,1.0) rotate(0.002deg);
    -moz-transform: scale(1.0,1.0) rotate(0.002deg);
    -webkit-transform: scale(1.0,1.0) rotate(0.002deg);
     transform: scale(1.0,1.0) rotate(0.002deg);
}
#subVisual.active .visual-category,
#subVisual.active .visual-txt{
	opacity:1.0;filter:Alpha(opacity=100);
	-ms-transform: translateY(0px); 
    -o-transform: translateY(0px); 
    -moz-transform: translateY(0px);
    -webkit-transform: translateY(0px); 
     transform: translateY(0px);
}
.withoutTit{margin-top:40px;margin-bottom:15%;}

/* -------- SubVisual 반응형 -------- */
@media (min-width: 576px) {
    .withoutTit{margin-top:40px;margin-bottom:10%;}
}
@media (min-width: 768px) {
    #subVisual{height:550px;}	
	#subVisual .visual-category{margin-bottom:30px;}
    .withoutTit{margin-top:80px;margin-bottom:8%;}
}
@media (min-width: 992px) {
    #subVisual{height:600px;}	
    .withoutTit{margin-bottom:5%;}
}
@media (min-width: 1025px) {
	#subVisual .visual-category{margin-bottom:60px;}
    .withoutTit{margin-top:100px;}
}
@media (min-width: 1200px) {
    #subVisual{height:750px;}	
}



/* ************************************  :: TAB 스타일 ::  ************************************ */
.tabWrap{width:100%;padding:0;margin:0;}
.tabBtn{display:flex; flex-wrap: wrap; justify-content:center;padding-bottom:7%;}
.tabBtn li{flex:1; -ms-flex: 1;margin-left:10px;border:1px solid #bebebe;background-color:#fff;}
.tabBtn li:first-child {margin-left:0;}
.tabBtn li a {
    display:table; 
	position:relative;
	width:100%;
	height:56px;line-height:1.2;
	text-align:center;
	color:#000; 
	font-size:110%; 
	font-weight:500;
	word-break:keep-all;
}
.tabBtn li a > span{display:table-cell; vertical-align:middle;}
.tabBtn li:hover{background-color:#efefef;}
.tabBtn li a.active {background-color:#000;color:#fff;}
.tabBtn:after {content:""; display:block !important; clear:both;}
/*.tabContent{margin-top:5%;}*/
.tabContent li{display:none; background:#fff; height:auto; overflow:hidden; }

/* -------- TAB 스타일 :: 반응형 -------- */
@media all and (max-width:1024px){
   .tabBtn li{margin-left:5px;}
}
@media (max-width: 1023.98px) {
   .tabBtn li{flex:23%;margin-left:5px;margin-bottom:5px !important;}
   .tabBtn li:nth-child(4n+1){margin-left:0px}
   .tabBtn li > a{font-size:100%;font-weight:400;height:40px;}
}
@media (max-width: 767.98px) {
   .tabBtn li{flex:30%;margin-left:5px !important;margin-bottom:5px;}
   .tabBtn li:nth-child(3n+1){margin-left:0px !important;}
}
@media (max-width: 575.98px) {
   .tabBtn{padding-bottom:10%;}
   .tabBtn li{flex:45%;margin-left:0px !important;margin-bottom:3px !important;}
   .tabBtn li:nth-child(2n){margin-left:3px !important;}  
}/*
@media all and (max-width:374.98px){
    tabWrap ul.tabBtn li{flex:100%;margin-left:0px;margin-bottom:-1px;}
}*//*탭 붙은 스타일*/



/* ************************************  :: Button 스타일 ::  ************************************ */
.button01{cursor:pointer;display:inline-block;padding:10px 25px;background:transparent;border:1px solid #bebebe;font-size:110%;font-weight:400;color:#000;}
.button01:hover{background:#efefef;-webkit-transition:all 0.3s;-moz-transition:all 0.3s;-o-transition:all 0.3s;-ms-transition:all 0.3s;transition:all 0.3s;}
.button01 i{display:inline-block;margin-left:20px;}
.button01 img{display:inline-block;margin-left:10px;}

/*.button02{
	cursor:pointer;display:inline-block;padding:15px 35px;border:1px solid #fff;background:linear-gradient(to bottom, #33ccff 0%, #ff99cc 100%);font-size:120%;font-weight:400;color:#fff;
	-webkit-transition:all 0.3s;-moz-transition:all 0.3s;-o-transition:all 0.3s;-ms-transition:all 0.3s;transition:all 0.3s
}
.button02:hover{background:linear-gradient(to top, #33ccff 0%, #ff99cc 100%);color:#fff;}
*/
.button02{cursor:pointer;display:inline-block;padding:10px 20px;background:transparent;border:1px solid #fff;font-size:110%;font-weight:400;color:#fff;}
.button02:hover{background:#000;border:1px solid #000;-webkit-transition:all 0.3s;-moz-transition:all 0.3s;-o-transition:all 0.3s;-ms-transition:all 0.3s;transition:all 0.3s;}
.button02 img{display:inline-block;margin-left:10px;}

.button03{cursor:pointer;display:inline-block;padding:10px 20px;background:transparent;border:1px solid #000;font-size:110%;font-weight:400;color:#000;}
.button03:hover{background:#000;border:1px solid #000;color:#fff;-webkit-transition:all 0.3s;-moz-transition:all 0.3s;-o-transition:all 0.3s;-ms-transition:all 0.3s;transition:all 0.3s;}
.button03 i{display:inline-block;margin-left:10px;}

.btnRound{
  cursor:pointer;display:inline-block;border:1px solid #bebebe;padding:6px 10px;margin-right:3px;text-align:center;white-space:nowrap;vertical-align:middle;
  border-radius:25px;-webkit-border-radius:25px;-moz-border-radius:25px;
	font-size:110%;font-weight:400;color:#000;
	-ms-touch-action: manipulation;touch-action: manipulation;    
  -webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;
}
.btnRound:hover{background-color:#efefef !important;color:#000 !important;transition: 0.3s;}
.btnRound.on{background-color:#000;color:#fff;}

@media all and (min-width:576px){
  .button01{padding:12px 25px;}
  .button02{padding:12px 25px;}
	.button02 img{margin-left:20px;}
  .button03{padding:12px 25px;}
	.button03 i{margin-left:20px;}
  .btnRound{padding:8px 25px;margin-right:5px;border-radius:25px;-webkit-border-radius:25px;-moz-border-radius:25px;font-weight:500;}
}
@media all and (min-width:768px){
  .button02{padding:15px 35px;font-size:120%;}
	.button02 img{margin-left:30px;}
  .button03{padding:15px 35px;font-size:120%;}
	.button03 i{margin-left:30px;}
  .btnRound{padding:10px 30px;margin-right:10px;border-radius:30px;-webkit-border-radius:30px;-moz-border-radius:30px;}
}
@media (min-width: 992px) {
  .btnRound{padding:12px 50px;border-radius:30px;-webkit-border-radius:30px;-moz-border-radius:30px;}
}



/* ************************************  :: Modal 스타일 ::  ************************************ */
.modal-custom-button-wrap{width:100%;height:auto;margin:0 auto;overflow:hidden;border:1px solid #ddd;cursor:pointer;}
.modal-custom-button{width:100%;height:auto;-webkit-transition:all 0.3s;-moz-transition:all 0.3s;-o-transition:all 0.3s;-ms-transition:all 0.3s;transition:all 0.3s;}
.modal-custom-button:hover{
	-ms-transform: scale(1.05) rotate(0.002deg);
	-o-transform: scale(1.05) rotate(0.002deg);
	-moz-transform: scale(1.05) rotate(0.002deg);
	-webkit-transform: scale(1.05) rotate(0.002deg);
	transform: scale(1.05) rotate(0.002deg);
}
.modal-custom{display:none; position:fixed; z-index:10000; padding-top:50px; left:0; top:0; width:100%; height:100%; overflow:auto; background-color:rgba(0,0,0,0.4);}
.modal-content{position:relative; background-color:#fff; margin:auto; padding:0; border:1px solid #888; width:90%; box-shadow:0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19); -webkit-animation-name:animatetop; -webkit-animation-duration:0.4s; animation-name:animatetop; animation-duration:0.4s}
.modal-body{padding:30px 15px;border-top:0px solid #bebebe;border-bottom:1px solid #bebebe;}
.modal-footer{padding:10px 30px;text-align:center;}
.modal-footer button{border:1px solid #ddd;border-radius:5px;background-color:#fff;padding:5px 10px;font-size:100%;font-weight:400;color:#000;}
.modal-footer button:hover,.modal-footer button:focus{background-color:#efefef;text-decoration:none;cursor:pointer;}
/*.close-modal{float:right;font-size:180%;font-weight:500;color:#000;}*/
.close-modal{position:absolute;top:0px;right:0px;display:inline-block;width:30px;height:30px;background-color:#fff;text-align:center;line-height:30px;font-size:180%;font-weight:500;color:#000;}
.close-modal:hover,.close-modal:focus{color:#42baec;text-decoration:none;cursor:pointer;}
@media (min-width: 576px) {
  .modal-content{width:80%;}
	.modal-body{padding:50px 30px 30px;}
	.modal-footer{padding:15px 30px;}
	.close-modal{width:50px;height:50px;line-height:50px;}
}
@media (min-width: 1025px) {
  .modal-content{width:60%;}
	.modal-body{padding:60px 30px 30px;}
	.close-modal{width:60px;height:60px;line-height:60px;}
}







/* ************************************  About Us  ************************************ */
/* ---------------- 브랜드 아이덴티티 ---------------- */
.postBoxRound{width:100%; height:100%; background-color:#fff; border-radius:25px; border:1px solid #ddd; overflow:hidden;}
.postTxtRound{padding:25px 25px;}
.centerBox{position:relative; margin:0 0 20px; padding:0 0; width:100%;}





/* ************************************  WORK  ************************************ */
/* ---------------- 주요 업무 사례 ---------------- */
.boxGrey{background-color:#f3f3f3;padding-left:15px;padding-right:15px;}
.boxWhite{background-color:#fff;padding:20px 15px;}
.imgWidth{max-width:180px;}
/* ---------------- Portfolio ---------------- */
.badgeWrap{position:relative;width:100%;}
.badgeBlack {
  position:absolute;top:0px;right:0;
  display: inline-block;
  padding: 4px 5px;
  font-size:75%;font-weight:300;
  color:#fff;
  line-height: 1.0;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius:10px;-webkit-border-radius:10px;-moz-border-radius:10px;
  background-color:#000;
}
.badgeBlackLeft {
  float:left; margin-right:10px;
  padding: 5px 7px;
  font-size:95%;font-weight:500;
  color:#fff;
  line-height: 1.0;
  text-align: center;
  white-space: nowrap;
  border-radius:12px;-webkit-border-radius:12px;-moz-border-radius:12px;
  background-color:#000;
}
.badgeWrap h4{font-size:110%;font-weight:500;line-height:1.3;color:#000;margin-top:20px;}
.badgeWrap p{margin-top:10px;}

@media (min-width: 576px) {
   .boxWhite{padding:30px 15px;}
   .imgWidth{max-width:250px;}
}
@media (min-width: 768px) {
   .boxGrey{padding-left:30px;padding-right:30px;}
   .boxWhite{padding:80px 30px;}
   .badgeWrap h4{font-size:120%;margin-top:30px;}
   .imgWidth{max-width:100%;}
}
@media (min-width: 992px) {
   .badgeWrap h4{font-size:130%;}
}




/* ************************************  SERVICE  ************************************ */
.postBox{width:100%; height:100%; border:1px solid #ddd;}
.postTxt{padding:20px 20px;}

@media (min-width: 992px) {
	.postTxt{padding:30px 30px;}
}
@media (min-width: 1025px) {
.centerBox{margin:0; padding:0 15px; width:100%; position:absolute; top:50%; left:50%; -ms-transform:translate(-50%, -50%); transform:translate(-50%, -50%);}
}





/* ************************************  Estimate  ************************************ */
.estimateTbl{width:100%;border:1px solid #bebebe;margin-bottom:20px;}
.estimateTbl th{background-color:#eaeaea;padding:20px 20px;}
.estimateTbl td{padding:20px 20px;}
.estimateTbl ul li.borderLine{border-bottom:1px solid #8c8c8c;}
.differentBox{width:100%;background-color:#5c5c5c;text-align:left;color:#fff;padding:30px 20px;}
.unitprice{width:100%;}
.unitprice p{padding:20px 20px;text-align:center;}

@media (min-width: 576px) {
.differentBox{text-align:center;padding:5% 0;}
}
@media (min-width: 992px) {
.differentBox{padding:4% 0;}
.unitprice p{padding:25px 25px;}
}
@media (min-width: 1320px) {
.estimateTbl{margin-bottom:40px;}
}









/* ANIMATION */
.animate {
  -webkit-animation-duration: 1s;
          animation-duration:1s;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
}
.animationTxt{
          animation: fadeIn;
  -webkit-animation-duration: 1s;
          animation-duration:1s;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
          animation-delay:0.3s;
}
@-webkit-keyframes fadeIn {
  0% {opacity: 0;}
  100% {opacity: 1;}
}
@keyframes fadeIn {
  0% {opacity: 0;}
  100% {opacity: 1;}
}
.fadeIn {
  -webkit-animation-name: fadeIn;
          animation-name: fadeIn;
}



@-webkit-keyframes animatetop{
     from{top:-300px; opacity:0}
     to{top:0; opacity:1}
}
@keyframes animatetop{
    from{top:-300px; opacity:0}
    to{top:0; opacity:1}
}
.animatetop {
  -webkit-animation-name: animatetop;
          animation-name: animatetop;
}