/*Google fonts*/
/*黑體*/
@import url(https://fonts.googleapis.com/earlyaccess/notosanstc.css);
/*楷體*/
@import url(https://fonts.googleapis.com/earlyaccess/cwtexkai.css);
/*明體*/
@import url(https://fonts.googleapis.com/earlyaccess/cwtexming.css);

*{
    font-family: "微軟正黑體", "sans-serif";
    box-sizing: border-box;
/*    transition-duration: 0.5s;*/
}

body, html{
    width: 100%;
    margin: 0px;
    padding: 0px;
    background-color: black;
}

a{
    text-decoration: none;
    color: black;
}

a img{
    border: 0px;
}

.header{
    height: 35px;
    background-color: #424242;
}

.header-content{
    margin: auto;
    position: relative;
    top: 50%;
    transform: translateY(-40%);
}

.footer{
    text-align: center;
    padding-top: 10px;
    padding-bottom: 10px;
    background-color: #999;
    clear: left;
}

.footer h5{
    margin: 0px;
    letter-spacing: 4px;
    font-weight: 400;
}

img{
    border: 0px;
}

#back-to-top{
    position: fixed;
    bottom: 50px;
    right: 50px;
    z-index: 10;
}

map *:focus{
    outline: none;
}

.top .content{
    padding: 0px;
    position: relative;
}

.top .content img{
    width: 100%;
}

.intro .content, .book-img .content, .r01 .content, .event .content{
    background-color: #171719;
    padding: 50px 125px;
    position: relative;
}

.intro .content::before, .book-img .content::before, .event .content::before{
    content: "";
    display: block;
    width: 100%;
    height: 44px;
    background-image: url(images/9789570851090shadow_01.png);
    position: absolute;
    left: 0;
    top: -44px;
}

.intro .content::after, .event .content::after{
    content: "";
    display: block;
    width: 100%;
    height: 44px;
    background-image: url(images/9789570851090shadow_02.png);
    position: absolute;
    left: 0;
    bottom: -44px;
    z-index: 1;
}

.i3{
    color: white;
    text-align: justify;
}

.i2{
    margin-top: 10px;
    margin-bottom: 20px;
}

.i3 p{
    margin-top: 8px;
}

.i2 img{
    max-width: 100%;
}

.author .content{
    padding: 50px 125px;
    background-image: url(images/9789570851090a_04.jpg);
    background-position: center bottom;
}

.author h6{
    margin: 0 0 15px;
    background-color: #fff000;
    display: inline-block;
    padding: 3px 15px;
    border-radius: 1rem;
    margin-right: 10px;
}

.author h3{
    display: inline-block;
    margin: 0;
    color: white;
    margin-right: 10px;
}

.author h4{
    display: inline-block;
    margin: 0;
    color: #A5A5A5;
}

.author p{
    color: white;
}

.a-left, .a-right{
    display: inline-block;
    vertical-align: middle;
}

.a-left p{
    text-align: justify;
}

.a-right{
    text-align: center;
}

.author h6{
    font-size: 1rem;
}

.author h3{
    font-size: 1.6rem;
}

.author h4{
    font-size: 1rem;
}

.a-right span{
    padding: 5px 20px;
    margin-left: 12px;
    color: white;
    transition-duration: 0.3s;
    -moz-transition-duration: 0.3s; /* Firefox 4 */
    -webkit-transition-duration: 0.3s; /* Safari 和 Chrome */
    -o-transition-duration: 0.3s; /* Opera */
    font-weight: 500;
    border: solid 1px white;
}

.a-right span:hover{
    border: solid 1px #CF0A2C;
    color: #CF0A2C;
}

.a-right p{
    margin-top: 20px;
    text-align: center;
    color: white;
}

.book-img p{
    color: white;
}

.book-img .content{
    font-size: 0;
}

.bi{
    width: 40%;
    display: inline-block;
    height: 250px;
    vertical-align: middle;
    background-color: brown;
    position: relative;
    overflow: hidden;
}

.bi p{
    position: absolute;
    padding: 0 5%;
    bottom: 10px;
    margin: auto;
    display: inline-block;
}

.bi img{
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    min-width: 100%;
    min-height: 100%;
    transform: translate(-50%,-50%);
}

.bi1, .bi2{
    margin-bottom: 15px;
}

.bi1, .bi3{
    margin-left: 9%;
    margin-right: 2%;
}

.bi2, .bi4{
    margin-right: 9%;
}

.read .content{
    background-image: url(images/9789570851090a_09.jpg);
    padding: 80px 125px;
    background-position: center top;
    background-size: cover;
}

.title{
    background: -moz-linear-gradient(left, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 47%, rgba(0,0,0,0) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left, rgba(0,0,0,1) 0%,rgba(0,0,0,1) 47%,rgba(0,0,0,0) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right, rgba(0,0,0,1) 0%,rgba(0,0,0,1) 47%,rgba(0,0,0,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#00000000',GradientType=1 ); /* IE6-9 */
    padding: 5px 0 3px 15px;
}

.title h6, .r01 h6{
    display: inline-block;
    background-color: #fff000;
    margin: 0 10px 0 0;
    vertical-align: middle;
    padding: 0 5px;
}

.title h2, .r01 h2{
    display: inline-block;
    color: white;
    margin: 0;
    vertical-align: middle;
    margin: 0 5px 0 0;
}

.title h4{
    display: inline-block;
    color: #CF0A2C;
    margin: 0;
    vertical-align: middle;
    font-weight: inherit;
}

.r-text{
    color: white;
    text-align: justify;
}

.r-text a{
    color: #fff000;
}

.r-text a:hover{
    text-decoration: underline;
    color: #EFD497;
}

.r01 h6{
    margin-bottom: 10px;
}

.r01 h4{
    color: #fff000;
    margin: 10px 0 20px;
}

.r01 p{
    color: white;
}

.r01 p::selection {
	background: white;
	color: black;
}
.r01 p::-moz-selection {
	background: white;
	color: black;
}

.event{
    font-size: 0;
}

.event-title{
    text-align: center;
    margin-bottom: 40px;
    margin-top: 30px;
}

.e1 img{
    display: inline-block;
    width: 48%;
    margin-bottom: 30px;
}

.e1 img:first-of-type{
    margin-right: 4%;
}


/*-----Desktop-----*/

@media only screen and (min-width: 769px){
    
    html{
        font-size: 18px;
    }
    
    p{
        font-size: 1rem;
        line-height: 2rem;
        margin-top: 0px;
        margin-bottom: 0px;
    }
    
    .header-content{
        padding-left: 30px;
        max-width: 1200px;
    }
    
    .content{
        max-width: 1200px;
        margin: auto;
        position: relative;
    }
        
    .fb-top{
        left: 125px;
        bottom: 40px;
    }
    
    .fb-bottom{
        margin: 30px 0;
    }
    
    .t1{
        display: inherit;
    }
    
    .t2, .t3{
        display: none;
    }
    
    .i1{
        width: 100%;
    }
    
    .i1 img:first-child{
        max-width: 109px;
    }
    
    .i1 img:nth-child(2){
        max-width: 308px;
    }
    
    .i1 img:nth-child(3){
        max-width: 185px;
    }
    
    .i1 img:nth-child(4){
        max-width: 267px;
    }
    
    .author .content{
        font-size: 0;
    }
    
    .a-left{
        width: 50%;
        margin-right: 10%;
    }
    
    .a-right{
        width: 40%;
    }
    
    .a-right img{
        width: 100%;
        max-width: 300px;
    }
    
    .bi p{
        font-size: 0.8rem;
        line-height: 1.1rem;
    }
    
    .title h6, .r01 h6{
        font-size: 0.9rem;
    }
    
    .title h2{
        font-size: 1.5rem;
    }
    
    .title h4{
        font-size: 0.9rem;
    }
    
    .r-text{
        padding: 20px 0;
    }
    
    .r{
        margin-bottom: 30px;
    }
    
}

@media only screen and (max-width: 768px){
    
    html{
        font-size: 18px;
    }
    
    .header-content{
        padding-left: 30px;
    }
    
    p{
        font-size: 1rem;
        line-height: 2rem;
        margin-top: 0px;
        margin-bottom: 0px;
    }
    
    .fb-top{
        left: 30px;
        top: 20px;
    }
    
    .t1, .t3{
        display: none;
    }
    
    .t2{
        display: inherit;
    }
        
    .intro .content, .author .content, .book-img .content, .read .content, .r01 .content, .event .content{
        padding: 50px 80px;
    }
    
    .a-left{
        margin-bottom: 30px;
    }
    
    .a-right{
        width: 100%;
    }
    
    .a-right img{
        width: 70%;
        max-width: 300px;
    }
    
    .bi{
        width: 49%;
    }
    
    .bi1, .bi3{
        margin-left: 0;
        margin-right: 2%;
    }

    .bi2, .bi4{
        margin-right: 0;
    }
    
    .bi p{
        font-size: 0.8rem;
        line-height: 1.1rem;
    }
    
    .r-text{
        padding: 20px 0;
    }
    
    .r{
        margin-bottom: 30px;
    }
    
    .fb-bottom{
        margin: 30px 0;
    }
    
    .e1 img{
        display: block;
        width: 100%;
        max-width: 480px;
        margin-left: auto;
        margin-right: auto;
    }
    
    .e1 img:first-child{
        margin-right: auto;
    }
    
}

/*-----Phone-----*/

@media only screen and (max-width: 540px){
    
    html{
        font-size: 10px;
    }
    
    #back-to-top{
        right: 20px;
        bottom: 20px;
    }
    
    .header-content{
        padding-left: 10%;
        width: 100%;
    }
    
    .intro .content, .author .content, .book-img .content, .read .content, .r01 .content, .event .content{
        padding-left: 7.5%;
        padding-right: 7.5%;
    }
    
    .top .content{
        width: 100%;
        padding: 0;
    }
    
    p{
        font-size: 1.6rem;
        line-height: 2.5rem;
    }
    
    .t1, .t2{
        display: none;
    }
    
    .t3{
        display: inherit;
    }
    
    .i1 img:first-child{
        display: block;
        margin-bottom: 10px;
    }
    
    .author h4{
        font-size: 1.5rem;
    }
    
    .author h3{
        font-size: 2.8rem;
    }
    
    .bi{
        width: 100%;
        margin-bottom: 15px;
    }
    
    .bi1, .bi3{
        margin-left: 0;
        margin-right: 0;
    }

    .bi2, .bi4{
        margin-right: 0;
    }
    
    .bi p{
        font-size: 1.5rem;
        line-height: 1.8rem;
    }
    
    .title{
        padding-top: 10px;
        padding-bottom: 10px;
    }
    
            
    .title h6, .r01 h6{
        font-size: 1.5rem;
        font-weight: bold;
    }
    
    .r01 h2{
        font-size: 2.5rem;
    }
    
    .title h2{
        font-size: 2.2rem;
        display: block;
        margin-top: 10px;
    }
    
    .title h4, .r01 h4{
        font-size: 1.5rem;
    }
    
    .fb-bottom{
        margin: 30px 0;
    }
    
}