/* ******************************************************************************************************************************************************************** */
/*                                                                                                                                                                      */
/*                                                                                                                                                                      */
/*                                                                 Board_Gallery_ProductView  PC                                                                        */
/*                                                                                                                                                                      */
/*                                                                                                                                                                      */
/* ******************************************************************************************************************************************************************** */

/* ******************************************************************************************************************************************************************** */
/*                                                                            PC버전 CSS                                                                                */
/* ******************************************************************************************************************************************************************** */

/* A                A A                 :               A                   :               A                   :               A                   :                   */
    .youtube_Ani    { width             : 100%;         height              : auto;         margin-top          : 50px;         text-align          : center;
                      padding-bottom    : 10%;          overflow            : hidden;
                      background-image  : url("../../../../Image/youtube_Ani_back.jpg");
                      background-size   : cover;
                      background-repeat : no-repeat;                                                                                                                    
                      background-position : center top;                                                                                                                 }                                                                                              


    .youtube_Ani .Wrap
                    { width             : 100%;         height              : auto;         padding             : 45px 0px;     position            : relative;         }                                                                                              
    
    .youtube_Ani .Wrap .playaniContainer
                    { width             : 100%;         height              : auto;         display             : inline-block; text-align          : center; 
                      z-index           : 4;            max-width           : 600px;                                                                                    }
    .youtube_Ani .Wrap .playaniContainer .TableWrap
                    { width             : 100%;         height              : auto;         display             : table;                                                }
    .youtube_Ani .Wrap .playaniContainer .LeftTitle
                    { display           : table-cell; 
                      width             : 70%;          height              : auto;         vertical-align      : middle;       text-align          : left;             }
    .youtube_Ani .Wrap .playaniContainer .LeftTitle p.smallTitle
                    { font-size         : 23px;         color               : #333;         font-weight         : 300;          line-height         : 1.6em;            }
    .youtube_Ani .Wrap .playaniContainer .LeftTitle p.largeTitle
                    { font-size         : 40px;         color               : #0080CC;      font-weight         : 500;          line-height         : 1.2em;            }
    


    .youtube_Ani .Wrap .playaniContainer .AniButton
                    { display           : table-cell;
                      width             : 30%;          height              : auto;         vertical-align      : middle;       text-align          : left; 
                      position          : relative;                                                                                                                     }
    .youtube_Ani .Wrap .playaniContainer .AniButton .youtube_aniHerf
                    { cursor            : pointer;}      
    .youtube_Ani .Wrap .playaniContainer .AniButton .ani 
                    { width             : 100%;         height              : auto;         max-width           : 180px;        display             : inline-block; 
                      position          : relative;
                      animation-name    : myanimation;
                      animation-duration: 3s; 
                      animation-iteration-count: infinite;
                      animation-timing-function: linear;                                                                                                                }
    .youtube_Ani .Wrap .playaniContainer .AniButton .youtube_ani
                    { cursor            : pointer;                                                                                                                      }

    .youtube_Ani .Wrap .playaniContainer .AniButton .ani .playbtn
                    { width             : 100%;         height              : auto;         position            : relative; 
                      border-radius     : 100%;         transition          : all 0.5s ease-in-out;                                                                     }
    .youtube_Ani .Wrap .playaniContainer .AniButton:hover .ani .playbtn
                    { transform         : rotateX(180deg) scale(1.3); 
                      transition        : all 0.5s ease-in-out;
                      background-color  :rgba(230,230,230,0.6);                                                                                                         }   
    .youtube_Ani .Wrap .playaniContainer .AniButton a .playbtn2
                    { font-size         : 35px;         color               : #000;         transition          : all 0.5s ease-in-out; 
                      position          : absolute;     
                      top               : calc(50% - 28px);                                 left                : calc(50% - 13.5px);                                   }    
    .youtube_Ani .Wrap .playaniContainer .AniButton:hover a .playbtn2
                    { color             : #980000;      transform           : scale(1.15);  transition          : all 0.5s ease-in-out;                                 }   

   @keyframes myanimation
                    { 0% { transform:rotate(0deg);}
                      100% { transform:rotate(360deg);}
                    }



/* A                A A                 :               A                   :               A                   :               A                   :                   */
  .youtube_back     { width             : 100%;         height              : 100%;         z-index             : -1;           position            : fixed;         
                      left              : 0;            top                 : 0;            background-color    : rgba(0,0,0,0.5);                                      
                      opacity           : 0;            transition          : 0.6s;                                                                                     }
  .youtube_back .TableWrap
                    { width             : 100%;         height              : 100%;         text-align          : center;       display             : table;            }     
  .youtube_back .TableWrap .Youtube_ContentsWrap 
                    { width             : 100%;         height              : 100%;         text-align          : center;       display             : table-cell;
                      vertical-align    : middle;                                                                                                                       }     
  .youtube_back .TableWrap .Youtube_ContentsWrap .Youtube_Contents
                    { width             : 80%;          height              : 80%;                                                                                      }
  .youtube_back .CloseWrap
                    { position          : fixed;        right               : 8%;           top                 : 5%;                                                   }     
  .youtube_back .CloseWrap .Close_youtube
                    { width             : 35px;         height              : auto;         display             : inline-block;                                         
                      transition        : 0.5s;                                                                                                                         }    
  .youtube_back .CloseWrap .Close_youtube img
                    { width             : 100%;         height              : auto;                                                                                     }
  .youtube_back .CloseWrap .Close_youtube:hover
                    { transform         : rotate(360deg);                                                                                                             }
  
    
    
    
  @media (min-width:641px) and (max-width:1024px) {
  

/* ******************************************************************************************************************************************************************** */
/*                                                                                                                                                                      */
/*                                                                                                                                                                      */
/*                                       1단 배경 Fixed                                                                                                                 */
/*                                                                                                                                                                      */
/*                                                                                                                                                                      */
/* ******************************************************************************************************************************************************************** */
/* A                A A                 :               A                   :               A                   :               A                   :                   */
  .youtube_Ani .Wrap .playaniContainer
                    { max-width         : 470px;                                                                                                                        }
  .youtube_Ani .Wrap .playaniContainer .LeftTitle p.smallTitle
                    { font-size         : 18px;                                                                                                                         }
  .youtube_Ani .Wrap .playaniContainer .LeftTitle p.largeTitle
                    { font-size         : 34px;                                                                                                                         }
  .Youtube_basic .Wrap iframe
                    { width             : 100%;         height          : 450px;                                                                            }
  
                                       
  }
  
  
  @media (max-width:640px) {
/* ******************************************************************************************************************************************************************** */
/*                                                                                                                                                                      */
/*                                                                                                                                                                      */
/*                                       1단 배경 Fixed                                                                                                                 */
/*                                                                                                                                                                      */
/*                                                                                                                                                                      */
/* ******************************************************************************************************************************************************************** */
/* A                A A                 :               A                   :               A                   :               A                   :                   */
  .youtube_Ani      { margin-top        : 30px;                                                                                                                         }
  .youtube_Ani .Wrap
                    { padding-top       : 10px;                                                                                                                         }
  .youtube_Ani .Wrap .playaniContainer .TableWrap
                    { display           : block;                                                                                                                        }
  .youtube_Ani .Wrap .playaniContainer .LeftTitle
                    { width             : 100%;         display             : block;        text-align          : center;                                               }
  .youtube_Ani .Wrap .playaniContainer .LeftTitle p.smallTitle
                    { font-size         : 15px;                                                                                                                         }
  .youtube_Ani .Wrap .playaniContainer .LeftTitle p.largeTitle
                    { font-size         : 26px;         margin-top          : 5px;                                                                                      }

  .youtube_Ani .Wrap .playaniContainer .AniButton
                    { width             : 31%;          display             : inline-block; text-align          : center;       margin-top          : 20px;             }
  .youtube_Ani .Wrap .playaniContainer .AniButton .ani
                    { max-width         : 130px;                                                                                                                        }
  
  
}