@charset "UTF-8";
      html {
       scroll-behavior: smooth;
       height: 100%; 
       max-width: 100%;
       overflow-y: scroll !important;
       overflow-x: hidden !important;
      }

      body {
        max-width: 100%;
        overflow-x: hidden!important;
        /* font-family: "futura Bk BT", "futura", "PingFang TC", "Noto Sans TC", "思源黑體", "SF pro", "Helvetica", "Arial", "sans-serif"; */
      }

      a {
        color: #101010; 
        text-decoration: none; 
      }
      a:hover {
        color: #B53434;
      }
      .bg-w {
        background-color:#f3f3f3;
        color: #030303;
      }

      .bg-b {
        background-color:#030303;
        color: #FFF;
      }

      #maincontent:before {
        content:"";
        display:block;
        height:90px;
        margin:-90px 0 0;

      }
   @media (max-width: 575px) {
      #maincontent:before {
        display:none;
      }
   }


      .bootstrap-select .btn:focus {
        outline: none !important;
      }

      .carousel-control-prev-icon {
        background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23b53434' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E") !important;
        opacity: 1;
      }

      .carousel-control-next-icon {
        background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23b53434' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E") !important;
        opacity: 1;      
      }

/*
HEADER
*/    
      @media all and (min-width: 768px) {
      .navbar .nav-item .dropdown-menu{ display: none; }
      .navbar .nav-item:hover .nav-link{   }
      .navbar .nav-item:hover .dropdown-menu{ display: block; }
      .navbar .nav-item .dropdown-menu{ 
        margin-top:0;
        background-color: rgba(181, 52, 52, 0.5); 
      }
} 

      @media (max-width: 575px) {
       .nav_logo{
        width: 80%;
       }
      }

      .navbar_black {
       background: #030303; 
      } 

      .navbar-expand-md {
       padding-left: 12px;
       padding-right: 12px;
      }

      @media (max-width: 991px) {
       .navbar-expand-md {
         padding-left: 12px;
         padding-right: 12px;
        }
      }
      

      @media (max-width: 767px) {
        .nav_container_m {
          padding-left:5px;
          padding-right: 5px; 
   
        }
        .navbar-expand-md {
         padding-left: 0px;
         padding-right: 0px;
         background-color: #f3f3f3;
        }

        .nav_logo {
          max-width: 60vw;
        }
        .navbar-collapse {
          background-color:#f3f3f3;
          padding: 30px;
          height: 100vh;
        }
        .navbar-collapse ul li a {
          color: #030303;
        }
        .collapsed {
          border: none;
        }
      }  
      @media (min-width: 768px){
        .navbar-collapse {
          background-color:rgba(1,1,1,0)!important;

        }

      }

      .bg_grey {
        background-color:#898989;
      }
      .bg_no {
        background: none;
      }
      .navbar-toggler-icon {
       background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(181,52,52, 0.5)' stroke-width='4' stroke-linecap='square' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
      }

      .navbar-toggler {
       border: 0px ;
      } 
      
      .dropdown ul {
        border-radius: 0;
        padding:0;
      }

      .dropdown-menu {
        background-color: #999;
        border:  none;
      }

      .dropdown-item:hover{
        background-color: rgba(181, 52, 52, 0.8);
        color: #fff;
      } 
      .dropdown-item:active{
        background-color: rgba(181, 52, 52, 0.8);
        font-weight:heavy ;
      } 

      .nav-link {
        color: #010101;
        font-size: 20px;
        letter-spacing: 0.1em;
        }  

      .nav-link:hover {
        color: #b53434 !important;  
        transition-duration: 0.3s;
      }

      .nav-link:focus {
        color: #b53434 !important;  
      }
      @media (max-width: 1280px) {
       .nav-link {
        font-size: 16px;
        letter-spacing: 0.1em;
       }   
      }   
      @media (max-width: 767px) {
       .nav-link {
        font-size: 24px;
       }  
      }   

      .nav_shadow {
        -webkit-filter: drop-shadow(1px 0px 1px #666);
      }

      .text_white {
        color: #FFF !important;
        transition-duration: 0.3s;
      }
      
      .nav-item .active {
        color: #b53434 !important;
      }

      .simp-trad {
        padding-left: 40px;
      }
      .simp-trad a {

       text-decoration: none;  
       padding-left: 10px;
       padding-right: 10px;
      }

      @media (max-width: 767px) {
        .simp-trad  {
          padding-left: 0;
          margin:0 auto;
        }

      }  

      footer {
        background-color: #fff;
      }
      .footer_m {
        width: 92%; 
      }

      .footer_rline {
        border-right: 1px solid #b53434;
      }

      @media (max-width: 767px) {
      .footer_rline {
         border-right: 0px;
         border-bottom: 1px solid #b53434;
       }

      }  

      .ftr_part {
        height: 166px;
        padding-top: 10px;
        padding-left: 36px;
      }
      @media (max-width: 767px) {
      .ftr_part {
        padding-top: 10px;
       }
      }      

      .footer_logo {
      width:100%;
      max-width:  200px;
      padding-top: 10px;
      }
      @media (max-width: 767px) {
      .footer_logo {
         width:45%;
      }
    }

      .sns_icon_f {
        width: 36px;
        height: 36px;
        margin-top: 8px;
        margin-bottom: 8px;

      }

      .company_info_text {
      font-weight: lighter;
      font-size: 12px;
      line-height: 14px; 
      }
      .company_info_text_m {
      font-weight: lighter;
      font-size: 12px;
      line-height: 20px; 
      }

      .copyright {
      font-weight: lighter;
      font-size: 10px;
      line-height: 14px; 
      display: flex;
      }
      @media (max-width: 767px) {
      .copyright {
        margin: 0 auto;
        max-width: 88%;
        display: block;
      }
    }


/*
首頁
*/
      .bgvid{

      position: absolute;
      width: 100%;
      height: 100%;
      top:0;
      left:0;
      object-fit: cover;

      }

      .bgvid_s{
      position: absolute;
      width: 100%;
      height: 100%;
      top:0;
      left:0;
      object-fit: cover;
      z-index: -1;

      }
    .topPage {
       background-image:  url("../images/bg-top.png");
       background-size: 100%;
       background-position: left -50vw center;
       background-repeat: no-repeat ;
       height: 100vh !important;
      }
      .sns_icons_icon_index{
        width: 36px;
        height: 36px;
        margin-top: 8px;
        margin-bottom: 8px;
      }


@media (max-width: 575px) {
      .bgvid{
      display: none;
      }

      .bgvid_s{
        display: none;
      }

      .topPage {
      background-position: bottom -50vw center;
      }
}      
  
      .category_top {
       font-size:  34px;
      }

      .category_top a{
       text-decoration: none;
       line-height: 78px; 
      }
      .category_top_s {
        width: 60vw;
        padding: 8px;
        margin: 10px auto;
        border:  1px dashed #B53434;
        border-radius: 50px;
        background-color: #FFF;
      }

      .category_top_s a{
        text-decoration: none;
        font-size: 16px;
      }
@media (min-width: 576px) and (max-width: 767px) {

      .category_top {
       font-size: 0.75em;
      }
}
@media (min-width: 576px) {

      .category_top_s {
       display:none;
      }
}      
@media (max-width: 575px) {

      .category_top {
       display:none;
      }
    
    .category_top_s {
      width: 60vw;
      padding: 4px;
      margin: 6px auto;
      border:  1px dashed #B53434;
      border-radius: 50px;
      background-color: #FFF;

    }
}


      .category_top a:hover {
       color: #B53434 !important;
       font-weight: bold; 
      }
    
      .rotate1{
       transform: rotate(-6deg);
       transform-origin: left;
      }
      .rotate2{
       transform: rotate(-4deg);
       transform-origin: left;
      }
      .rotate3{
       transform: rotate(-2deg);
       transform-origin: left;
      }
      .rotate4{
       transform: rotate(2deg);
       transform-origin: left;
      }
      .rotate5{
       transform: rotate(4deg);
       transform-origin: left;
      }
      .rotate6{
       transform: rotate(6deg);
       transform-origin: left;
      }

      .top_titles {
      opacity: 1;
      }

      .top_title {
       font-size:  64px;
      }

      .top_title_sub {
       font-size:  36px;
      }
      .top_subtitle{
       font-size:  21px; 

      }
@media (min-width: 576px) and (max-width: 767px) {

      .top_title {
       font-size:  32px;
      }

      .top_title_sub {
       font-size:  15px;
      }
      .top_subtitle{
       font-size:  12px; 

      }
}      
@media (max-width: 575px) {

      .top_title {
       font-size:  24px;
      }

      .top_title_sub {
       font-size:  15px;
      }
      .top_subtitle{
       font-size:  12px; 

      }
}
  
/*
數位發行
*/
   .sns_icons {
        position:fixed;
        top: 200px;
        right: 20px;
        width: 36px;
       z-index: 999;
      }

     .backtoTop {
        position:fixed;
        bottom: 36px;
        right: 20px;
        width: 36px;

      }
      
      .sns_icons_icon {
        width: 36px;
        height: 36px;
        margin-top: 8px;
        margin-bottom: 8px;
  
      }
      .sicon:hover img{
        -webkit-filter: invert(100%) !important;
         transition-duration: 0.3s;
      }

     @media (max-width: 575px) {
      .sns_icons_icon {
        display:  none;
      }

     }
    
      .head_dsktp {
        height: 420px;
        
      }

      .head_mobl {
        display: none;
      }
     @media (max-width: 575px) {
      .head_dsktp {
        display: none;
      }
      .head_mobl {
        display: block;
        padding-top: 100px;
        height: 280px;
        background-size: 66vw;
        background-position: center;
        background-repeat: no-repeat;
      }
      .head_mobl_dist {
        background-image: url("../images/1-1-q.png");

      }
      .head_mobl_dist2 {
        background-image: url("../images/2-bg-m.png");
      }
      .head_mobl_songwriter {
        background-image: url("../images/3-bg-m.png");
      }
      .head_mobl_video {
        background-image: url("../images/4-bg-m.png");
      }      
      .head_mobl_ebook {
        background-image: url("../images/5-bg-m.png");
      }
      .head_mobl_app {
        background-image: url("../images/6-bg-m.png");
      }     
      .head_mobl_about {
        background-image: url("../images/7-bg-m.png");
      }           
     } 

      .main_title {
        font-size: 80px;
        font-weight: 900 ;

      }
      .main_title_sub {
        font-size: 53px;
        font-weight: 800 ;
        color:#444;
      }

    @media (max-width: 575px) {
      .main_title {
        font-size: 34px;
      }
      .main_title_sub {
        font-size: 20px;
      }
    }

      .section_title {
        font-size: 54px;
        font-weight: 900 ;
        letter-spacing: 0.075em;
      }
      .section_title_sub {
        font-size: 30px;
        font-weight: 900 ;
        letter-spacing: 0.075em;
      }
    @media (max-width: 575px) {
      .section_title {
        font-size: 32px;
        font-weight: 900 ;
        letter-spacing: 0.075em;
      }
      .section_title_sub {
        font-size: 16px;
        font-weight: 900 ;
        letter-spacing: 0.075em;
      }
    }

      .vid_dist{
       z-index: 80;
      }


  .arrow_godwn {
  -webkit-animation: sdb05 1.5s infinite;
  animation: sdb05 1.5s infinite;
  box-sizing: border-box;
  max-width: 50px;
  }

@-webkit-keyframes sdb05 {
  0% {
    -webkit-transform: rotate(-45deg) translate(0, 0);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    -webkit-transform: translate(0px, 20px);
    opacity: 0;
  }
}
@keyframes sdb05 {
  0% {
    transform: translate(0, 0);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: translate(0px, 20px);
    opacity: 0;
  }
}
      .arrow_godwn:hover {
      animation:none;
      filter:opacity(.5);
      transition: all 0.3s;
      }
      .mountain{
        width: 100vw;
      }
      
      .dist_feature {
        min-height: 80vh;
        background-image: url("../images/bg1-2-0.png");
        background-size: 80%;
        background-position:center;
        background-repeat: no-repeat ;
      }
      .dist_feature_m {
        min-height: 640px;
        background-image: url("../images/bg1-2-0.png");
        background-size: 80%;
        background-position:center;
        background-repeat: no-repeat ;
      }
    
      .d_feat_bg {
       background-image: url("../images/bg1-2-1.jpg");
      
       transition:background-image 2s;
       transition-delay: 1s;
       -webkit-transition: background-image 2s;
       -webkit-transition-delay: 1s;
      }

      .feature {
       opacity: 0;
      }
      .feature_m {
       display: none;
      }
      .line_feature {
       display: inline;
      }
      .feat_text {
       padding-top: 60px;
       padding-bottom: 60px;       
      }
    @media (max-width: 767px) {
      .feature_m {
        display: block;
        margin: 0 auto;
      }
      .feat_logo_m {
        width: 150px;
      }
      .d_feat_bg {
       background-image: url("../images/1-2-ball.png");
      }

      .line_feature {
      display: none;
      }
      .feat_text {
       padding-top: 10px;
       padding-bottom: 10px;       
      }      
    }


      .ft_mlogo {

        width: 180px;
      }
      .vis0to100 {
      animation-name: be_visible;
      animation-duration: 3s;
      animation-iteration-count: 1;
      animation-fill-mode:forwards ;
      animation-delay: 1s;
      }
 

      .collab_logo {

      max-width: 350px;
      padding-left: 60px;
      padding-right: 60px;

      }

      .cores {
       
       background-image:  
       url("../images/gradient_b_td.png"),
       url("../images/gradient_b_dt.png"),
       url("../images/bg_cores.png");
       background-attachment: scroll, scroll,fixed;
       background-size: auto 10vh, auto 10vh, cover;
       background-position:top, bottom, top;
       background-repeat: repeat-x, repeat-x, no-repeat ;
      }

      .core {
       min-height: 500px;
       background-image:  url("../images/bg_core.png");
       background-size: 370px;
       background-position: center center;
       background-repeat: no-repeat ;
      }

      .core_l {
        margin-left:2vw ;
        margin-right:-2vw ;
      }  
      .core_r {
        margin-right: 2vw;
        margin-left:-2vw ;
      } 
    @media (max-width: 575px) {
      .cores {
       height: 100%;
       background-image:  
       url("../images/gradient_b_td.png"),
       url("../images/gradient_b_dt.png"),
       url("../images/bg_cores.png");
       background-attachment: scroll, scroll,fixed;
       background-size: auto 10vh, auto 10vh, cover;
       background-position:top, bottom, top;
       background-repeat: repeat-x, repeat-x, no-repeat ;
      }

      .core {
       min-height: 320px;
       background-image:  url("../images/bg_core.png");
       background-size: 280px;
       background-position: center center;
       background-repeat: no-repeat ;
      }

      .core_l {
        margin-left: 0;
        margin-right:0;
        margin-top:2vh ;
        margin-bottom:-2vh ;
      }  
      .core_r {
        margin-left: 0;
        margin-right:0;        
        margin-bottom: 2vh;
        margin-top:-2vh ;
      }

    }
      .tgt_container {
        width: 66vw;
        min-width: 576px;
        margin: 0 auto;
      }
      .tgt_title {
        background-image:  url("../images/bg_tgtt.png"), 
        url("../images/line_16deg.png");
        background-size: 200px, 100%;
        background-position: left,bottom;
        background-repeat: no-repeat ;
      }
      .tgt_text {
        font-size: 1.5rem;
      }      
      .tgt_texta {
        margin-bottom: 8px;
      }     
      .look_here {
        margin:-20px;
        width: 80px;
      }

    @media (max-width: 575px) {
      .tgt_container {
        width: 88vw;
         min-width: 0px;
        margin: 0 auto;
      }
      .tgt_container {
        width: 90vw;
        margin: 0 auto;
      }
      .tgt_title {
        background-image:  url("../images/bg_tgtt.png"), 
        url("../images/line_16deg.png");
        background-size: 200px, 80vw;
        background-position: left center,right bottom;
        background-repeat: no-repeat;
      }

    }  
      .channels {

        background-image:  url("../images/bg_chlogos.png");
        background-size:  30%;
        background-position: center bottom;
        background-repeat: no-repeat ;
      }

      .ch_logos {
        margin: 0 auto;
        width: 50vw;
        min-width: 320px; 
        min-height: 300px;
        padding-top:20px;
      }
      .ch_logo {
        max-width: 150px;
        padding: 8px;
      }

    @media (max-width: 575px) {
      .ch_logos {
        padding-top:0px;
        margin: 0 auto;
        width: 90vw;
        min-height: 290px;
      }
      .ch_logo {
        width: 150px;
        padding: 10px;
      }
    }  
    
      .ch_number {
        font-size: 82px;
        letter-spacing: -2px; 
      }
    @media (max-width: 575px) {
      .ch_number {
        font-size: 42px;

      }
    }        
      .samples{
        padding-top: 2vh;
        padding-bottom:  12vh;
        background-image:  url("../images/bg_samples.png");
        background-size:  50%;
        background-position: right top;
        background-repeat: no-repeat ;
      }

      .hide{
        display:  none;
        opacity: 0;
        transition: all 0.5s;
      }
      .appear{
        display:  block;
        opacity: 1;
        transition: opacity 0.3s;
      }
      .samp_categories {
        margin: 0 auto;
        padding-left: 0!important;
        padding-bottom: 16px;
      }
      .samp_categories li {
        list-style: none;
        display: inline;

      }
      .samp_categories .active {
        color: #FFF !important;
        border-bottom: 1px dashed #b53434;
      }

      .samp_category {
        cursor: pointer;
        text-decoration: none;
        color: #FFF!important;
      }
@media (max-width: 575px) {

      .samp_category {
        font-size:12px;
      }

}
      .samp_pics{
        
        margin:0 auto;
        width: 90vw;
        max-width: 1260px;
      }

      .samp_pic_container{
        position: relative;
      }

      .samp_pic {
        width:100%;
      }

    
      .samp_title {
        width:88%;
        color: white;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
      }

      .samp_pic_container:hover .overlay{
       opacity: 0.8;
       transition: all 0.3s
      }

      .buddy {
        max-width:1200px;
      }
 
      
      .bd_logo {
        padding: 20px;
        width: 100%;
        max-width:320px;
      }
    @media (max-width:575px) {
      .bd_logo {
        padding: 4px;
        max-width:140px ;
        
      }
    }

      .more{
       min-heght: 800px;
       padding-top: 140px;
      }

      .more_item {
       height: 360px; 
       background-image:  url("../images/bg_more.png");
       background-size: 320px;
       background-position: center center;
       background-repeat: no-repeat ;
      }

    @media (max-width:575px) {
      .more{
       min-heght: 540px;
       padding-top: 100px;
      }

      .more h4{
       font-size:12px;
       padding-top:2px;
      }

      .more_item {
       height: 200px; 
       background-size: 220px;


      }
      .more_pic {
       width:80px;
      }
    }

      .see_more {
        margin: 0 auto;
        height: 120px;
        width: 360px;
       background-image:  url("../images/bg_see_more.png");
       background-size: 30%;
       background-position: center center;
       background-repeat: no-repeat ;
      }    
 
      .see_more a{
       text-decoration: none; 
       color: #FFF !important;
       font-size:  30px;
       font-weight: bolder; 
      } 
      .see_more a:hover{
       color: #B53434 !important;
       text-shadow: 5px 5px #030303; 
       transition-duration: 0.5s;
      } 
      .iwant {
       height: 880px;
       background-image:  url("../images/bg-02.png"),url("../images/1-1-q-2.png");
       background-size:  100vw,500px;
       background-position: center bottom,center top 80px;
       background-repeat: no-repeat ;
      }

      .iwant_logo {
       padding-top:200px;
       width: 75vw; 
       max-width: 400px; 
      }
      .iwant_block {
       height: 400px; 
       padding: 0;
      }

    @media (max-width:575px) {
      .iwant {
        height: 480px;
       background-size:  100vw,75vw;
       background-position: center bottom,center top 80px;        
      }  
       .iwant_logo {
       padding-top:120px;
       width: 80vw; 
       max-width: 400px; 
       
      }
    }




      .bt_decide {
       color: #fff;
       font-size: 24px;
       font-weight: lighter;
       background-color: rgba(255, 255, 255, 0.43);
       transition:background-color 0.5s;
       border-radius: 15px;
       border:  0px;
       padding: 4px 40px 4px 40px;
      } 

      .bt_decide:hover {
        background-color: rgba(181, 52, 52, 0.8);
       
      }
      .bt_decide:active {
        margin-top: 1px;
        font-weight:5;
      }

      .bt_decide a:hover{
        color: #FFF;
      }

      .extend_bt a{
        font-size:x-large;
        padding: 8px;
        border-bottom: 2px dashed #333;
      }
      .extend_bt a:hover{
        font-weight: bold;
        padding: 9px 9px 8px 7px;
        border-bottom: 2px dashed #b53434;
      }
    @media (max-width:575px) {
      .extend_bt { 
        padding-top: 20px;
        padding-bottom: 20px;
      }
    }

    .mountain_w {
      background-color: #FFF;
      padding-top:20px;

    } 

    .mountain_w2 {
      background-color: #030303;
      padding-top:20px;

    } 
/*
數位發行2
*/
      @keyframes animatedBackground_exposure {
  from {
    background-position: right -40% top -10%;
  }
  to {
    background-position: right top;
  }
}
      @keyframes animatedBackground_exposure_md {
  from {
    background-position: right -40% top 28%;
  }
  to {
    background-position: right top 30%;
  }
}
      @keyframes animatedBackground_exposure_sm {
  from {
    background-position: right -40% top 62%;
  }
  to {
    background-position: right top 66%;
  }
}  
      .exposure {
        min-height: 100vh;
        background-image: url("../images/bg-1-2-2.png");
        background-position: right top;
        background-repeat:  no-repeat;
        animation: animatedBackground_exposure 1s ease-out;
      }

    @media (max-width:1199px) {
      .exposure {
        background-size: 75%;
      }
    }
    @media (max-width:991px) {
      .exposure {
        background-size: 100%;
        background-position: right top 30%;
        animation: animatedBackground_exposure_md 1s ease-out;
      }

      .exposure_list {
        max-width: 80vw;
      }
    }
    @media (max-width:575px) {
      .exposure {
        background-size: 100%;
        background-position: right top 66%;
        animation: animatedBackground_exposure_sm 1s ease-out;
      }
    } 
     
      .exposure_title {
        
        background-image:  url("../images/bg_tgtt.png"), 
        url("../images/line_16deg.png");
        background-size: 200px, 100%;
        background-position: left,bottom;
        background-repeat: no-repeat ;

      }

      .exposure_item {
        width: 1430px;
        height: 848px;
        margin: 0 auto;
        padding-top: 86px;
        background-image:  url("../images/Laptop-01.png"); 
        background-size:100%;
        background-position: top;
        background-repeat: no-repeat ;
 
      } 

      .exposure_item_inside {
        width: 1002px;
        height: 628px;
        margin: 0 auto 120px auto;
      }
      .ipex_vid {
        width: 100%;
        max-height: 100%;

      }
      .carousel-caption {
       top: 75%;
      }

 @media (max-width:1199px) {
      .exposure_item {
       width: 860px;
       height: 509px;
       padding-top: 50px;
       } 

      .exposure_item_inside {
       width: 604px;
       height: 379px;
       margin: 0 auto 90px auto;
      }
      .ipex_vid {
        width:604px;
        height: 379px;
      }
      .carousel-caption {
       top: 66%;
      }

 }
 @media (max-width:991px) {
      .exposure_item {
       width: 720px;
       height: 426px;
       padding-top: 43px;
       } 

      .exposure_item_inside {
       width: 506px;
       height: 318px;
       margin: 0 auto 60px auto;
      }
      .ipex_vid {
        width:506px;
        height: 318px;
      }
      .carousel-caption {
       top: 64%;
      }     
 }
 @media (max-width:767px) {
      .exposure_item {
       width: 540px;
       height: 326px;
       padding-top: 32px;
       } 

      .exposure_item_inside {
       width: 380px;
       height: 240px;
       margin: 0 auto 50px auto;
      }
      .ipex_vid {
        width:380px;
        height: 240px;
      }
      .carousel-caption {
       font-size:  0.8rem;
       top: 60%;
      }        
 }

 @media (max-width:575px) {
       .exposure_item {
       width: 360px;
       height: 213px;
       padding-top: 20px;
       } 

      .exposure_item_inside {
       width: 254px;
       height: 161px;
       margin: 0 auto 50px auto;
      }
      .ipex_vid {
        width:254px;
        height: 161px;
      }
       .carousel-caption {
       font-size:  0.5rem;
       top: 42%;
      }     
 }
       .promotion_item {
         margin-bottom: -200px;
      } 
      .promotion_pic {
        width: 250px;
        position: relative;
        top: -12px;
        left: -32px;
        z-index: 20;
      }
      .promotion_text {
        position: relative;
        width: 300px;
        top: -340px;
        background-color: rgba(255, 255, 255, 0.15);
        padding: 350px 20px 20px 20px;
        border-radius: 25px;
        z-index: 10;
      }


    @media (max-width:991px) {
       .promotion_item {
         margin-top: 0px;
         margin-bottom: 0px;
      } 

      .promotion_pic {
        width: 250px;
        position: relative;
        top: -12px;
        left: -32px;
        z-index: 20;
      }
      .promotion_text {
        position: relative;
        width: 260px;
        margin-left:auto;
        margin-right:auto;
        margin-bottom: -300px;
      }
    }
      
      .list_album {

        background-image: url("../images/bg_ownlist.png");
        background-position: right;
        background-repeat:  no-repeat;
        background-size: cover; 
        margin-bottom: 10px;
      }

      .list_album a{
        color: #fff!important;
      }
      .list_album a:hover{
        color: #b53434!important;
      }
      .list_mob {
        padding-bottom: 100px;
        margin: 0 auto;
      }
      .list_mob_container{
        width: 90%;
        max-width: 400px;
        margin: 0 auto;
      }

      .list_titles_m {
       line-height: 0.75rem;

      }
      .list_titles_m a{
       line-height: 32px;
       color: #fff; 
      }

      .list_titles_m a:hover{
       color: #b53434; 
      }
      .ogp_name_m {
        width: 180px;
        vertical-align: middle;
        line-height: 1.5rem;
        color: #FFF;
      }
      .ogp_name_m:hover {
        color: #b53434; 
      }

      .own_text {
        
        padding-top:10px;
        padding-left: 32px;
      }

      .own_album {
        width: 84%;
        position: relative;
        left: 0px;
      }

      .own_album:hover {
        filter:brightness(.5);
        transition: all 0.3s
      }

      .own_albums_m{
        width: 350px;

      }
      .own_album_m:hover, .own_album_s:hover {
        filter:brightness(.5);
        transition: all 0.3s
      }

      .own_album_m {
        width:227px;
        
        padding: 5px 0 5px 0px;
        margin-right: 5px;
      }

      .own_album_s {
        width: 113px;

        padding: 5px 0px 5px 5px;

      }
      .own_morelist {
        width: 88px;  
        margin-right: 30px;
        margin-left: 6px;
      }
      .own_link {
        line-height: 2rem;
        text-decoration: none;
        color: #FFF;
      }
     .own_link:hover {
        color: #b53434;
      }

     .owngroup {
        padding-top: 200px;
        padding-bottom: 100px; 
        background-image: url("../images/bg_owngroup_3.jpg");
        background-position: center; 
        background-repeat: no-repeat;
     }

     .group_iphone {
        margin: 0 auto;
        width: 440px;
        background-image: url("../images/phone01.png");
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
     }
     .ogp_content {
        width: 328px;
        padding: 40px 4px 30px 4px;
     }

@media (max-width:575px) {
     .owngroup {  
        background-image: none;
        padding-top: 0px;
        padding-bottom: 0px; 
     }
     .group_iphone {
        margin: 0 auto;
        width: 280px;
        background-image: url("../images/phone01.png");
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
     }
     .ogp_content {
        width: 208px;
        padding: 20px 4px 10px 4px;
     }
}   


     .arw {
      cursor: pointer;
     }
     .arw_s { 
      width:44px;
      padding-left:6px;
      padding-right:6px;
      }



/*
APP
*/
      .app_intro_container {
        width: 66%;
        margin: 0 auto;
      }
      

      .app_pics {
        width: 60%;
        max-width: 840px; 
        min-width: 320px;
        border-radius: 10%;

      }

      .app_collab {
        position:  relative;
        top: -440px;
        left: 55%;
        max-width:480px;
        padding: 40px;
        border-radius: 50px;
        background-color: rgba(255,255,255,25%);
      }

      .app_collab_pic {
        
        width: 80px;
      } 

@media (max-width:1399px){
     .app_collab {
       top: -340px;
      }
    }

@media (max-width:1199px){
    .app_intro_container {
        width: 70%;
    }
     .app_collab {
       left: 35%;
       top: -280px;
      }
    }
@media (max-width:991px){
     .app_intro_container {
        width: 90%;
      }
     .app_collab {
       top: -120px;
      }
    }      
@media (max-width:575px){
      .app_pics {
        width: 90%;
        border-radius: 10%;
      }

     .app_collab {
        position:  static;
        max-width:480px;
        padding: 40px;
        background-color: rgba(255,255,255,0%);
      }
     .app_collab_pic {
        
        width: 60px;
      } 
    }

      .minus_space {
        margin-bottom:-360px ;
      }
@media (max-width:991px){
      .minus_space {
        margin-bottom:-260px ;
      }
    }
@media (max-width:575px){
      .minus_space {
        margin-bottom:-60px ;
      }
    }

      .form-control {
        color: #dedede ;
        background-color: rgba(0, 0, 0, 0); 
        border-radius: 20px;
      }
      .form_label{

      } 
      .form_short {
       width: 50% ;
       max-width: 460px;

      }

      .form_long {
        width: 80%;
        max-width:720px ;

      }

    @media (max-width:575px) {
      .flbl,
      .form_short,
      .form_long  {
        width: 100%;
        max-width:720px ;
        margin: 0 auto;
      }
    }

      .form_buttons {
       
      }
      .btn-rnd {
        border-radius: 24px!important;
      }


      .verify_image {
        padding: 10px;
        width: 140px; 
      }
      ::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
        color: #dedede!important;
        opacity: 1; /* Firefox */
      }

      :-ms-input-placeholder { /* Internet Explorer 10-11 */
        color: #dedede!important;
      }

     ::-ms-input-placeholder { /* Microsoft Edge */
        color: #dedede!important;
      }
