/** common - android ios **/
@media screen and (-webkit-min-device-pixel-ratio : 1.5), (min-device-pixel-ratio : 1.5) {
    .wrap {min-width:inherit;}
    .wrap, .topContainer {min-width:100vw; overflow:hidden;}
    .topContainer {padding-left:20px; padding-right:20px;}
    .wrapMax {padding:0px 20px;}
    .imgLiveBi {background-image:url('/Resources/Images/bi_live_m.png');}
    .mainImgBox .gradation {background:linear-gradient(to right, transparent -20%, #fff 85%);}
    .mainImgBox .date::before {content:'';}
    .topBox {margin-top:30px;}
    .mainLiveList .liveItemText {width:calc(100% - 170px);}
    .gridPage .titMain {margin-top:30px;}
    .LivePage {min-height:calc(100vh + 500px);}
    .liveListBox, .liveItemBox, .liveThumbnail {height:90px;}
    .liveItemText {margin-top:0px;}
    .mainLiveList .btnBox .dx-button.settingBtn {margin-top:0px;}
    #dxScheduler-liveSchedule .dx-button-mode-contained {margin-left:0;}
    .liveThumbnail {width:157px; min-width:157px; height:90px;}
    .mainLiveList .optionBox .dxBtn {margin-top:1px;}
    .prevBanner{left:1%;}
    .nextBanner{right:1%;}
    .LivePage .textBox .header .FR {position:absolute; right:0; margin-top:-15px;}
}

/** ipad **/
@media screen and (max-width:1280px) {
    .mainImgText>div dl {width:400px; padding-left:0px;}
    .mainImgBox .mainImg, .mainPage .mainImgBox .gradation {width:550px;}
    .mainImgBox .gradation {left:1px;}

    .liveItemBox {width:50%;}
    .mainImgText>div dl {width:850px; padding-left:150px;}
}

@media screen and (max-width:1024px) {
    .mainImgBox .subject {max-width:630px;}
    .topContainer .profileBox {margin-top:0px; min-width:48px;}
    .topContainer [class^="icon"]:not(.iconProfile) {top:6px; left:16px;}

    .mainImgText>div dl {width:80%; padding-left:20%;}

    .liveSetBox .livePreparing-img p {font-size:1em;}

    .LivePage .textBox .header .FL {width:100%;}

    .liveSetBox .livePreparing-img>div>div {width:200px; height:150px; padding-top:30px;}
    .liveSetBox .livePreparing-img p {font-size:16px;}

    .dx-scheduler-work-space-month .dx-scheduler-date-table-scrollable .dx-scrollable-content {padding-bottom:0;}
}

@media screen and (min-width:1024px) and (max-width:1030px) {
    .topBox .tooltipBox {font-size:11px;}
}

@media screen and (min-width:768px) and (max-width:1366px) {
    #divLiveScheduleDetailList table colgroup col:last-child,
    #dxDataGrid-liveScheduleList table colgroup col:last-child {width:125px;}

    .liveSetBox .liveChatBox, .liveChat iframe, .liveChatDimmed {width:390px;}
    .liveSendOutBox, .LivePage .topBox>div.buttonBox.live {width:calc(100% - 400px);}
}

@media screen and (max-width:1023px) {
    .mainImgText {padding:0;}
    .mainImgText>div dl {width:60%; padding-left:10%;}

    .topContainer {padding:14px 20px;}
    .mainImgText>div dl {width:70%;}

    .dx-scheduler-work-space-month .dx-scheduler-header-panel, .dx-scheduler-work-space-month .dx-scheduler-date-table {width:calc(100% - 60px); margin:0px 30px;}

    .liveItemBox {width:100%;}
    .liveItemBox:first-child {width:100%;}
    .liveItemBox:nth-child(n+1):nth-child(-n+3) {display:inline-block;}
    .liveItemBox {display:block;}
    .liveItemBox:first-child+.liveItemBox {margin:20px 0px;}

}

@media screen and (min-width:601px) and (max-width:768px) {
    .liveItemBox.liveAppointed .liveItemText {max-width:570px;}
}


/** common - vertical **/
@media screen and (orientation:portrait) {
    .liveSendOutBox {height:auto;}
    .liveSendOutBox video-js, .bc-player-default_default, .liveSetBox .livePreparing-img {height:35vh;}
    .liveSendOutBox {width:100%;}
    .LivePage .topBox>div.buttonBox.live {width:100%;}
    .liveSetBox .livePreparing-img>div>div {width:30%; height:auto; padding:40px 0px 20px 0px;}
    .liveSetBox .livePreparing-img p {font-size:14px;}
    .liveSetBox .textBox {width:100%; margin-bottom:20px;}
    .liveSetBox .liveChatBox, .liveChat iframe, .liveChatDimmed {width:100%;}
    .liveSetBox .liveChatBox, .liveChatDimmed {height:calc(50vh - 80px);}
    .LivePage.admin .liveSetBox .liveChatBox {margin-top:20px;}
    .LivePage.general .liveSetBox .liveChatBox {margin-top:20px;}
    .liveChat iframe {height:calc(50vh - 81px); border:0;}
}


/** mobile **/
@media screen and (orientation:portrait) and (max-width:600px), (orientation:landscape) and (max-height:600px) {
    .topContainer {padding:14px 15px;}
    .topContainer [class^='btnRound'] {display:none;}
    .wrapMax {padding:0px 10px;}
    .mainLiveList .btnBox {width:1px; display:none;}
    .liveItemText .subject {width:calc(100vw - 200px);}
    .mainImgBox .line02 {top:60px;}
    .mobileOnly {display:none;}
    .liveItemText {margin-top:-4px; padding-left:10px;}
    .liveItemText .subject {font-size:16px;}
    .liveSetBox .liveChatBox {margin-top:20px;}
    .liveThumbnail {width:157px; height:90px;}
    .LivePage.admin .liveSetBox .liveChatBox {margin-top:20px;}
    .liveSendOutBox video-js, .bc-player-default_default, .liveSetBox .livePreparing-img {min-height:280px;}
    .urlTyping .apply>div {width:100%; height:100%; top:0; left:0; margin:0;}

    #divLiveScheduleDetailList table colgroup col:last-child,
    #dxDataGrid-liveScheduleList table colgroup col:last-child,
    #dxDataGrid-liveList table colgroup col:first-child,
    #dxDataGrid-liveList table colgroup col:nth-last-child(2) {width:0px !important;}
    #dxDataGrid-liveList table colgroup col:nth-child(2) {width:500px;}
    .LivePage .textBox .header .FR {display:none;}
}

/* mobile - vertical */
@media screen and (orientation:portrait) and (max-width:600px) {
    .wrap {min-height:900px;}
    .mainImgBox .subject {font-size:40px;}
    .mainImgBox .mainImg, .mainPage .mainImgBox .gradation {width:100%;}
    .liveSetBox .livePreparing-img>div>div {width:40%;}
    .liveCreator .optionBox>*:not(:first-child), .LivePage .buttonBox {display:none;}
    #divDataGirdContainer #dxDateBox-liveDate {right:0px;}
    .mainLiveList .liveBox {width:100%;}
    .mainImgBox .subject {width:calc(100vw - 100px);}
    .contentPage .liveItemBox {min-width:470px;}
    .mainImgText>div dl {width:80%; padding-left:0;}

    #liveAppointed .liveItemBox {min-width:428px;}
    .liveItemText .subject .noLive {line-height:18px;}
    .liveThumbnail {width:157px; height:90px;}
    .liveItemBox:first-child+.liveItemBox {margin:15px 0px;}
    .liveListBox, .liveItemBox {height:auto;}

    #dxDataGrid-liveList table colgroup col:nth-last-child(-n+2) {width:1px;}
    .mainLiveList  colgroup col[style] {width:1px !important;}
    #divDataGirdContainer colgroup col[style]+col {width:calc(100vw - 30px);}
}

/* mobile - horizontal */
@media screen and (orientation:landscape) and (max-height:550px) {
    .LivePage .liveSendOutBox, .LivePage .topBox>div.buttonBox.live {width:100%;}
    .liveSendOutBox, .liveSendOutBox video-js, .bc-player-default_default, .liveSetBox .livePreparing-img {height:calc(100vh - 80px);}
    .LivePage .liveChatBox {display:none;}
    #divDataGirdContainer #dxDateBox-liveDate {right:0px;}
}

/* mobile - keyboard */
@media screen and (max-width:550px) and (max-height:600px) {
    .LivePage {position:absolute; width:100vw;}
    .liveSendOutBox {min-height:300px;}
    .LivePage .liveChatBox {display:inherit; min-height:280px;}
    .liveSetBox .liveChatBox, .liveChatDimmed {width:100%; min-height:393px;}
    .liveChat iframe {width:100%; min-height:391px;}
}

/* mobile - view port error */
@media screen and (orientation:portrait) and (max-width:400px) {
    .liveThumbnail {width:100px; min-width:100px;}
    .liveItemText .subject {width:calc(100vw - 140px)}
}