/* for tab&mobile 그리드 레이아웃 */
    [class*="col-"] {
      float: none;
      padding: 0;
    }

    .col-1 {width: 100%;}
    .col-2 {width: 100%;}
    .col-3 {width: 100%;}
    .col-4 {width: 100%;}
    .col-5 {width: 100%;}
    .col-6 {width: 100%;}
    .col-7 {width: 100%;}
    .col-8 {width: 100%;}
    .col-9 {width: 100%;}
    .col-10 {width: 100%;}
    .col-11 {width: 100%;}
    .col-12 {width: 100%;}
    /* - */



/* ㅡ ㅡ ㅡ INDEX ㅡ ㅡ ㅡ */

/* - intro - */
.introTop{
    width: 80%;
    left: 50%; top: 45%; bottom: inherit;
    transform: translate(-50%,-45%);
    padding: 3em 1em;    
    background: rgba(0,0,0,.4);
}
.introTop .introText{
    text-align: center;
}
.introTop .introText h1 {
    font-size: 40px;
    line-height: 55px;
}
.introTop .introText h1 b {
    font-size: 46px;
}
.introCenter {
	width: 80%;
	right: 50%; top: 45%;
	transform: translate(50%,-45%);
}
.introBot{
    display: block;
    left: 50%;
    bottom: 15%;
    -o-transform: translate(-50%, 15%);
    -webkit-transform: translate(-50%, 15%);
    -ms-transform: translate(-50%, 15%);
    -moz-transform: translate(-50%, 15%);
    transform: translate(-50%, 15%);
}


/* - INDEX 공통 -*/
.gridBx {
    width: 100%;
}
.grid.inverse .gridBx.right{
	float: inherit;
}

/* - about - */
#about{
	overflow-x: hidden;
}
#about .gridBx {
	padding: 10px;
}

#about .gridBx.right {
	background-size: 20%;
}
.gridWide .title {
	margin-bottom: 10px;
}
#about .gridBx .text {
    margin: .5em 0;
}

/* - location - */
#location .info{
	padding: 0;
	padding-top: 1em;
}
.map iframe{
    min-height: 300px;
}



/* ㅡ ㅡ ㅡ COMPANY ㅡ ㅡ ㅡ */
.company .sectionBot ul{
    width: 100%;
}
.company .sectionBot ul li{
    display: block;
}
.company .sectionBot ul li .tit, 
.company .sectionBot ul li .txt{
	width: 100%;
}


/* ㅡ ㅡ ㅡ BUSINESS ㅡ ㅡ ㅡ */
.business .sectionBot ul{
    padding: 0 1em;
    border-top: none;
    border-bottom: none;
}
.business .sectionBot ul li{
    width: 50%;
}


/* ㅡ ㅡ ㅡ WORK ㅡ ㅡ ㅡ */
.work .con{
    padding: 30px 10px;
}
.workTab>li .text>li.tit{
    font-size: 17px;
}


/* ㅡ ㅡ ㅡ CONTACT ㅡ ㅡ ㅡ */
.contact h3, .contact h4{
    padding-bottom: 1em;
    font-size: 22px;
}
.contact .sectionBot{
    padding-top: 3em;
}
.table .td{
    width: 100%;
    padding: 0;
}
.inquiry .btnWrap .btn{
    min-width: 80%;
    padding: 12px 15px;
    border-radius: 0;
    font-size: 15px;
}

.inquiry, .location{
    width: 100%;
}
.contactMap .info .head{
	width: 100%;
}
.contactMap .info .list{
	width: 100%;
}
.contactMap .info .txt{
	font-size: 15px;
}




