@charset "UTF-8";

#dv_p_all{ display: flex; flex-flow: row wrap; width: 100%; }
.marea{ position: relative; background: #fff; }
.videoMoreBtn{ 
    position: absolute; right: 0; bottom: 40px; 
    display: inline-block; width: 36px; padding-bottom: 11px; font-size: 20px; color: #606060; font-weight: 700;
}

/* === videoThum === */
.videoThum{ position: relative; background: #000;}
.videoThum img{ width: 100%; object-fit: contain; }
.videoThum .playtime{ 
    position: absolute; right: 0; bottom: 0;
    padding: 2px 6px;
    background: #000; color: #fff; opacity: 0.8;
    border-radius: 2px; font-size: 8px;
}

/* === videoinfo === */
.videoInfo{ width: 100%;  box-sizing: border-box; }
.videoInfo > div{ display: flex; box-sizing: border-box; }

/* titleBox */
.titleBox{ align-items: center; padding: 6px 0 12px; border-bottom: 1px solid #e1e3e8; } 

.titleBox > .profile-icon{ width: 32px; height: 32px; margin-right: 8px; } 


.titleBox > div:nth-of-type(2){ 
    display: flex; flex-flow: column wrap;
    width: calc(100% - 40px); height: 32px;
}
.titleBox div:nth-of-type(2) > *{ width: 100%; font-size: 12px; font-weight: 100; height: 16px; line-height: 16px; }
.titleBox div:nth-of-type(2) span{ color: #7b8a9a; }
.titleBox div:nth-of-type(2) span img{ width: 8px; }

/* informationBox */
.informationBox{ flex-flow: row wrap; justify-content: space-between; padding: 5px 0 14px; }
.informationBox .row02{ 
    width: 100%; height: 40px;
    margin-bottom: 8px; padding-right: 36px; box-sizing: border-box; 
    line-height: 1.43; font-size: 14px; font-weight: 600;
}
.informationBox .row01, .informationBox p:nth-of-type(2){
    font-size: 12px;  color: #7b8a9a; font-weight: 100;
}
.informationBox .row01{ width: calc(100% - 180px); }
.informationBox .row01 > img{ width: 8.5px; margin-right: 4px; }

/* === createNewFreeyom === */
.createNewFreeyom{ position: fixed; bottom: 60px; right: 20px; }

/*=========================== 768 =============================*/
@media screen and (min-width: 768px){
    main{ padding: 0 16px; }
    #dv_p_all{ padding-top: 12px; }
    .marea{ width: calc(33.33% - 16px); margin: 0 8px; }

    /* === videoInfo === */
    .videoInfo{ padding: 0; }
}
@media screen and (max-width: 767px){
    main{ padding: 0 16px; }
    #dv_p_all{ padding-top: 12px; }
    .marea{ width: calc(50% - 16px); margin: 0 8px; }

    /* === videoInfo === */
    .videoInfo{ padding: 0; }
}

/*=========================== 640 =============================*/
@media screen and (max-width: 640px){
    
}

/*=========================== 500 =============================*/
@media screen and (max-width: 540px){
    main{ padding: 0; background: #e6e6e6; }
    #dv_p_all{ padding-top: 0 }
    .marea{ width: 100%; margin: 0 auto 16px; }

    /* === videoInfo === */
    .videoInfo{ padding: 0 30px; }
    .videoMoreBtn{ right: 20px; }
}
/*=========================== 414 =============================*/
@media screen and (max-width: 414px){

}
/*=========================== 375 =============================*/
@media screen and (max-width: 375px){

}
/*=========================== 320 =============================*/
@media screen and (max-width: 320px){

}
/*=========================== 280 =============================*/
@media screen and (max-width: 280px){

}