@charset "utf-8";
@font-face{font-family:"LibreBaskerville";src:url(../font/LibreBaskerville-Regular.ttf);}
.main-container{width:100%;display:flex;}
.left-container{width:75%;border-right:3px solid #e6e9ed;}
.url-link{margin:0;padding:0;background-color:#e6e9ed;}
.url-link p{margin:0;padding:0.6rem 0 0.6rem 1.8rem;color:#4c4c4c;font-size:1rem;font-family:calibri;font-weight:bold;}
.url-link span{padding-left:1.8rem;}
.url-link a{position:relative;color:#4c4c4c;}
.url-link a:hover{color:#000;}
.url-link a:after{content:"";position:absolute;top:-3px;right:-0.9rem;width:1.6rem;height:1.6rem;border-right:1px solid #4c4c4c;border-bottom:1px solid #4c4c4c;transform:rotate(-45deg);}
.model-post{width:100%;padding:1.5rem 0 1.5rem 0;border-bottom:3px solid #e6e9ed;}
.model-post h1{width:90%;margin:0 auto;font-family:LibreBaskerville;font-size:1rem;font-weight:bold;color:#444;}
.horizontal-add{text-align:center;}
.image-container{width:90%;margin:0 auto;padding-top:1.2rem;display:flex;flex-flow:row wrap;justify-content:space-between;}
.image-box{width:23%;height:auto;position:relative;margin:5px;cursor:pointer;border:2px solid rgba(0,0,0,.5);}
.detail{position:absolute;width:100%;height:30%;bottom:0;background:linear-gradient(rgba(0,0,0,.3), rgba(0,0,0,.8));}
.detail p{margin:5px 1.2rem;color:#fff;font-family:calibri;font-size:1.1rem;}
.image-box img{width:100%;height:100%;background-color:#bebcbc;}
.pagination{display:flex;justify-content: center;margin:1rem 0 2rem 0;}
.page-link{padding:5px;}
.page-link a{position: relative;width:2.5rem;height:2.5rem;color:#fff;background-color:#adb0f3;display:flex;justify-content:center;align-items:center;font-family:calibri;font-weight:bold;border:1px solid #7d7d7d;}
.page-link a:hover{background-color:#e9545a;}
.page-link .highlight{width:2.5rem;height:2.5rem;background-color:#e9545a;}
.right-container{width: 25%;}
.ad-space{width:90%;margin:25px auto 0 auto;}
@media(min-width:1025px) and (max-width:1200px){*{box-sizing:border-box;}.main-container{top:46%;}}
@media (min-width:768px) and (max-width:1024px){*{box-sizing:border-box;}.main-container{flex-direction:column;}.left-container{width:100%;}.right-container{width:100%;}}
@media (min-width:641px) and (max-width:767px) and (orientation:landscape){
	.main-container{flex-direction:column;}
	.left-container{width:100%;}
	.image-container{width:100%;margin-left:0;justify-content:center;}
	.image-box{width:40%;height: auto;}
	.detail{width:100%;height:20%;}
	.image-box img{width:100%;height:100%;}
	.right-container{width:95%;}
}
@media (min-width:641px) and (max-width:767px) and (orientation:portrait){
	.main-container{flex-direction:column;}
	.left-container{width:100%;}
    .model-post h1{font-size:0.9rem;}
	.image-container{width:100%;margin-left:0;flex-direction:column;}
	.image-box{width:70%;height:auto;margin-left:auto;margin-right:auto;}
	.detail{width:100%;height:20%;}
	.image-box img{width:100%;height:100%;}
	.right-container{width:100%;}
	.button{width:96%;}
}
@media (min-width:361px) and (max-width:640px) {
    .main-container{flex-direction:column;}
	.left-container{width:100%;}
	.url-link p{font-size:0.8rem;}
    .url-link a:after{width:1.4rem;height:1.4rem;}
    .model-post h1{font-size:0.9rem;}
	.image-container{width:100%;margin-left:0;flex-direction:column;}
	.image-box{width:70%;height: auto;margin-left:auto;margin-right:auto;}
	.detail{width:100%;height:20%;}
	.image-box img{width:100%;height:100%;}
	.right-container{width:100%;}
	.button{width:96%;}
}
@media (max-width:360px) {
    .main-container{flex-direction:column;}
	.left-container{width:100%;}
	.url-link p{font-size:0.6rem;}
    .url-link a:after{width:1.2rem;height:1.2rem;}
    .model-post h1{font-size:0.7rem;}
	.image-container{width:100%;margin-left:0;flex-direction:column;}
	.image-box{width: 70%;height:auto;margin-left:auto;margin-right:auto;}
	.detail{width:100%;height:20%;}
	.image-box img{width:100%;height:100%;}
	.right-container{width:100%;}
	.button{width:96%;}
}