/*
SONGWRITER
*/
      .songwriter_main {
       background: none; 
      }

      .songwriter_main .container {
       background-image: url("../images/bg_songwriter_1.png");
       background-size: 75%;
       background-repeat: no-repeat;
       background-position: top 10% center;
      } 
      
@media (max-width:991px) {
      .songwriter_main {
       background-image: url("../images/bg_songwriter_1.png");
       background-size: cover;
       background-repeat: no-repeat;
       background-position: top 10% center;
      } 
      .songwriter_main .container{
       background: none; 
      }
    }

      .songwriter_title {
      -webkit-writing-mode: vertical-lr;
       writing-mode: vertical-lr; 
      }

@media (max-width: 767px) {

      .songwriter_title {
      -webkit-writing-mode: horizontal-tb;
       writing-mode: horizontal-tb; 
      }

} 

      .row_songwriter {
       width: 90vw;
       max-width:1080px ;
       margin:  0 auto;
       padding: 80px;
      }

      .row_songwriter_pics {
        z-index: 3;
      }

      .row_songwriter_text {
        position:  relative;
        z-index: 2;
        left: -10%;
        padding: 60px 40px 60px 12%;
        border-radius: 20px;
        background-color: rgba(50,50,50,80%);
      }

      .come_songw {
       width:540px;
       margin-top: 160px;
       padding: 80px 80px 200px 80px; 
       background-image: url("../images/bg_songwriter_2.png");
       background-repeat: no-repeat;
       background-position: left top;
      }

 @media (max-width: 767px) {

      .row_songwriter {
       padding: 20px;
      }
      .row_songwriter_text {
        position:  relative;
        top: -60px;
        padding: 80px 20px 20px 20px;
        margin-left: 20px;
      }
      .come_songw {
       width:90vw;
       margin-top: 20px;
       padding: 20px 20px 100px 20px; 
       background-repeat: no-repeat;
       background-position: right top -20px;
      }


}      
      
 

