/* 기본용 CSS */

#wrap {

  display : flex;
  flex-flow:column nowrap;
  width : 93%;
  max-width:1200px;
  height : 677px;
  margin:0 auto;
  background-color:white;
  border: solid black 2px;
  align-items:center;
  }
 
#container1{
  width : 95%;
  height : 185px;
  margin: 10px 0px 0px 0px;
  background-color:white;
  display :flex;
  justify-content : center;
  }
 
  
#container2{
  width : 95%;
  height : 150px;
  margin: 6px 0px 0px 0px;
  background-color: white;
  display :flex;
  }
 
#container3{
  width : 95%;
  height : 150px;
  margin: 10px 0px 0px 0px;
  background-color:white;
  display :flex;
  }
 
#container4{
  width : 95%;
  height : 150px;
  margin: 10px 0px 10px 0px;
  background-color:white;
  display :flex;
  }
 
.item1{
  width : 49%;
  height : 150px;
  margin: 0px 0px 0px 0px;
  background-color:white;
  display: flex;
 }
 
.item2{
  width : 2%;
  height : 150px;
  margin: 0px 0px 0px 0px;
  background-color:white;
  display: flex;
  }
 
.item3{
  width : 49%;
  height : 150px;
  margin: 0px 0px 0px 0px;
  background-color:white;
  display: flex;
  }
 
.item4{
  width : 2%;
  height : 150px;
  margin: 0px 0px 0px 0px;
  background-color:white;
  display: flex;
  }
 
  
img, video {
  width:100%;
  max-width:100%;
  height : auto;
  }


@media all and (min-width:320px) {      /* 모바일 세로용 CSS */

#wrap {

  display : flex;
  flex-flow:column nowrap;
  width : 99%;
  max-width:1200px;
  height : 685px;
  margin:0 auto;
  background-color:white;
  border: solid black 2px;
  align-items:center;
  }
  
#container1{
  width : 95%;
  height : 185px;
  margin: 10px 0px 0px 0px;
  background-color:white;
  display :flex;
  justify-content : center;
  }
  
   
#container2{
  width : 95%;
  height : 150px;
  margin: 6px 0px 0px 0px;
  background-color: white;
  display :flex;
  }
  
#container3{
  width : 95%;
  height : 150px;
  margin: 10px 0px 0px 0px;
  background-color:white;
  display :flex;
  }
  
#container4{
  width : 95%;
  height : 150px;
  margin: 10px 0px 10px 0px;
  background-color:white;
  display :flex;
  }
  
.item1{
  width : 49%;
  height : 150px;
  margin: 0px 0px 0px 0px;
  background-color:white;
  display: flex;
  }
  
.item2{
  width : 2%;
  height : 150px;
  margin: 0px 0px 0px 0px;
  background-color:white;
  display: flex;
  }
  
.item3{
  width : 49%;
  height : 150px;
  margin: 0px 0px 0px 0px;
  background-color:white;
  display: flex;
  }
  
.item4{
  width : 2%;
  height : 150px;
  margin: 0px 0px 0px 0px;
  background-color:white;
  display: flex;
  }
  
   
img, video {
  width:100%;
  max-width:100%;
  height : auto;
  }
 
}

@media all and (min-width:768px){    /* 모바일 가로용 CSS */

#wrap {

  display : flex;
  flex-flow:column nowrap;
  width : 79%;
  max-width:700px;
  height : 1180px;
  margin:0 auto;
  border: dotted black 2px;
  background-color:white;
  align-items:center;
 }
 
#container1{
  width : 95%;
  height : 300px;
  margin: 14px 0px 0px 0px;
  background-color:white;
  display :flex;
  justify-content : center;
  }
 
 
#container2{
  width : 95%;
  height : 270px;
  margin: 10px 0px 0px 0px;
  background-color: white;
  display :flex;
  }
 
#container3{
  width : 95%;
  height : 270px;
  margin: 10px 0px 0px 0px;
  background-color:white;
  display :flex;
  }
 
#container4{
  width : 95%;
  height : 270px;
  margin: 10px 0px 10px 0px;
  background-color:white;
  display :flex;
  }
 
.item1{
  width : 49%;
  height : 270px;
  margin: 0px 0px 0px 0px;
  border: solid black 2px;
  background-color:white;
  display: flex;
  }
 
.item2{
  width : 2%;
  height : 280px;
  margin: 0px 0px 0px 0px;
  background-color:white;
  display: flex;
  }
 
.item3{
  width : 49%;
  height : 280px;
  margin: 0px 0px 0px 0px;
  background-color:white;
  display: flex;
  }
 
.item4{
  width : 2%;
  height : 280px;
  margin: 0px 0px 0px 0px;
  background-color:white;
  display: flex;
  }
 
  
img, video {
  width:100%;
  max-width:100%;
  height : auto;
  }

}

 
@media all and (min-width:960px){    /* PC용 CSS, 테블릿용 CSS */

*{
  box-sizing: border-box;
 } 
        
#body {
  width:92%;
  margin: 0 auto;
  padding: 10px;
  background-color: gray;
  text-align : center;
  }
  
   
