@font-face {font-family: "Microsoft Yi Baiti";
  src: url("/mj/font/5d22bd0816f911a4c90e5d8661157ef9.eot"); /* IE9*/
  src: url("/mj/font/5d22bd0816f911a4c90e5d8661157ef9.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
  url("/mj/font/5d22bd0816f911a4c90e5d8661157ef9.woff2") format("woff2"), /* chrome¡¢firefox */
  url("/mj/font/5d22bd0816f911a4c90e5d8661157ef9.woff") format("woff"), /* chrome¡¢firefox */
  url("/mj/font/5d22bd0816f911a4c90e5d8661157ef9.ttf") format("truetype"), /* chrome¡¢firefox¡¢opera¡¢Safari, Android, iOS 4.2+*/
  url("/mj/font/5d22bd0816f911a4c90e5d8661157ef9.svg#Microsoft Yi Baiti") format("svg"); /* iOS 4.1- */
}
@font-face {
  font-family: 'LotteMartDream';
  font-style: normal;
  font-weight: 400;
  src: url('//cdn.jsdelivr.net/korean-webfonts/1/corps/lottemart/LotteMartDream/LotteMartDreamMedium.woff2') format('woff2'), url('//cdn.jsdelivr.net/korean-webfonts/1/corps/lottemart/LotteMartDream/LotteMartDreamMedium.woff') format('woff');
}
@font-face {
  font-family: 'LotteMartDream';
  font-style: normal;
  font-weight: 700;
  src: url('//cdn.jsdelivr.net/korean-webfonts/1/corps/lottemart/LotteMartDream/LotteMartDreamBold.woff2') format('woff2'), url('//cdn.jsdelivr.net/korean-webfonts/1/corps/lottemart/LotteMartDream/LotteMartDreamBold.woff') format('woff');
}
@font-face {
  font-family: 'LotteMartDream';
  font-style: normal;
  font-weight: 300;
  src: url('//cdn.jsdelivr.net/korean-webfonts/1/corps/lottemart/LotteMartDream/LotteMartDreamLight.woff2') format('woff2'), url('//cdn.jsdelivr.net/korean-webfonts/1/corps/lottemart/LotteMartDream/LotteMartDreamLight.woff') format('woff');
}

* {margin:0; padding:0; font-family:"LotteMartDream","¸¼Àº °íµñ","µ¸¿ò",Dotum;font-weight: 300;}
html,body{width:100%;height:100%;}
body{font-size:14px;  color:#000;}
ul, ol, dl, li, dt, dd{list-style: none;}
h1, h2, h3, h4, h5, h6{font-size:100%;}
img{vertical-align:top;}
form, fieldset, img{border:0;margin:0;padding:0;}
textarea{padding:5px;}
p{text-align:justify;}
label{cursor:pointer;}
address, em{font-style:normal;font-weight:normal;}
a,area { blr:expression(this.onFocus=this.blur())}
:focus { -moz-outline-style: none; }

/* basic link and color */
a:link, a:visited {color:#000;text-decoration: none; }
a:hover {color:#386ca1; text-decoration:none;}

.bimg{text-indent:-9999px;}
#wrap{height:100%;box-sizing: border-box;}
#header{position:fixed;top:0;left:0;width:100%;height:80px;z-index:999;}
#header .logo{position:absolute;top:28px;left:30px;}
#header .logo > a{display:inline-block;width:17px;height:17px;background:url(/mj/images/logo.png) no-repeat;}
#header .menu{margin:29px 0 0 68px;}
#header .menu ul li{float:left;margin-right:21px;}
#header .menu a{font-size:17px;color:#909090;line-height:100%;font-weight:300;font-family:"LotteMartDream"}
#header .menu a:hover{color:#000;}
#container{width:100%;height:100%;}
.content{width:100%;}
.jb-table {
	display: table;
	width: 100%;
	height: 100%;
	box-sizing: border-box;
}
.jb-table-row {
	display: table-row;
}
.jb-table-cell {
	display: table-cell;
	vertical-align: middle;
}

.main-panel{width:90%;height:100%;margin:0 au+to;}
.about{text-align:center;font-size:16px;margin:0px 10%;}

.about-top{text-align:left;background:url(/mj/images/bg_com.png) no-repeat 50% 100%;background-size:100%;padding-bottom:60px;padding-top:30px;}
.about-bottom{text-align:right;margin-top:30px;}


.work{text-align:center;margin:0 10%;}
.work_1{position:absolute;top:380px;left:40px;}
.work_2{position:absolute;top:150px;left:650px;}
.work_4{position:absolute;top:490px;left:1020px;}
.work_3{position:absolute;top:240px;left:1570px;}
.work_5{position:absolute;top:770px;left:500px;}
.work_6{position:absolute;top:900px;left:1350px;}


.port-list{margin:80px 5% 0 5%;overflow:hidden;display:flex;flex-direction:row;flex-wrap: wrap;}
.grid-item{transition: top 50ms ease-out,left 50ms ease-out;margin-bottom: 60px;position:relative;}
.grid-item .title{padding-top:10px;line-height:140%;opacity: 0;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
.grid-item:hover .title{opacity: 1;}
.grid-item img{
	width:100%;
	height:100%;	
	opacity:0.7;
    -webkit-filter: grayscale(50%);
    -webkit-transition: .5s ease-in-out;
    -moz-filter: grayscale(50%);
    -moz-transition: .5s ease-in-out;
    -o-filter: grayscale(50%);
    -o-transition: .5s ease-in-out
}
.grid-item:hover img{
	opacity:1;
	-webkit-filter: grayscale(0%);
    -webkit-transition: .5s ease-in-out;
    -moz-filter: grayscale(0%);
    -moz-transition: .5s ease-in-out;
    -o-filter: grayscale(0%);
    -o-transition: .5s ease-in-out;
}        

@media (min-width: 1500px){
	.grid-item{
		width:13.333333%;
		margin-right:4%;
	}
	.grid-item:nth-child(6n+6) {
	    margin-right:0;
	}
}
@media (min-width: 1240px) and (max-width: 1499px){
	.grid-item {
		width: 16.12903%;
		margin-right:4.83871%;		
	}
	.grid-item:nth-child(5n+5) {
		margin-right: 0%;
	}
}
@media (min-width: 960px) and (max-width: 1239px){
	.grid-item{
		width: 20.40816%;
		margin-right: 6.12245%;
	}
	.grid-item:nth-child(4n+4) {
		margin-right: 0%;
	}
}
@media (min-width: 720px) and (max-width: 959px){
	.grid-item{
		width: 28.02198%;
		margin-right: 7.96703%;
	}
	.grid-item:nth-child(3n+3) {
		margin-right: 0%;
	}
}
@media (min-width: 480px) and (max-width: 719px){
	.grid-item{
		width: 47.41379%;
		margin-right: 5.17241%;
	}
	.grid-item:nth-child(2n+2) {
		margin-right: 0%;
	}
}

.port-view{position:relative;}
#port-view{position:relative;height:100%;}
.port-item{
	width:100%;
	text-align:center;
}
.port-item .item{text-align:center;width:100%;height:100%;}
.port-item .item img{max-height:100%;max-width:100%;}
.btn-arrow{
	position:absolute;
	top:0;
	bottom:0;
	width:50%;
	height:100%;
	z-index:999;
}
.btn-left{
	left:0;
	cursor: url(/mj/images/left.png), url(/mj/images/left.png) 5 5, progress;
}
.btn-right{
	right:0;
	cursor: url(/mj/images/right.png), url(/mj/images/right.png) 5 5, progress;
}
.port-foot{position:absolute;bottom:0;left:0;width:100%;height:64px;background:#fff;box-sizing: border-box;padding:20px;z-index:999;transition:all 0.5s;overflow:hidden;}
.port-foot.on{
	height:300px;
}
.port-foot.on .text{opacity: 1;}
.port-foot a{display:inline-block;margin:0 30px;color:#aaa;}
.port-foot .text{margin-top:20px;line-height:140%;opacity: 0;height:230px;overflow:auto;}

.contact{margin:80px 5% 80px 5%;overflow:hidden;}
#map{width:100%;height:500px;}
.info-pop{}
.ol-zoom{display:none;}
.contact_frm{margin-top:40px;width:100%;}
.contact_frm *{font-family:"±¼¸²";overflow:hidden;}
.contact_frm .info{float:left;width:20%;font-size:13px;}
.contact_frm .info dt{font-size:16px;line-height:100%;}
.contact_frm .info dd{padding:20px 0 0 0;}
.contact_frm .info ul{margin-top:10px;}
.contact_frm .info ul li{padding-top:20px;line-height:18px;vertical-align:middle;}
.contact_frm .info ul li span{font-weight:bold;display:inline-block;padding-right:5px;line-height:18px;vertical-align:middle;}
.c_frm{float:left;overflow:hidden;width:77%;margin-left:3%;}
.c_frm .f_left{width:48%;float:left;}
.c_frm .f_right{width:48%;float:left;margin-left:4%;}
.c_frm li{padding-top:24px;}
.c_frm li:first-child{padding-top:0;}
.c_frm label{display:block;padding-bottom:8px;}
.c_frm input[type=text]{background:#eeeeee;border:0;width:100%;height:30px;padding:0 10px;box-sizing: border-box;}
.c_frm textarea{background:#eeeeee;border:0;width:100%;height:131px;padding:10px;box-sizing: border-box;resize: none;}
.c_frm input[type=submit]{background:#eeeeee;border:0;width:100%;height:30px;text-align:center;line-height:30px;}