*{ font-family: 'Spoqa Han Sans Neo', 'sans-serif'; }

@media (max-width : 450px) {
    *{ font-family: 'Spoqa Han Sans Neo', 'sans-serif'; }

    .center {
        background-color: rgb(0, 0, 0);
        width: 390px;
        height: auto;
        left: 50%;
        margin-left: -195px;
        position: relative;  
        margin-top: 8%;
        overflow: hidden;
        color: black;
    }
    .People-title{
        margin-top: 5%;
        margin-left: 20px;
    }
    .star{
        margin-top: 6px;
        margin-right: 5px;
        width: 18px;
        height: 18px;
        float: left;
    }
    .title{
        display: inline;
        font-size: 20px;
    }
    .seoson > a {
        text-decoration: underline; 
        font-size: 17px;  
        font-weight: 500;
    }
    .seoson1{
        display: inline;
        float: left;           
    }
    .seoson2{
        display: inline;
        float: left; 
        /* float: inline-start;
        margin-left: 45px;
        margin-right: 20px;    */
        margin-right: 20px;
    }
    .seoson3{
        display: inline;
        float: inline-start;
        margin-left: 45px;
        margin-right: 20px;   
    }
    
    .L_bubble{
        position: relative;
        width: 355px;
        height: 100px;
        margin-top: 60px;
        margin-left: 14px;
        background: #9EA9D7;
        border-radius: 20px;
        clear: both;
    }
    .L_bubble:after { /*말풍선 아래 삼각형 생성*/
        content: '';
        position: absolute;
        bottom: 0;
        left: 5%;
        width: 0;
        height: 0;
        border: 25px solid transparent;
        border-top-color: #9EA9D7;
        border-bottom: 0;
        border-left: 0;
        margin-left: -5px;
        margin-bottom: -22px;
  
    }
    .L_photo{
        width: 95px;
        height: 100px;
        float: left;
        margin-top: 2px;
        margin-bottom: 2px;
    }
    .L_text p{
        width: 250px;
        height: 35px;
        font-weight: bold ;
        font-size: 16px;
        overflow: visible;  
        text-align: center;
        display: inline-block;
        margin-top: 10px;
    }
    .L_name{
        height: 16px;
        display: inline;
        float: left;
        font-size: 13px;
        text-align: center;
        overflow: visible;
    
    }
    .L_link{ 
        display: inline;
        width: 80px;
        height: 16px;
        margin-top: 10px;
        margin-left: 5px;
    }
    .L_bubble a{
        display: inline;
        width: 26px;
        height: 26px;
        margin-top: 15px;
        float: inline-start;
    }

    .R_bubble {/*말풍선 둥근 사각형 생성*/
        position: relative;
        float: right;
        width: 355px;
        height: 100px;
        margin-top: 40px;
        margin-bottom: 40px;
        margin-right: 14px;
        background: white;
        border-radius: 20px;
        align-self: flex-end;
        clear: both;
    
    }
    
    .R_bubble:after { /*말풍선 아래 삼각형 생성*/
        content: '';
        position: absolute;
        bottom: 0;
        right: 5%;
        width: 0;
        height: 0;
        border: 25px solid transparent;
        border-top-color: white;
        border-bottom: 0;
        border-left: 0;
        margin-left: -10px;
        margin-bottom: -22px;
        transform: matrix(-80);
        
    }
    
    .R_photo{
        width: 95px;
        height: 100px;
        float: right;
        margin-top: 2px;
        margin-bottom: 2px;
    }
    .R_text{
        width: auto;
        margin-top: 10px;
        float: inline-end;
        text-align: center;
        font-weight: bold ;
        margin-right: 5px;
        font-size: 16px;
        overflow: visible;  
    }
    .R_name{
        height: 25px;
        display: inline;
        float: inline-start;
        font-size: 13px;
        text-align: center;
        overflow: visible;
        margin-left: 120px;
    }
    .R_link{
        margin-top: 15px;
        margin-bottom: -15px;
    }
    
    .m_link {
        display: inline;
        height: 26px;
        margin-right: 50px;
        float: right;
    }
    .p_link{
        display: none;
    }
    @keyframes bubbleFadeIn {
        0% {
            opacity: 0;
            transform: translateY(20px);
        }
        50% {
            opacity: 0.5;
            transform: translateY(-20px);
        }
        100% {
            opacity: 1;
            transform: translateY(0);
        }
    }
    
    .L_bubble,
    .R_bubble {
        opacity: 0;
        animation-name: bubbleFadeIn;
        animation-duration: 0.8s;
        animation-fill-mode: forwards;
    }
    
}