/*
video
*/
      .bg_vid_long {
       background-image: url("../images/bg_vid_long.png"),url("../images/bg_vid_long1.png");
       background-size: 60vw ;
       background-repeat: no-repeat;
       background-position: top right, bottom left;
      }

      .yt_certified {
        width: 50%;
        max-width: 400px;
      }

      .row_video {
       min-height: 560px;
       height: 100%;

      }
      .row_video_l_1 {
       background-image: url("../images/video_pic1.jpg");
       background-size: 60vw ;
       background-repeat: no-repeat;
       background-position: left;
      }

      .row_video_l_2 {
       background-image: url("../images/video_pic3.jpg");
       background-size: 60vw ;
       background-repeat: no-repeat;
       background-position: left;
      }

      .row_video_r_1 {
       background-image: url("../images/video_pic2.jpg");
       background-size: 60vw ;
       background-repeat: no-repeat;
       background-position: right;
      }

      .row_video_r_2 {
       background-image: url("../images/video_pic4.png");
       background-size: 60vw ;
       background-repeat: no-repeat;
       background-position: right;
      }


      .row_video_pics {
        
      }

      .row_video_text_l {
        width: 30vw;
        position:  relative;
        left: -15%;
        padding: 60px 40px;
        border-radius: 20px;
        background-color: rgba(255,255,255,25%);
      }
      .row_video_text_r {
        width: 30vw;
        position:  relative;
        left: 15%;
        padding: 60px 40px;
        border-radius: 20px;
        background-color: rgba(255,255,255,25%);
      }
    @media (max-width:575px) {
       .row_video_l_1,.row_video_l_2,.row_video_r_1,.row_video_r_2 {
        background-size: 100vw ;
        background-position: top;
      }
      
      .row_video_text_l,.row_video_text_r {
        width:90vw;
        position: static;
        margin-top: 60px;
        padding: 30px 10px;
      }
      
    }

      
      .colab_video {
        clear: both;
        margin:  0 auto;
        max-width: 1500px;
        width: 90vw;
      }

      .colab_video_pic {
        position: relative;
        width: 48%;
        max-width: 300px;
        padding: 2px;
      }
      .overlay {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        height: 100%;
        width: 100%;
        opacity: 0;
        transition: .5s ease;
        background-color: #000;
      } 
      .colab_video_title {
          color: white;
          font-size: 24px;
          position: absolute;
          top: 50%;
          left: 50%;
          width: 88%;
          transform: translate(-50%, -50%);
          -ms-transform: translate(-50%, -50%);
      }

      .colab_video_pic:hover .overlay{
       opacity: 0.8;
       transition: all 0.3s
      }


      .official_channels_pic {
        width: 100vw;
        max-width: 1200px;
        padding-left: 0;

      }

      .official_channels_text {
        border: #B53434 dashed 1px ; 
        border-radius:250px 0 0 250px;
        padding: 40px 0px 40px 100px ;
        text-align: left!important;
        width: 100vw;
        max-width: 1200px;
        position: relative;
        top: -20px;
      }

      .big_number {
        font-size: 48px;
        font-weight: heavy;
      }
   @media (max-width:575px) {
      .official_channels_text {
        padding: 30px 0px 20px 100px ;
        top: -10px;
      }    
      .big_number {
        font-size: 24px;
        font-weight: heavy;
      }
    }
      .embed_vid {
        width: 45vw ;
        max-width: 540px;
        aspect-ratio: 16 / 9;
      }
   @media (max-width:575px) {
      .embed_vid {
        width: 90vw ;
      }

   }

      .platform_video_pic_l {

        width: 280px;
        height: auto;
      }

      .platform_video_pic {
        width: 120px;
        height: auto;
      }
    
