html {
  scroll-behavior: smooth;
  }
  .tab-div
  {
    display:flex;
  }

 /* li.kind {
    direction: rtl;
  }
*/

  .rit {
    text-align: right;
    direction: rtl;
  }
  .comment-div {
    direction: rtl;
  }

  img.change {
    transform: rotateY(180deg);
  }
  .kind {
    direction: rtl;
    width: max-content;
  }

  .kind-list {
    direction: rtl;
    text-align: right;
  }

  .shuoming-div {
    direction: rtl;
    text-align: right;
    text-indent:15px;
    padding-top: 10px;
    color: white; 
  }

  p.arabic {
    text-indent: 15px;
    text-align: right;
    direction: rtl;
  }
  .container-fluid
  {
    padding:0;
  }
  .photo-item { display: flex; flex-wrap: wrap; width: 100%; margin: auto; justify-content: center; background-color:#b8cf99}
  .photo-one { width: 250px; height: 140px;   background-position: center; background-repeat: no-repeat; background-size: cover; margin: 10px 10px;  cursor: pointer;position: relative;}

  .photo-one>div {
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    opacity: 0;
    filter: alpha(opacity=0);
  }
  .photo-one>div.active {
  opacity: 1;
  transition: 0.5s;
  }
  .photo-one .overlay-img {
  position: absolute;
  display: table-caption;
  width: 100%;
  height: 140px;
  background: black;
  opacity: 0.5;
  }
  .photo-one .overlay-icon {
  position: absolute;
  width: 80%;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  color: #fff;
  font-size: 13px;
  line-height: 17px;
  opacity: 1;
  text-align:center
  }
  .photo-natural { width: 250px; height: 140px;   background-position: center; background-repeat: no-repeat; background-size: cover; margin: 10px 10px;  cursor: pointer;position: relative;}

  .photo-natural>div {
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    opacity: 0;
    filter: alpha(opacity=0);
  }
  .photo-natural>div.active {
  opacity: 1;
  transition: 0.5s;
  }
  .photo-natural .overlay-img {
  position: absolute;
  display: table-caption;
  width: 100%;
  height: 140px;
  background: black;
  opacity: 0.5;
  }
  .photo-natural .overlay-icon {
  position: absolute;
  width: 80%;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  color: #fff;
  font-size: 13px;
  line-height: 17px;
  opacity: 1;
  text-align:center
  }


  .tab-div-stage {
  display:flex;
  }

  .tab-div-share {
    display:flex;
  }
  .cursor-pointer{
    cursor:pointer;
  }

  div.hiddentext {
    max-height:0;
    overflow:hidden;
    transition: 0.5s
  }

  div.hiddentext.active {
    max-height:400px;
    transition: 0.5s
  }

  .mf-title ul li:hover  {color: red;}
  .mf-title ul li.active {color:white;}
  .kind-list li {
    cursor:pointer;
  }
  .news_modal{
    position: fixed;
    background-color: rgba(0,0,0,0.8);
    z-index: 99999;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    padding-top: 70px;
    display: none;
    overflow-y: auto;
  }

  .news_content{
    width: 100%;
    height:200px;
    margin: 0 auto;
    text-align: center;
  }

  .news_content table{
    width: 100%;
    height: 100%;
    vertical-align: center;
    margin:0 auto;
  }

  .news_content table td{
    text-align: center;
  }

  .news_content .news_commen{
    margin-top: 15px;
    font-weight: 500;
    color: white;
  }

  .news_content .news_nav{
    margin-top: 15px;
    font-weight: 500;
    color: white;

  }
  @media (min-width: 768px){
    .news_content { width: 600px; }  
  }

  @media (min-width: 992px){
    .news_content { width: 900px; }
  }

  .news_modal-list{
    position: fixed;
    background-color: rgba(0,0,0,0.8);
    z-index: 99999;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    padding-top: 70px;
    display: none;
    overflow-y: auto;
  }

  .news_content-list{
    width: 100%;
    height:200px;
    margin: 0 auto;
    text-align: center;
    position: relative;
    height: auto;
  }

  .news_content-list table{
    width: 100%;
    height: 100%;
    vertical-align: center;
    margin:0 auto;
  }

  .news_content-list table td{
    text-align: center;
  }

  .news_content-list .news_commen-list{
    margin-top: 15px;
    font-weight: 500;
    color: white;
  }

  .news_content-list .news_nav-list {
    position: absolute;
    top: 40vh;
    width: 100%
  }

  @media (min-width: 768px){
    .news_content-list { width: 600px; }  
  }

  @media (min-width: 992px){
    .news_content-list { width: 900px; }
  }

  .news_modal-natural{
    position: fixed;
    background-color: rgba(0,0,0,0.8);
    z-index: 99999;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    padding-top: 70px;
    display: none;
    overflow-y: auto;
  }

  .news_content-natural{
    width: 100%;
    height:200px;
    margin: 0 auto;
    text-align: center;
    position: relative;
    height: auto;
  }

  .news_content-natural table{
    width: 100%;
    height: 100%;
    vertical-align: center;
    margin:0 auto;
  }

  .news_content-natural table td{
    text-align: center;
  }

  .news_content-natural .news_commen-natural{
    margin-top: 15px;
    font-weight: 500;
    color: white;
  }

  .news_content-natural .news_nav-natural {
    position: absolute;
    top: 40vh;
    width: 100%
  }
  @media (min-width: 768px){
    .news_content-natural { width: 600px; }  
  }

  @media (min-width: 992px){
    .news_content-natural { width: 900px; }
  }

  i {
    border: solid black;
    border-width: 0 3px 3px 0;
    display: inline-block;
    padding: 3px;
  }

  /* 초기배경 */
  .mf-title { position: relative; }
  .mf-title img.back{
    max-width: 100%;
    object-fit: cover;
    object-position: right;
    min-height: 300px;
  }

  @keyframes examplep {
    0%   {left: 0%;opacity: 0;}
    100% {left: 5%;opacity: 1;}
  }

  .mf-title .title {
    position: absolute;
    top:32vh;
    direction: rtl;
    animation-duration: 2.5s;
    animation-fill-mode: forwards;
    animation-name: examplet;
  }
  .mf-title img.title{
    max-width: 100%;
  }
  @keyframes examplet {
    0%   {right: 0%;opacity: 0;}
    100% {right: 50%;opacity: 1; transform:translateX(50%)}
  }

  body { background-image: none;max-width: 1920px; height:625px; margin: 0;}
  .left-button {
    position: absolute;
    left:-10%;
    width: 45px;
  }
  .right-button {
    position: absolute;
    right:-10%;
    width: 45px;
  }