/* max-width:540px */
@media screen and (max-width:540px){ 
    
    /* ㅡ ㅡ ㅡ INDEX ㅡ ㅡ ㅡ */
    
    /* - intro - */
    .introTop .introText h1{
        font-size: 28px;
        line-height: 40px;
    }
    .introTop .introText h1 b{
        font-size: 32px;
    }
    .introTop .introText p, .introTop .introText p span{
        font-size: .9em;
    }
	.introCenter {
		width: 100%;
	}
	.introCenter .introText h1{
		font-size: 22px;
		line-height: 1.3;
	}
	.introCenter .introText h1 b{
		font-size: 26px;
	}
	.introBot{
		display: block;
		left: 50%;
		bottom: 28%;
		-o-transform: translate(-50%, 28%);
		-webkit-transform: translate(-50%, 28%);
		-ms-transform: translate(-50%, 28%);
		-moz-transform: translate(-50%, 28%);
		transform: translate(-50%, 28%);
	}
	/* - about - */
	.gridWide .title {
		padding: 0 10px;
	}
	#about .gridBx.right {
		background-size: 15%;
	}
	.gridWide .title {
		font-size: 20px;
	}
	#about .gridBx .text {
		font-size: 14px;
		margin: 10px 0;
	}
	/* - location - */
   .map iframe{
	   min-height: 240px;
   }
   #location .info .head{
	   padding-bottom: 1em;
   }
   #location .info .head .tit{
	   font-size: 20px;
   }
   #location .info .head .sub{
	   margin: 15px 0 15px 0;
	   font-size: 15px;
   }
   #location .info .con{
	   margin: 0;
   }
   #location .info li:last-child{
	   margin-top: 1em;
   }
   
   
    
    /* ㅡ ㅡ ㅡ COMPANY ㅡ ㅡ ㅡ */
    .company .sectionTop{
        padding: 2.5em 0;
        margin-bottom: 0;
    }
    .company .sectionBot ul{
        padding: 1em 0;
        border-top: none;
        border-bottom: none;
    }
    .company .sectionBot{
        padding: 1em 0;
    }
    
    
    /* ㅡ ㅡ ㅡ BUSINESS ㅡ ㅡ ㅡ */
    .business .sectionBot{
        padding: 2em 0;
    }
    .business .sectionBot ul{
        padding: 0;
    }
    .thumb{
        padding: 0;
    }
    .thumb:hover .hvbox .hvText{
        color: rgba(255,255,255,0);
    }
    
    
    /* ㅡ ㅡ ㅡ WORK ㅡ ㅡ ㅡ */
    .work h3{
        font-size: 20px;
    }
    /* con1 */
    .workTab>li{
        width: 50%;
        padding: 15px 5px;
    }
    .workTab>li .icon>img{
        max-width: 60px;
    }
    /* con2 */
    .work .con:nth-child(2){
        padding: 30px 5px;
    }
    .work .workList{
        padding: 0;
    }
    .workList>li{
        padding: 5px;
    }
    .workList>li .listBx{
        padding: 15px 5px;
    }
    .listBx .icn .img{
        width: 70px; height: 70px;
        background-size: 55px !important;
    }
    .listBx:hover .icn .img{
        background-size: 65px !important;
    }
    .listBx .txt>p{
        margin-top: 10px;
        padding-bottom: 15px;
        font-size: 11px;
    }
	.listBx .txt>p>span{
		display: initial;
        font-size: 11px;
	}
	.listBx .txt>p>span.space{
		display: block;
	}
    
    
    
    /* - work - */
    #work .sectionBot{
        padding: 0 0 5em 0;
    }
    /* - contact - */
    #contact .sectionBot{
        padding-top: 0;
    }
    #contact .sectionBot .table{
        width: 90%;
    }
    
    
    /* ㅡ ㅡ ㅡ CONTACT ㅡ ㅡ ㅡ */
    .contact h3{
        font-size: 24px;
    }
    .contact h4{
        font-size: 15px;
    }
    .contact .sectionBot{
        padding: 1em 0 0 0;
    }
    .inquiry .table{
        padding-top: 15px;
    }
    .inquiry .agree{
        padding: 0;
    }
    .inquiry .btnWrap .btn{
        min-width: 100%;
    }
    .location{
        padding-top: 3em;
    }
    .contactMap .info > div{
        width: 100%;
        text-align: center;
    }
    .contactMap .info .list .con:nth-child(1){
        padding: .5em 0 2em 0;
        font-size: 15px;
    }
    .contactMap .info .head{
        padding-top: 1em;
        font-size: 30px;
        text-align: center;
    }
    .contactMap .info .tit{
        margin-right: 0;
    }
    .contactMap .info .list .con.half{
        font-size: 16px;
    }
    .contactMap .info .list .con.half .tit{
        margin-right: 10px;
    }
        
    
}



    
/* max-width:370px */
@media screen and (max-width:370px){ 
	
	.sectionTop p{
		font-size: 11px;
	}

	/* ㅡ ㅡ ㅡ WORK ㅡ ㅡ ㅡ */
	.work h3{
		font-size: 17px;
	}
	.workTab>li .text>li{
		font-size: 10px;
	}
	.workTab>li .text>li.tit{
		font-size: 15px;
		padding: 5px 0;
	}
	.listBx .txt>em{
		padding: 10px;
	}
	.listBx .txt>p>span.space{
		display: initial;
	}
	.listBx .txt>p.mspace{
		padding-bottom: 32px;
	}
	
	
}