/*
EBOOK
*/    
      .ebook_feature{
        padding: 80px 10px 80px 10px;
        background-image: url("../images/bg_ebft.png");   
        background-repeat:no-repeat ;
        background-position: center;
        background-size: cover; 
      }

      .ebicon {
        height: 114px;
      }  
      .ebarrow {
        width: 98px;
      }

      .ebook_exclusive {
        width: 1280px;
        height: 190px;
        padding: 20px;
        border-radius: 180px;
        background-color: rgba(255,255,255,25%);
        -webkit-box-shadow:0px 0px 33px 12px rgba(214,214,214,0.15);
        box-shadow: 0px 0px 33px 12px rgba(214,214,214,0.15);
      }
      .excl_items {
        margin-left: 20px;
        margin-right: 20px;
      }
      .excl_title_m {
        padding: 20px;
        border-radius: 180px;
        background-color: rgba(255,255,255,25%);
        -webkit-box-shadow:0px 0px 33px 12px rgba(214,214,214,0.15);
        box-shadow: 0px 0px 33px 12px rgba(214,214,214,0.15);
      }
      .excl_icon_m {
        width: 20vw;
      }
@media (max-width:991px) {
      .ebook_feature{
        padding: 100px 10px 100px 10px;
        margin-top:40px;
        margin-bottom:40px ;
        background-image: url("../images/bg_ebft.png");   
        background-size: 380px; 
      } 
      .ebarrow {
        transform: rotate(90deg);
      }
      .ebook_exclusive {
        width: 800px;
      }  
      .excl_items {
        margin-left: 4px;
        margin-right: 4px;
      }
  }

      .digital_publish {
        padding-top: 100px;
        background-image: url("../images/bg_ebdp.png");   
        background-repeat:no-repeat ;
        background-position: left top;
      
      }
      .publish_feature {
        font-size: 40px;
      }
      .dps_line {
        width: 42vw;
        display: inline;
      }
  @media (max-width:991px) {
      .digital_publish {
        padding-top: 100px;
        padding-bottom: 100px;
      }  
  }    
  @media (max-width:575px) {
      .dps_line {
        width: 100vw;
        display: block;
        padding-top:10px;
        padding-bottom: 10px;
      }
      .dp_list{
        margin: 0 auto;
        width: fit-content;
        margin: 0 auto;
      }
      .publish_feature {
        font-size: 24px;
      }
  }

      .red_dot_list {
          list-style: disc;
          color: #B53434;
        }
      .red_dot_list li p {
          color: #FFF;
        }
      .red_dot_list li a {
          color: #FFF;
          line-height: 56px;
      } 
      .ebook_platform {
        padding-top: 200px;
        background-image: url("../images/bg_ebplatform.png");   
        background-size: cover;
        background-repeat:no-repeat ;
        background-position: center;
        padding-bottom: 120px;
      }  

      .ebplatforms {
        max-width: 960px;
        width: 80%;
        margin:  0 auto;
      } 
      .ebpl_icons {
        max-width: 160px;
      }
      .exp_category {
        list-style: none;
        padding-left: 0!important;
      }
      .exp_category li{
        cursor: pointer;
        display: inline;
        padding: 4px 8px;

      }

      .ebook_example {

        padding-bottom: 140px;
      }
      .ebct a {
        color: #FFF !important;
        text-decoration: none;
      }

      .ebct .active{ 
        border-bottom:dashed  1px #b53434;
 

      }

      .eb_books{
        padding: 0;

      }

