@charset "UTF-8";
/* Noto Sans KR */

@font-face {
    font-family: 'Noto Sans KR';
    font-weight: 400;
    src: url('/humanframe/global/assets/css/font/NotoSansKR-Regular.woff2') format('woff2'),
        url('/humanframe/global/assets/css/font/NotoSansKR-Regular.woff') format('woff'),
        url('/humanframe/global/assets/css/font/NotoSansKR-Regular.otf') format('opentype');
}

@font-face {
    font-family: 'Noto Sans KR';
    font-weight: 600;
    src: url('/humanframe/global/assets/css/font/NotoSansKR-Bold.woff2') format('woff2'),
        url('/humanframe/global/assets/css/font/NotoSansKR-Bold.woff') format('woff'),
        url('/humanframe/global/assets/css/font/NotoSansKR-Bold.otf') format('opentype');
}

@font-face {
    font-family: 'Noto Sans KR';
    font-weight: 800;
    src: url('/humanframe/global/assets/css/font/NotoSansKR-Black.woff2') format('woff2'),
        url('/humanframe/global/assets/css/font/NotoSansKR-Black.woff') format('woff'),
        url('/humanframe/global/assets/css/font/NotoSansKR-Black.otf') format('opentype');
}



* {margin: 0; padding: 0; list-style-type: none; box-sizing: border-box;}
a {text-decoration: none; color: #222;}
html {position: relative; width:100%; height:100%; font-family: "Noto Sans KR", sans-serif; font-size: 0.625em; overflow:hidden;}
body {position: relative; width:100%; height:100%; font-size: 1.8rem; font-weight:400; line-height:1.4; color:#222; overflow-x: hidden; transition: 0.4s;}

ul {list-style-type: none;}
a {text-decoration: none;}
a:focus-visible{
	outline:2px solid #222;
}



/* #section1 */
#section1{
    display: block; width:100%; height:100vh;
}
.container{
    display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; width:100%; height:100%;
}
.topBox{
    display: flex; flex-direction: row; justify-content: space-between; align-items: center;  padding:24px 40px; width:100%; border-bottom:1px solid #ddd;
}
.topBox > .boxL{
    display: flex; flex-direction: row; justify-content: flex-start; align-items: center; gap:24px; width:100%; flex: 1 1 0;
}
.topBox > .boxL > .livebusanBadge{
    font-size: 2.6rem; font-weight: 800; background-image: url(/humanframe/theme/busan22/assets/img/content/livebusan/iconLivebusan.png), linear-gradient(to right, #00123c, #0036a1); border-radius: 50px; padding:17px 27px 18px 77px; color:#fff; line-height:1em; background-repeat: no-repeat; background-position: left 27px center, center; background-size: auto;
}
.topBox > .boxL > .tit{
    font-size: 3.2rem; font-weight: 800; padding-top:8px; padding-right:30px; flex: 1 1 0;
}
.topBox > .boxR{
    display: flex; align-items: center;
}
.topBox > .boxR > a{
    display: block; width:40px; height:40px; background-image: url(/humanframe/theme/busan22/assets/img/content/livebusan/iconBusan.png); background-repeat: no-repeat; background-size: 100%; background-position: center;
}
.botBox{
    display:grid; flex: 1 1 0; width:100%; grid-template-columns: 3fr 1fr; gap:40px; padding:40px;
}
.botBox > .boxL{
    display: block; height:100%;
}
.botBox > .boxL > .videoBox{
    display: block; width:100%; height:100%; background:#fbfbfb;
}
.botBox > .boxL > .videoBox > iframe{
    display: block; width:100%; height: 100%;
}
.botBox > .boxL.readyLive{
    background:#565656; display:flex; flex-direction: row; justify-content: center; align-items: center;
}
.botBox > .boxL.readyLive > p{
    padding-top:280px; color:#fff; background-image: url(/humanframe/theme/busan22/assets/img/content/livebusan/iconReadylive.png); background-repeat: no-repeat; background-position: center top; text-align: center; width:100%; font-size: 2.6rem;
}
.botBox > .boxR{
    padding:40px; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap:8px; background:#f3f3f3;
}
.botBox > .boxR > .ytbBadge{
    border:2px solid red; color:red; padding:12px 20px 12px 54px; border-radius: 40px; font-size:1.5rem; line-height:1em; font-weight: 800; line-height:1em; background-image: url(/humanframe/theme/busan22/assets/img/content/livebusan/iconYtb.png); background-size: 28px auto; background-repeat: no-repeat; background-position: left 20px center; transition: 0.2s;
}
.botBox > .boxR > .ytbBadge:hover{
    background:red; color:#fff;background-image: url(/humanframe/theme/busan22/assets/img/content/livebusan/iconYtb_hover.png); background-size: 28px auto; background-repeat: no-repeat; background-position: left 20px center; transition: 0.2s;
}
.botBox > .boxR > .infoBox{
    display: block; width:100%; height:100%; flex: 1 1 0; overflow-y: auto; padding-top:16px; margin-top: 8px; border-top: 1px solid #ddd;
    max-height:240px;
}
.botBox > .boxR > .infoBox > p{
    white-space: pre-line;
}
@media screen and (max-width:1024px){
    body{
        font-size: 1.7rem;
    }
    .topBox{
        padding:20px;
    }
    .botBox > .boxL.readyLive > p,
    .topBox > .boxL > .livebusanBadge{
        font-size: 2rem;
    }
    .topBox > .boxL > .tit{
        font-size: 2.8rem; padding-top:0;
    }
    .topBox > .boxR > a{
        width:32px; height:32px;
    }
    .botBox{
        grid-template-columns: 2fr 1fr; padding:40px 20px; gap:20px;
    }
    .botBox > .boxR{
        padding:20px;
    }

}
@media screen and (max-width:768px){
    body{
        font-size: 1.6rem;
    }
    #section1{
        height:auto;
        min-height:100vh;
    }
    .topBox{
        align-items: flex-start; position: relative;
    }
    .topBox > .boxL{
        flex-direction: column; align-items: flex-start; gap:8px;
    }
    .topBox > .boxL > .livebusanBadge{
        font-size: 1.8rem; background-size: auto 20px, auto; padding:12px 20px 13px 54px; background-position: left 20px center, center;
    }
    .topBox > .boxL > .tit{
        font-size: 2.2rem; padding:0;
    }
    .topBox > .boxR{
        padding-top:0; position: absolute; top:26px; right:20px;
    }
    .botBox{
        grid-template-columns: 1fr; gap:0; padding:20px;
    }
    .botBox > .boxR > .date,
    .botBox > .boxR > .infoBox{
        display: none;
    }
    .botBox > .boxL > .videoBox{
        aspect-ratio:16 / 9;
    }
    .botBox > .boxL.readyLive{
        min-height:40vh
    }
    .botBox > .boxL.readyLive > p{
        background-size:auto 100px; font-size: 1.8rem; padding-top:110px;
    }
}
.txtBlind{
	overflow: hidden;
  	position: absolute !important;
  	clip: rect(0, 0, 0, 0);
  	clip-path: polygon(0 0, 0 0, 0 0);
  	width: 1px;
  	height: 1px;
  	margin: -1px;
}