@charset "utf-8";



/*standard setting*/

html,body{width:100%;height:100%;margin:0;padding:0; background: #e9efd7;}
li{list-style-type:none;}
span{list-style-type:none;}


h1{
font-weight: thin;
font-family: 'Nanum Myeongjo', serif;
font-size: 28px;
letter-spacing: -1px;
line-height:1
}


h3{
font-weight: thin;
font-family: 'Nanum Myeongjo', serif;
font-size: 20px;
letter-spacing: 1px;
line-height: 140%
}


h4{
font-weight: bold;
font-family: 'Noto Sans KR', sans-serif;
font-size: 20px;
letter-spacing: 1px;
line-height: 140%
}


p{
font-weight: normal;
font-family: 'Noto Sans KR', sans-serif;
font-size: 18px;
letter-spacing: -1px;
line-height: 160%
}



table{
border-collapse:collapse; 
border-spacing:0;
}

caption{
overflow:hidden; 
visibility:hidden;
width:0;
height:0;
padding:0;
font-size:0;
line-height:0;
text-indent:-9999px;
}

th,td{
padding:0;
vertical-align:middle;
}


/*standard setting*/



/*style sheet*/


.main-img img{
width: 600px;
}






.maeillogo{
padding-left:50px;
border-left:1px solid #bababa; 
border-right:1px solid #bababa;
padding-right:50px; 
}



.deagulogo{
padding-left:20px;
}




.support{
float:left; 
padding-right:30px;
}


.dgcitylogo{
padding-left:50px;
border-left:1px solid #bababa; 
border-right:1px solid #bababa;
padding-right:50px; 
}



.nhlogo{
padding-left:20px;
border-right:1px solid #bababa;
padding-right:20px;
}



.gbartlogo{
padding-left:20px;
}






.place-sup{
float:left; 
padding-right:30px;
}


.dblogo{
padding-left:50px;
border-left:1px solid #bababa; 
}





.main-subs{
text-align: center;
}



.section02 ul{
position: relative; 
width: 1000px; 
height: 200px;
margin: 0 auto;

}


.section02 ul li{
float: left;
}


.section03 ul{
position: relative; 
width: 1000px; 
height: 200px;
margin: 0 auto;

}


.section03 ul li{
float: left;
}



.section04 ul{
position: relative; 
width: 1000px; 
height: 200px;
margin: 0 auto;

}


.section04 ul li{
float: left;
}



.section05 ul{
position: relative; 
width: 1000px; 
height: 550px;
margin: 0 auto;

}


.section05 ul li{
float: left;
}



.section06 ul{
position: relative; 
width: 1000px; 
height: 400px;
margin: 0 auto;

}


.section06 ul li{
float: left;
}



.tbl01{
width: 800px;
height: 200px;
border:2px solid #4a6a06;
}


.tbl01 th {
border-right:1px solid #4a6a06;
border-bottom:1px solid #4a6a06;
padding: 10px; 
font:300 18px/130% AppleSDGothicNeo-bold,'Noto Serif KR','맑은 고딕','돋움',dotum,arial,serif;
text-align: center;
color: #4a6a06;
}


.tbl01 td {
padding: 8px; 
font:300 18px/130% AppleSDGothicNeo-Regular,'Noto Serif KR','맑은 고딕','돋움',dotum,arial,serif;
border-bottom:1px solid #4a6a06; 
border-right:1px solid #4a6a06; 
color: #333; 
text-align: center; 
vertical-align:middle;
}





.section07 ul{
position: relative; 
width: 1000px; 
height: 200px;
margin: 0 auto;

}


.section07 ul li{
float: left;
}




.section08 ul{
position: relative; 
width: 1000px; 
height: 200px;
margin: 0 auto;

}


.section08 ul li{
float: left;
}



.section09 ul{
position: relative; 
width: 1000px; 
height: 200px;
margin: 0 auto;

}


.section09 ul li{
float: left;
}




.section10 ul{
position: relative; 
width: 1000px; 
height: 500px;
margin: 0 auto;

}


.section10 ul li{
float: left;
}




.downbtn{
position: relative; 
width: 1000px; 
height: 200px;
margin: 0 auto;

}

.downloadimg{
margin-left: 350px;
}

.footer{
position: relative;
width: 100%;
margin-top:100px;
padding-top: 100px;
text-align: center;
}




/* media query*/
@media (max-width: 1280px){
    .container {width: 100%;}
    
}


@media (max-width: 960px){
    .container {width: 100%;}
    
    .header {height: 72%;}

    
    .host-zone {height: 20%;}
    .host {position: relative; margin: 0 auto; left: 30%;}
    .host > div {float: none; width: 100%;  padding: 20px 0;}
    .host > div:last-child {width: 100%;}

}


@media (max-width: 768px){
    .container {width: 100%;}
    
    #header {height: 600px;}
    .headerTop a img{padding-top: 10px;}
    
    .proZone { height: 24%;}
    .product {left: 25%;}
    
    .section03 .proc {display: none;}
    .section03 .Mproc {display: block; position: relative; margin: 0 auto; left: 30%; }
    .section03 .Mproc img {padding-top: 20px;}
    
    .section04 table {width: 100%;}
    .section04 table tr td {font-size: 16px;}

}


@media (max-width: 600px){
    .container {width: 100%;}
    
    #header {height: 450px;}
    
    .headerTop {height: 10%;}
    .header img {width: 95%;left: 2%;}
    
    .proZone { height:30%;}
    .product {left: 13%;}
    .product > div {padding: 18px 0;}
    
    
}


@media (max-width: 480px){
    .container {width: 100%;}
    
    #header {height: 350px;}
    
    .headerTop {height: 12%;}
    .headerTop a img {width: 25%;}
    
    .proZone { height:32%;}
    .product {left: 0;}
    .product > div {padding: 15px 0;}
    
    .section03 .Mproc {left: 15%; }
    
    h2 {font-size: 24px;}
    h4 {font-size: 16px;}
    p {font-size: 16px;}
    
    
}


@media (max-width: 380px){
    .container {width: 100%;}
    .row {padding: 0 12px 0 12px;}
    
    .product > div li {padding-left: 5px;}
}