/*
ABOUT
*/

.timeline_wrapper {
          background-image: url("../images/bg-02.png");   
        background-size: 100vw;
        background-repeat:no-repeat ;
        background-position: bottom;
        padding-bottom:360px;
}
@media (max-width:575px) {
 .timeline_wrapper {
  padding-bottom:80px;
 }
}
.timeline {
  width: 100%;
  max-width: 80vw;
  padding: 0px 50px 0px 50px;
  position: relative;

}
.timeline:before {
  content: '';
  position: absolute;
  top: 0px;
  left: calc(33% + 15px);
  bottom: 0px;
  width: 4px;
  background-image: url("../images/line_dotted.png");   
  background-repeat:repeat-y ;
  
}
.timeline:after {
  content: "";
  display: table;
  clear: both;
}

.timeline_m {
        padding-bottom:100px;
}
.timeline_m_title {
  font-weight:bolder;
  font-size: 32px;
}
.entry {
  clear: both;
  text-align: left;
  position: relative;
}
.entry .title {
  margin-bottom: .5em;
  float: left;
  width: 33%;
  padding-right: 30px;
  text-align: right;
  position: relative;
}
.entry .title:before {
  content: '';
  position: absolute;
  width: 8px;
  height: 8px;
  border: 8px solid #B53434;
  background-color: #fff;
  border-radius: 100%;
  top: 15%;
  right: -8px;
  z-index: 99;
}
.entry .title h3 {
  margin: 0;
  font-size: 120%;
}
.entry .title p {
  margin: 0;
  font-size: 100%;
}

