@charset "utf-8";
/* head */
#header .head {padding: 80px 80px 0; width: 100%; height: 630px; background: no-repeat url(../img/topics/head.jpg) center/cover;}
#header .head .box {width: 100%; height: 100%; background-color: rgba(255, 237, 201, 0.4); position: relative;}
#header .head .content {position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);}
#header .head .content h1 {writing-mode: vertical-rl; color: #fff; font-size: 50px; text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.4), -2px -2px 5px rgba(0, 0, 0, 0.4);}
@media screen and (max-width:1200px) {
    #header .head {padding: 70px 0 0;}
    #header .head .content h1 {font-size: 40px;}
}
@media screen and (max-width:768px) {
    #header .head {padding: 50px 0 0;}
    #header .head .content h1 {font-size: 30px;}
}
/* topics */
#topics {background-color: transparent;}
#topics .wrap .category li.not-current a {opacity: .3;}
#topics .wrap .category li.not-current a:hover {opacity: .7;}
/* paginate */
#paginate .wrap ul {list-style: none; display: flex; align-items: center; justify-content: center; margin: 0 auto 100px;}
#paginate .wrap ul li {margin-right: 10px;}
#paginate .wrap ul li a {background-color: #FFCC66; color: #fff; width: 50px; height: 50px; font-size: 28px; font-weight: bold; border-radius: 99px; display: inline-block; color: #fff; text-align: center; text-decoration: none; opacity: .3; transition: .5s;}
#paginate .wrap ul li a:hover {opacity: .7;}
#paginate .wrap ul li .current {background-color: #FFCC66; color: #fff; width: 50px; height: 50px; font-size: 28px; font-weight: bold; border-radius: 99px; display: inline-block; color: #fff; text-align: center; text-decoration: none;}
#paginate .wrap ul li .dots {color: #FFCC66; font-size: 28px;}
@media screen and (max-width:768px) {
    #paginate .wrap ul li a {width: 40px; height: 40px; font-size: 22px;}
    #paginate .wrap ul li .current {width: 40px; height: 40px; font-size: 22px;}
    #paginate .wrap ul li .dots {font-size: 22px;}
}
/* single */
#post .wrap {padding: 80px 80px 0; max-width: 1000px; margin: 0 auto 100px;}
#post .wrap .head {margin: 100px auto 0;}
#post .wrap .head h2 {font-size: 28px;}
#post .wrap .head time {display: block; text-align: right;}
#post .wrap .thumbnail {width: 100%; max-width: 600px; margin: 50px auto 0;}
#post .wrap .thumbnail img {width: 100%;}
#post .wrap .content {margin: 100px auto 0;}
#post .wrap .content h1 {font-size: 28px; border-bottom: 1px solid #FFCC66; margin-bottom: 40px;}
#post .wrap .content h2 {font-size: 26px; border-bottom: 1px solid #FFCC66; margin-bottom: 40px;}
#post .wrap .content h3 {font-size: 24px; border-bottom: 1px solid #FFCC66; margin-bottom: 40px;}
#post .wrap .content h4 {font-size: 22px; margin-bottom: 40px;}
#post .wrap .content h5 {font-size: 20px; margin-bottom: 40px;}
#post .wrap .content h6 {font-size: 18px; margin-bottom: 40px;}
#post .wrap .content p {margin-bottom: 40px;}
#post .wrap .content ul,
#post .wrap .content ol {list-style-position: inside; margin-bottom: 40px;}
#post .wrap .content table {width: 100%; border-collapse: collapse; margin-bottom: 40px;}
#post .wrap .content table th,
#post .wrap .content table td {border: 1px solid #333; line-height: 3; padding: 0 1rem;}
#post .wrap .content .col-2 {display: flex; margin-bottom: 40px;}
#post .wrap .content .col-2 .col {width: 50%;}
#post .wrap .content .col-2 .col:nth-child(odd) {padding: 0 20px 0 0;}
#post .wrap .content .col-2 .col:nth-child(even) {padding: 0 0 0 20px;}
#post .wrap .content img {width: 100%; margin-bottom: 40px;}
@media screen and (max-width:1200px) {
    #post .wrap {padding: 70px 0 0;}
}
@media screen and (max-width:1020px) {
    #post .wrap {padding: 70px 10px 0;}
}
@media screen and (max-width:768px) {
    #post .wrap {padding: 50px 10px 0;}
    #post .wrap .head,
    #post .wrap .content {margin: 70px auto 0;} 
}
@media screen and (max-width:590px) {
    #post .wrap .content .col-2 {display: block;}
    #post .wrap .content .col-2 .col {width: 100%;}
    #post .wrap .content .col-2 .col:nth-child(odd) {padding: 0; margin-bottom: 40px;}
    #post .wrap .content .col-2 .col:nth-child(even) {padding: 0;}
}