@import "navigation.css";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC&display=swap');
*{font-family:"Noto Sans TC"}

.internal-article>a{display:flex;gap:25px;border-radius:12px;border:1px solid #d3d3d3;padding:5% 3%;margin-top:2vw;align-items: center;margin-bottom:5vw}
.internal-article>a>*{flex:1 1 0;width:120px}
.internal-article>a>div{flex:3 1 auto;display:flex;gap:25px;align-items:center}
.internal-article>a>div>* {flex: 1 1 0;width: 88px;}
.internal-aritcle>a img{flex:2 1 auto}
.internal-article a p:not(:hover){color:#424753}
.internal-article>a>div>p{flex:2 1 auto}
@media screen and (max-width:768px){
	.internal-article>a>div>*{width:100%}
}
.article .recommend a{text-decoration:none}
.article .background label{width:72px;}
.recommend img {
	max-height: 200px;
}
/*only for inside articles*/
.item-page, .breadcrumb, .moduletable{padding:2% 8% 6vw;max-width:1280px;margin:auto !important}
.article{padding-bottom:6vw; margin:auto !important; max-width:1140px;/*max-width:1040px*/}
ul.breadcrumb {
padding: 0 8%;
margin: 0;
background: none;
}
.article div:not(.sidebar) {margin: 0 0 20px;align-self:flex-start}
.article h2{line-height:1.5 !Important}
.article hr{margin:0 0 32px !important}
.end-divider{text-align:center;font-weight:bold;font-size:25px}
/*breadcrumbs*/
.moduletable .breadcrumb span.divider:before {
	content: ">";
}
ul.breadcrumb {
padding-top: 3rem;
max-width:880px;
margin-left:0 !important;
padding-bottom:24px
}
.moduletable .breadcrumb a{color:#424753;font-size:18px}
.moduletable .breadcrumb a:hover, .breadcrumb > .active{color:#007bff}
.vcontainer {
	position: relative;
	width: 100%;
	height: 0;
	padding-bottom: 56.25%;
}
iframe.videoembed {
	position: absolute;
	height: 100%;
	width: 100%;
}

.article .background{
padding: 6% 4% 13.9%;
	margin-top:-4vw;
}
#p_submit{margin-top:40px;border: 2px solid #06ffff !important;padding: 10px 0;float:none !Important}
.background form>div {
	margin: 30px 0;
}
.background textarea, .background select{color:#fff !important}
.recommend>.col-lg-6>a>div {
	border-radius: 20px;
	padding: 3% 0;
	display: flex;
	align-items: center;
	box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.25);
	color:#000;
}
.recommend>.col-lg-6 {
	padding: 0 1.2%;
}
.recommend{margin:0 !important}
.recommend h4{position:relative;display:inline-block;margin-bottom:7px}
.recommend h4:after{position:absolute;content:"";width:100%;height:6px;background-color:#F4EE2F;bottom:-13px;left:0}
.tag>li{border-radius:25px !important;padding:3px 12px;border: 1px solid rgba(0, 0, 0, 0.65);font-size:15px;margin:5px;display:inline-block;cursor: pointer;}
.tag{margin-top:10px !important}
.article-list, .sidebar{padding-top:64px !important}
.single .sidebar {
    padding-top: 0 !important;
}
.single .tag_title{margin-bottom:0}
.single>.content>img {margin-bottom: 2.3vw;}
.single div, .single p{font-size:18px;line-height:2}
.single h1{font-size:42px;margin-bottom:20px/*3vw*/;font-weight: bold;}
.single h2{font-weight: bold;font-size:24px}
.single .tag>li>a {color: inherit;}
.sidebar>div{position:sticky;top:80px;position: -webkit-sticky;}
[lang="ja-JP"] .sidebar>div, [lang="en-US"] .sidebar>div {top: 110px;}
.sidebar input[type="text"]:focus{border-color:rgba(11,255,248,0.8);box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%), 0 0 8px rgb(11 255 248 / 60%);
}

@media screen and (max-width:576px){
	strong.bu, span strong, strong span, #g-header h2 {
		font-size: 24px;
		line-height: 21px !important;
		margin-top:12vw
	}
	.article h1, h1, h1 span, h1 strong{font-size:26px;line-height:35px !important;}
	.article hr{margin-bottom:20px !important}
	ul.breadcrumb{font-size:12px;padding-bottom:4px}
	.article .background{padding: 6% 4% 22%;}
	.single h1{font-size:26px}
#g-header .single h2, #g-header .single h3{font-size:20px;font-weight:bold;line-height:2 !important}
	.single div, .single p{font-size:16px}
    .moduletable .breadcrumb a{font-size:12px}
}
@media screen and (max-width:1280px){
	.article{padding:2% 8% 6vw}
}
@media screen and (max-width:991px){
	.article{flex-direction:column-reverse;overflow:hidden !Important}
	.search-box{width:100%}
	.sidebar{padding-top:0 !important;}
	.sidebar >div:nth-of-type(2){margin-top:14px !important}
	.article .article-list{padding-top:28px !important}
	.sidebar >div{display:flex;flex-direction: column;}
	.tag_title, .tag{display:inline-block !important}
.tag{overflow:scroll;white-space:nowrap}
.article div:not(.sidebar){margin:0}
	.article-list a:nth-of-type(1){margin-top:0 !important}
    .single .sidebar{display:none}
    .sidebar>div>div {display: flex;}


}
@media screen and (max-width:768px){
	.sidebar >div{display:block}
	.tag_title, .tag{margin-bottom:0 !important}
	.sidebar>div:nth-of-type(2) .tag_title{margin-top:0}
	.article{padding:0;}
	.article.single{flex-direction:column;padding:2% 8% 6vw}
.article div:not(.sidebar){flex-direction: column;}
}

	a.c-link {
	display: flex;
	width: 24px;
	height: 24px;
	}
	.clipboard{
		display: flex;
   	 	justify-content: flex-end;
   		padding: 0 2% 2%;
		margin-bottom: 30px !important;
    margin-top: -15px !important;
	}