.entry .title2 {
  margin-bottom: .5em;
  float: left;
  width: 33%;
  padding-right: 30px;
  text-align: right;
  position: relative;
}
.entry .title2:before {
  content: '';
  position: absolute;
  width: 8px;
  height: 8px;
  border: none;
  background-color: none;
  border-radius: 100%;
  top: 15%;
  right: -8px;
  z-index: 99;
}
.entry .title2 h3 {
  margin: 0;
  font-size: 120%;
}
.entry .title2 p {
  margin: 0;
  font-size: 100%;
}

.fake_inline_list {
  width: 450px;
}

.fake_inline_list li{
  list-style: none;
}

.entry .body {
  margin: 0 0 3em;
  float: right;
  width: 66%;
  padding-left: 30px;
}
.entry .body p {
  line-height: 2em;
}
.entry .body p:first-child {
  margin-top: 0;
  font-weight: 400;
}
.entry .body ul {
  color: #FFF;
  padding-left: 0;
  list-style-type: none;
}
.entry .body ul li:before {
  content: "";
  margin-right: .5em;
}

.about_service {
        height: 262px;
        width: 262px;
        background-image: url("../images/bg_about_serv.png");   
        background-repeat:no-repeat ;
        background-position: center;
}
.about_service a{
        color: #fff;
        text-decoration: none;
}
.about_service a:hover {
        font-size: 98%;
        color: #b53434;
        transition: all 0.3s;
}

@media (max-width:575px) {
      .about_service {
        height: 170px;
        width: 170px;
        background-size:cover ;
  }
}

.about_logo_m {
     width: 140px;

}
.fake_inline_list_m {
  width: 300px;
}

.fake_inline_list_m li{
  list-style: none;
}

.star_sign {
  color: red;
  font-size: 20px;
}