#wrap {
  width:92%;
  margin: 0 auto;
  padding: 0px;
  border: solid black 2px;
  background-color: gray;
  text-align : center;
  }
  
  
#header{
  width: 100%;
  box-sizing: border-box; 
  text-align:center;
  background-color: black;
  border: solid black 1px;
  }
  
  
#nav {
  width : 100%;
  height : 50px;
  line-height:50px;
  background-color: black;
  text-align : center;
  display:inline-flex;
  justify-content : space-around;
  } 	
  
  
.article{
  width : 15%;
  height : 50px;
  line-height:50px;
  background-color: black;
  text-align :center;
  font-size: 22px;
  font-weight: bold;
  color : white;
  } 	
  
 
#section {
  width : 100%;
  display: flex;
  background-color: gray;
  }
  
  
#content1{
  background-color: gray;
  display:flex;
  flex-direction: column;
  justify-content: space-around;
  min-width: 150px;
  flex-basis: 10%;
  align-items:center;
  margin: 1px 1px 1px 1px;	
  }
  
  
#content2{
  background-color: gray;
  display: flex;
  flex-grow: 1;
  flex-basis: 80%;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  }
  
  
#content3{
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  min-width: 150px;
  flex-basis: 10%;
  background-color: gray;
  }
  
  
#sok1{
  width: 98%;
  margin: 10px 10px 10px 10px;
  background-color: gray;
  display:inline-flex;  
  justify-content : space-around;
  align-items:center;
  }
  
  
#sok2{
  width: 98%;
  margin: 10px 10px 10px 10px;
  background-color: gray;
  display:inline-flex;  
  justify-content : space-around;
  align-items:center;
  }
  
  
#naver{
  width: 100%;
  background-color: gray;
  display:block;  
  justify-content : space-around;
  margin: 0px 0px 0px 0px;
  text-align : center;
  }
  
  
#search{
  width: 100%;
  background-color: gray;
  display:block;  
  justify-content : space-around;
  margin: 0px 0px 0px 0px;
  text-align : center;
  }
  
  
#intermediation{
  width: 100%;
  background-color: gray;
  display:block;  
  justify-content : space-around;
  margin: 0px 0px 0px 0px;
  text-align : center;
  }
  
  
#consultation{
  width: 100%;
  background-color: gray;
  display:block;  
  justify-content : space-around;
  margin: 0px 0px 0px 0px;
  text-align : center;
  }
  
  
.adver{
  width: 17%;
  background-color: gray;
  text-align : center;
  }
  
  
#login{
  width: 99%;
  height : 50px;
  display: flex;
  flex: 1 1 auto;
  flex-basis: auto;
  align-items: center;
  justify-content: center;
  background-color: red;
  border: solid black 1px;
  text-align : center;
  font-size: 24px;
  font-weight: bold;
  color : white;
  }
  
  
#membership{
  width: 99%;
  height : 40px;
  display: flex;
  flex: 1 1 auto;
  flex-basis: auto;
  align-items: center;
  justify-content: center;
  background-color: green;
  border: solid black 1px;
  text-align : center;
  font-size: 22px;
  font-weight: bold;
  color : white;
  }
  
  
#jusomap{
  width: 99%;
  height : 30px;
  display: flex;
  flex: 1 1 auto;
  flex-basis: auto;
  align-items: center;
  justify-content: center;
  background-color: blue;
  border: solid black 1px;
  text-align : center;
  font-size: 20px;
  font-weight: bold;
  color : white;
  }
  
  
#visitcounter{
  width: 99%;
  height : 60px;
  display: flex;
  flex: 1 1 auto;
  flex-basis: auto;
  align-items: center;
  justify-content: center;
  background-color: #FF8C00;
  border: solid black 1px;	
  text-align : center;
  font-size: 16px;
  font-weight: bold;
  color: black; 
  }
  
  
#survey{
  width: 99%;
  height: 20px;
  display: flex;
  flex: 1 1 auto;
  flex-basis: auto;
  align-items: center;
  justify-content: center;
  background-color: #000000;
  border: solid black 1px;	
  text-align : center;
  font-size: 20px;
  font-weight: bold;
  color : white;
  }
  
  
#gallery{
  width: 99%;
  height: 20px;
  display: flex;
  flex: 1 1 auto;
  flex-basis: auto;
  align-items: center;
  justify-content: center;
  background-color: #9932CC;
  border: solid black 1px;
  text-align : center;
  font-size: 20px;
  font-weight: bold;
  color : white;
  }
  
  
#footer {
  width : 100%;
  box-sizing: border-box;
  font-size: 16px;
  color: #000;
  clear: both;
  border: solid black 1px;
  background-color: #C0C0C0;
  padding: 10px 30px;
  }
  
img,video {
  width : 100%;
  max-width : 100%;
  height :auto;
  }  
    
}