@charset "utf-8";

.ugC_Program_Detail-content { display:flex; width:100%; gap:20px; align-items:flex-start; margin-bottom:20px;}
.ugC_Program_Detail-content * { padding:0; margin:0; list-style:none; text-decoration:none;}
.ugC_Program_Detail-content img { display:block; max-width:100%; height:auto; object-fit: cover;
/*圓角*/
border-radius:30px;}
.ugC_Program_Detail-content .content-text { width:calc( 100% - 512px - 20px ); display:flex; flex-wrap:wrap; gap:10px; padding:10px 0; flex-direction:column;}
.ugC_Program_Detail-content .content-text:only-child { width:100%;}
.ugC_Program_Detail-content .content-text .title{ font-size:2em; font-weight:bold; position:relative; line-height:1.2; border-left:4px solid #333; padding-left:10px;}
.ugC_Program_Detail-content .content-text .time { display:flex; gap:5px; width:100%;}
.ugC_Program_Detail-content .content-text .host { display:flex; align-items:center; flex-wrap:wrap;}
.ugC_Program_Detail-content .content-text .host div { display:inline-flex; max-width:calc( 100% - 70px );}

.ugC_Program_Detail-content .content-text .host div li { display:inline-flex; align-items:center;}
.ugC_Program_Detail-content .content-text .host div li a { padding:7.5px 10px; border:1px solid #ccc; border-radius: 20px; background:white; line-height:1; margin:1px 0;
box-shadow: 1px 1px 3px 0px rgba(0, 0, 0, 0.1);
/*基礎動畫*/
transition:border .5s, color .5s, background .5s;}
.ugC_Program_Detail-content .content-text .host div li a:hover,
.ugC_Program_Detail-content .content-text .host div li a:active { border:1px solid rgb(25,120,240);}
.ugC_Program_Detail-content .content-text .host div li a:focus {  border:1px dashed blue; background:rgba(255,240,0,1);}
.ugC_Program_Detail-content .content-text .host div li:not(:last-child):after { content:'、';}
.ugC_Program_Detail-content .content-text .Desc > *:not(:last-child) { margin-bottom:1em;}
.ugC_Program_Detail-content .content-text .social { display:inline-flex; gap:5px; align-items:center;}
.ugC_Program_Detail .comments-container { overflow:hidden; border-top:1px solid #ccc; border-bottom:1px solid #ccc; padding:20px 0; margin-bottom:20px;}
.ugC_Program_Detail .comments-container > h2 { font-size:1.2em; padding:0; margin:0; margin-bottom:10px;}
.ugC_Program_Detail .comments-container > .comments-notice { font-size:1em; text-align:center; display:block;}
.ugC_Program_Detail .comments-container > .comments-notice a { text-decoration:underline;}
.ugC_Program_Detail .comments-container .form-box .btn-wrap { margin:20px auto;}
.ugC_Program_Detail .comments-container .form-box + ul { padding:0; margin:0; list-style:none; text-decoration:none; width:100%; height:auto; overflow:hidden;}
.ugC_Program_Detail .comments-container .form-box + ul * { padding:0; margin:0; list-style:none; text-decoration:none;}
.ugC_Program_Detail .comments-container .form-box + ul li { width:calc( 100% - 2px ); padding:10px; background:rgba(255,255,255,0.8); margin:10px 1px;
box-shadow: 1px 1px 3px 0px rgba(0, 0, 0, 0.1);
/*圓角*/
border-radius:10px;}
.ugC_Program_Detail .comments-container .form-box + ul li > span.name { font-weight:bold; display:inline-block;}
.ugC_Program_Detail .comments-container .form-box + ul li > span.name + .datetime { font-size:0.7em; color:#555; display:inline-block; margin-left:10px;}
.ugC_Program_Detail .comments-container .form-box + ul li > span.descr { display:block; width:100%;}

@media only screen and (min-width:0px) and (max-width:1024px) {
	.ugC_Program_Detail-content { gap:10px; flex-wrap:wrap;}
	.ugC_Program_Detail-content > *,
	.ugC_Program_Detail-content .content-text{ width:calc( 50% - 5px );}
}
@media only screen and (min-width:0px) and (max-width:768px) {
	.ugC_Program_Detail-content > img { width:auto; margin:0 auto;}
	.ugC_Program_Detail-content > .content-text { width:100%;}
	.ugC_Program_Detail-content .content-text .time { font-size:0.9em; line-height:1.2;}
	.ugC_Program_Detail-content .content-text .host { font-size:0.9em; line-height:1.2;}
}
@media only screen and (min-width:0px) and (max-width:512px) {
	.ugC_Program_Detail-content .content-text .time { font-size:0.8em;}
	.ugC_Program_Detail-content .content-text .host { font-size:0.8em;}
}