#worldmap {
width: 800px;
}

.swiper-container {
    width: 100%;
    border-radius: 10px;
    overflow: hidden;
}
  
.swiper-slide {
    width:100%;
    height:auto;
}

.swiper-slide img {
      width:100%;
      object-fit:cover;
}

/* 탭 전체 스타일 */
.tabs {
  margin-top: 50px;
  padding-bottom: 40px;
  background-color: #ffffff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  width: 90%;
  margin: 0 auto;}

/* 탭 스타일 */
.tab_item {
  width: calc(100%/3);
  height: 50px;
  border-bottom: 3px solid #333333;
  background-color: #f8f8f8;
  line-height: 50px;
  font-size: 16px;
  text-align: center;
  color: #333333;
  display: block;
  float: left;
  text-align: center;
  font-weight: bold;
  transition: all 0.2s ease;
}
.tab_item:hover {
  opacity: 0.75;
}

/* 라디오 버튼 UI삭제*/
input[name="tab_item"] {
  display: none;
}

/* 탭 컨텐츠 스타일 */
.tab_content {
  display: none;
  padding: 40px 40px 0;
  clear: both;
  overflow: hidden;
}


/* 선택 된 탭 콘텐츠를 표시 */
#all:checked ~ #all_content,
#programming:checked ~ #programming_content,
#design:checked ~ #design_content {
  display: block;
}

/* 선택된 탭 스타일 */
.tabs input:checked + .tab_item {
  background-color: #333333;
  color: #fff;
}

.information{
    text-align: center;
    padding: 20px;
}

table {
    width:800px; 
    margin-left: auto;
    margin-right: auto;
}

.designer-profile {
    width: 200px;
}

h1 {
    display: block;
    text-align: center;
    padding-top:10px;
}

hr {
    align: center;
    width: 300px;
}
h5 {
    margin-bottom: 100px;
}

.navbar__toogleBtn {
    display: none;
    position: absolute;
    right: 20px;
    font-size: 24px;
    color : white;
}


.navbar__logo{
    font-size: 24px;
    color:white;
}

.navbar__logo img{
	padding: 0px;
}

.navbar__menu {
    display: flex; /*메뉴를 일렬로 배치*/
    list-style: none; /*ul태그의 점을 제거*/
    padding-left: 0; /*패딩때문에 우측으로 치우쳐있는것을 되돌림*/
}

.navbar__menu li{
    padding : 8px 20px; /*마우스 클릭영역확보*/   
}

.navbar__menu li:hover {
   border-bottom: 1px solid black;
}

.navbar__icons{
    padding-left : 0px; /*가운데 정렬*/
    list-style: none;
    color : white;
    display: flex;
}

.navbar__icons li {
    padding : 8px 12px;
}

/*
레이아웃을 반응형으로 만들때는 media쿼리 사용
특정 사이즈 이하가 될 경우, 웹 사이트의 메뉴가 제대로 보이지 않음
이럴때 메뉴바를 아래로 내려가도록 만들자.
*/

@media screen and (max-width:768px) {
    table {
        width: 100%;
    }
    .designer-profile {
        width: 80%;
    }
}

@media screen and (max-width:1200px) {
    #worldmap {
        width: 90%;
    }
    /*로고,메뉴바가 수직으로 나오도록*/
    .navbar {
        flex-direction: column;
        align-items : flex-start; /*로고,메뉴바 모두 왼쪽 정렬*/
        padding : 8px 24px; /*hover시 한줄 가득 색상표시 안되도록 */
    }
    /*메뉴바가 한줄에 하나씩*/
    .navbar__menu{
        display: none;
        flex-direction: column;
        align-items: center; /*메뉴바만 가운데 정렬 */
        width : 100%; /*메뉴바의 가운데 정렬을 위해 너비를 늘림*/
    }

    .navbar__toogleBtn{
        display: block;
    }

    /*메뉴바 hover시 컨텐츠박스가 아닌 한 줄에 색상표시 */
    .navbar__menu li{
        width: 100%;
        text-align: center; /*text는 왼쪽 정렬이 기본값이므로 center로 수정*/
    }

    /*로고를 가운데로*/
    .navbar__icons {
        display: none;
        justify-content: center; /*로고는 현재 반대축이므로 justify-content 사용*/
        width : 100%;
    }

    /*active요소 추가*/
    .navbar__menu.active,
    .navbar__icons.active {
        display :flex;
    }

}