:root {
   --text-color: #f5f5f5;
   --background-color : #263343;
   --accent-color :  #263343;
}
body {
  margin: 0px;
  font-family: 'Source Sans Pro';
}
a {
   text-decoration: none;
   color : var(--text-color); 
}
#text_small {
   list-style: none;
  color:333333;
  font-size:16px;
}
#text_big {
  color:222222;
  font-size:22px;
  list-style: none;
}
#text_small_long {
   list-style: none;
  color:#FFFFFF;
  font-size:18px;
}
#text_big_long {
  color:#FFFFFF;
  font-size:28px;
  list-style: none;
}

.navbar {
	  display : flex;
      position : sticky;
	  top: 0px;
	  justify-content: space-between;
	  align-items:center;	  

	  background-color: #263343;
	  opacity : 0.9;
	  filter: alpha(opacity=90);
	  width:100%;
    
	  z-index:100;
}


.navbar__logo {
      font-size : 33px;
	/*  font-weight : bold; */
	  color:#FFFFFF;
      flex : 1 1 25%;
}
.navbar__logo i {
	  color:#0b919d;

}
.navbar__menu {
	  display: flex;
	  list-style: none;
	  padding-left : 0;
      flex : 1 1 65%;
}

.navbar__menu li {
      padding: 8px 12px;
	  font-size: 22px;
}

.navbar__menu li:hover {
      background-color : #0b919d;
}

.navbar__icons {
   	  display: flex;
	  align-items: end;
      font-size : 22px;
	  list-style: none;
	  padding-left : 0;
	  color:#0b919d;
      flex : 1 1 10%;
}

.navbar__icons li {
	  padding : 4px 6px;
}
.navbar__toogle {
	  display : none;
	  margin : 0px;
}
.navbar__toogleBtn {
	  display : none;
	  margin : 0px;
}
.container {
	  display : flex;
	  flex-direction : column;
	  align-items:center;
	  width: 100%;
}
.container li {
      padding: 4px 6px;
}
.middle {
	  display: flex;
	  flex-direction : row;
	  width: 80%;
	  background-color: #f5f5f5;
}
.player video {
	width: 100%;
	max-width:1920;
	z-index:-11;
}
.player {
	text-align: center;
	background-color: #000000;
	z-index:-10;
}
.slogan_area { 
      position: absolute; 
	  top: 50%; 
	  width: 100%; 
	   z-index: 99;
}
#slogan_title {
   font-size: 80px;
   color:#FFFFFF;
   font-weight:bold;
   	  list-style: none;
	   z-index: 10;
}
#slogan {
   font-size: 25px;
   color:#FFFFFF;
   	  list-style: none;
	   z-index: 10;
}
.ban_img {
	  padding : 10px 0px;
      width: 50%;
}
.ban_text {
	  padding : 8px 12px;
	  list-style: none;
      width: 50%;
}
.long_ban {
	  display: flex;
	  flex-direction : row;
	  text-align : center;
	  width: 80%;
	  background-color: #f5f5f5;
}
.long_ban_text {
	  padding : 30px ;
	  flex-direction : column;
      width: 100%;
	  background-color: #263343;	  
}
.long_ban_text li {
	  text-align : center;
	  list-style: none;
      width: 100%;

}
.menu01_title {
      height : 220px;
	  background-color: #FFFFFF;
	  text-align : center;
	  font-size: 50px;

	  width : 80%;
}
.space {
	  height: 80px;
	  background-color: #FFFFFF;
	  width : 80%;
}
.space li {
	  text-align : center;
	  list-style: none;

	  width : 80%;
}
.img_tab {
	  display: flex;
	  flex-direction : row;
	  width: 80%;
	  justify-content: space-between;
}

.img_card  {
	  text-align:center;
	  width:22%;
      list-style: none;
      padding:10px 10px;
	  margin:0px;
      border-radius: 10px;
	  background-color: #eeeeee;
}
.img_card  img {
     border-radius: 10px;
	 text-align:center;
	 width:100%;
}

.bottom {
	   align-items:center;
	   text-align : center;
	   width:100%;
	   padding : 30px 0px;
	  outline: 1px solid #FFFFFF;
	  background-color: #263343;
	  color:FFFFFF;
}
/*  ¿òÁ÷ÀÌ´Â ¹è³Ê  */

.outer {
  border: 6px solid royalblue;
  width: 450px;
  height: 250px;
  margin: 0 auto;
  overflow-x: hidden;
}

.inner-list {
  display: flex;
  transition: .3s ease-out;
  height: 100%;
}

.inner {
  border: 6px solid olive;
  padding: 0 16px;
}

.button-list {
  text-align: center;
}
/*  ¿òÁ÷ÀÌ´Â ¹è³Ê ³¡  */

@media screen and (max-width:768px) {

	  .navbar {
			flex-direction : column;
		    align-items :flex-start;

		   width:100%;

		    z-index:99;
		}
		.navbar__logo {
		      top:0;
			  padding: 12px; 12px;
			  font-size : 18px;
			  color:#FFFFFF;
		}
      .navbar__menu {
	       display : none;
			flex-direction : column;
			align-items: center;
			text-align : center;
			padding-left : 0;
			width : 100%;
			z-index: 101;
		}
	   .navbar__menu li {
	        width : 100%;
			text-align: center;
	   }
      .navbar__icons { 
	   display : none;
	   justify-content : center;
	   width: 100%;
	  }

	  .middle {
	        display : flex;
			flex-direction : column;
			align-items: center;
			text-align : center;
			width : 100%;
     }
	.img_tab {
		  display: flex;
		  flex-direction : column;
		  width: 100%;
		  backgroun-color:#FFFFFF;

	}
	.img_card  {
		  text-align:center;
		  width:100%;
		  list-style: none;
		  margin:0px;
		  padding:0px;

	}
		.img_card  img {
			 border-radius: 10px;
			 text-align:center;
			 width:90%;
		}
		.ban_img {
			  padding-left : 0;
			  width: 90%;
		}
		.ban_text {
			  padding-left : 0;
			  list-style: none;
			  width: 90%;
		}

     .navbar__toogleBtn {
      display: flex;
	  position : absolute;
	  top : 12px;
	  right : 20px;
	  font-size : 24px;
	  color:#0b919d;
	  z-index: 110;

     }
	  .navbar__menu.active,
	  .navbar__icons.active {
	     display: flex;
     }
	 .long_ban {
	  display: flex;
	  flex-direction : row;
	  text-align : center;
	  width: 100%;
      }
     .space  {
	  width : 100%;
     }
		.slogan_area { 
			  position: absolute; 
			  top: 25%; 
			  width: 100%; 
			   z-index: 10;
		}
		#slogan_title {
		   font-size: 20px;
		   color:#FFFFFF;
		   font-weight:bold;
			  list-style: none;
			   z-index: 10;
		}
		#slogan {
		   font-size: 12px;
		   color:#FFFFFF;
			  list-style: none;
			   z-index: 10;
		}
			#text_small_long {
			   list-style: none;
			  color:#FFFFFF;
			  font-size:14px;
			}
			#text_big_long {
			  color:#FFFFFF;
			  font-size:20px;
			  list-style: none;
			}
     .space {
		  height: 50px;
		  background-color: #FFFFFF;
		  width : 80%;
     }
		.menu01_title {
			  height : 120px;
			  background-color: #FFFFFF;
			  text-align : center;
			  font-size: 30px;

			  width : 80%;
		}
}