@media (min-width : 450px) {
    body {
        background-color: black;
        width: auto;
        height: auto;
    }
    
    .People-title{
        margin-top: 5%;
        margin-left: 80px;
    }
    .star{
        margin-top: 6px;
        margin-right: 10px;
        width: 30px;
        height: 30px;
        float: left;
    }
    .title{
        display: inline;

    }
    .seoson > a {
        text-decoration: underline; 
        font-size: 20px;  
        font-weight: 600;
    }
    .seoson1{
        display: inline;
        float: left;           
    }
    .seoson2{
        display: inline;
        float: left; 
        /* float: inline-start; */
        /* margin-left: 45px; */
        margin-right: 20px;   
    }
    .seoson3{
        display: inline;
        float: inline-start;
        margin-left: 90px;
        margin-right: 20px;   
    }
    
    
    .center {
        background-color: black;
        width: 800px;
        height: auto;
        position: relative;  
        left: 50%;
        top: 100px;
        margin-left: -400px;
        margin-top: 8%;
        overflow: hidden;
        color: black;
      }
      
    
    .L_bubble {/*말풍선 둥근 사각형 생성*kjhsdvio*/
        position: relative;
        width: 430px;
        height: 120px;
        margin-top: 60px;
        margin-left: 30px;
        background: #9EA9D7;
        border-radius: 20px;
        clear: both;
    }
    
    .L_bubble:after { /*말풍선 아래 삼각형 생성*/
        content: '';
        position: absolute;
        bottom: 0;
        left: 5%;
        width: 0;
        height: 0;
        border: 25px solid transparent;
        border-top-color: #9EA9D7;
        border-bottom: 0;
        border-left: 0;
        margin-left: -5px;
        margin-bottom: -20px;  
    }
    
    .L_photo{
        width: 110px;
        height: 110px;
        float: left;
        text-align: center;
        margin: 10px;
        
    }
    .L_text{
        width: 280px;
        height: 80px;
        float: inline-start;
        text-align: center;
        font-weight: bold ;
        margin-left: 3px;
        font-size: 18px;
        overflow: visible;  
        margin-top: -10px;
    }
    .L_name{
        width: 70px;
        height: 50px;
        margin-left: 10px;
        margin-right: 5px;
        float: inline-start;
        text-align: center;
        font-weight: bolder ;
        font-size: 15px;
        overflow: visible;
    
    }
    .L_link{
        width: 200px;
        height: 50px;  
        margin-bottom: 5px;
        margin-top: -20px;
        margin-left: 3px;
        float: inline-start; 
        text-align: right;
        
    }
    
    .R_bubble {/*말풍선 둥근 사각형 생성*/
        position: relative;
        float: right;
        width: 430px;
        height: 120px;
        margin-top: 60px;
        margin-bottom: 60px;
        margin-right: 30px;
        background: white;
        border-radius: 20px;
        align-self: flex-end;
        clear: both;
    
    
    }
    
    .R_bubble:after { /*말풍선 아래 삼각형 생성*/
        content: '';
        position: absolute;
        bottom: 0;
        right: 5%;
        width: 0;
        height: 0;
        border: 25px solid transparent;
        border-top-color: white;
        border-bottom: 0;
        border-left: 0;
        margin-left: -10px;
        margin-bottom: -20px;
        transform: matrix(-80);
        
    }
    
    .R_photo{
        width: 110px;
        height: 110px;
        float: left;
        text-align: center;
        margin: 10px;
    }
    .R_text{
        width: 280px;
        height: 80px;
        float: inline-start;
        text-align: center;
        font-weight: bold ;
        margin-top: -10px;
        margin-left: 3px;
        font-size: 18px;
        overflow: visible;  
    }
    .R_name{
        width: 70px;
        height: 50px;
        margin-left: 10px;
        margin-right: 5px;
        float: inline-start;
        text-align: center;
        font-weight: bolder ;
        font-size: 15px;
        overflow: visible;
    }
    .R_link{
        width: 200px;
        height: 50px;  
        margin-bottom: 5px;
        margin-top: 7px;
        margin-left: 3px;
        float: inline-start; 
        text-align: left;
    }

    .m_link{
        display: none;
    }
    @keyframes bubbleFadeIn {
        0% {
            opacity: 0;
            transform: translateY(20px);
        }
        50% {
            opacity: 0.5;
            transform: translateY(-20px);
        }
        100% {
            opacity: 1;
            transform: translateY(0);
        }
    }
    
    .L_bubble,
    .R_bubble {
        opacity: 0;
        animation-name: bubbleFadeIn;
        animation-duration: 0.8s;
        animation-fill-mode: forwards;
    }
   
}