*{
    box-sizing: border-box;
}

.sticker{
    text-align: right;
    position: sticky;
    top: 150px;
    padding-left: 110%;
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
}

.img-sticker{
    height: 200px;
}

.font-sticker{
    background-image: url(https://106405112.github.io/articlepage/drawing/decor/%E9%BB%9E%E9%BB%9E%E5%9C%88.png);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    width:100px;
    color:  #A7123F;;
    opacity: 0;
}

.footer{
    background-color: #EDD0D0;
    margin-top:200px;
    display: flex;
    justify-content: space-around;
    color: #A7123F;
    line-height: 50px;
    padding: 70px;
    align-items: center;
}
h3+p{
    margin: 0;
}
.footer h3{
    font-weight:500;
    font-size: calc(1.3rem + .6vw);
    font-family: 'Noto Serif TC', serif;
}
.footer div{
    display: inline-block;
}

.icon{
    cursor:pointer;
}

.logo{
    cursor:pointer;
}
.handsome{
    height:390px;
    position: relative;
    left:30%;
    top:100px;
    display:inline-block
}

.handsome-font{
    width:300px;
    height:80px;
    border-radius: 50px;
    border-style:solid;
    border-width:3px;
    background-color: #A7123F;
    border-color:#EDD0D0;
    color: white;
    font-size: 20px;
    font-family: 'Noto Sans TC', sans-serif;
    text-align:center;
    line-height:80px;
    position: relative;
    left:45%;
    top:-50px;
}

.article-font {
    font-family: 'Noto Sans TC', sans-serif;
}

li{
    list-style: none;
}

.change-color{
    display: inline-block;
}

.choice{
    width: 100px;
    height: auto;
    opacity: 50%;
}

.colorlist{
    display: none;
    position: absolute;
    z-index: 50;
    padding: 0;
    right: 5%;
    margin:0;
}


.colorlist li{
    padding:25px 35px;
    background-color: white;
}

.colorlist li:first-child{
    padding:15px;
    background-color:transparent;
}

.change-color:hover .colorlist {
    display:block;
}

.choice:hover {
    opacity: 100%;
    transition-duration:0.3s;
}


/*覆蓋瀏覽器預設margin*/
body, p {
  margin:0px;
}

@media (min-width: 1439px) {
    /*HEADER*/
    .img-sticker:hover~.font-sticker{
        opacity: 1;
        transition-duration:0.3s;
      }
    .headericon{
        margin-left:100px;
        width:500px;
        height:100px;
        padding-top:200px;
        padding-bottom:50px;
        align-items: center;
        display:flex;
    }

    .logo{
        height:50px;
        align-items: center;
        padding-left:10px;
        display:inline-block;
    }

    .icon{
        width:100px;
        height:100px;
        display:inline-block;
    }

    .headertool{
        width:180px;
        height:50px;
        display:flex;
        justify-content: space-between;
        position:relative;
        bottom:10px;
        top:-60px;
        left:107%;
    }

    .tool{
        width:50px;
        height:50px;
    }

    .headerchange{
        width:180px;
        height:50px;
        display:flex;
        justify-content: space-between;
        position:relative;
        left:107%;
    }

    

    .change{
        width:50px;
        height:50px;
    }

    /*內文*/
    h1 {
    font-family: 'Noto Serif TC', serif;
    width:750px;
    height:68px;
    font-size: 48px;
    color: #AC5167;
    font-weight: 700;
    line-height: 68px;
    padding-top:100px;
    margin-left:100px;
    padding-bottom:170px;
}

.article-font {
    width:600px;
    font-size:18px;
    line-height: 40px;
    color:#282828;
    font-weight: 400;
    margin-left:100px;
    padding-bottom: 70px;
}

.caption{
    width:150px;
    font-size:16px;
    line-height: 30px;
    color: #AC5167;
    font-family: 'Noto Sans TC', sans-serif;
}

.div-background{
    width:1060px;
    border-bottom-right-radius: 50px;
    border-bottom-left-radius: 50px;
    background:rgba(255, 255, 255, 0.5);
    margin-left: 92px;
    margin-top: -400px;
    padding-bottom:30px;
}

.picture{
    width:750px;
    height:500px;
    margin-right:30px;
}

.div-caption{
    width:1000px;
    height:570px;
    display: flex;
    align-items: flex-end;
    margin-left:100px;
    padding-bottom:70px;
}
/*相關新聞*/
.div-of-relate{
    width:calc(1060/1440*100%);
    height:250px;
    display:flex;
    justify-content: space-around;
    margin-top:150px;
    margin-left:100px;
}

.div-relate{
    width:300px;
    height:260px;
    background-color:#EDD0D0;
    border-radius: 5%;
}

.div-picture-relate{
    width:250px;
    height:auto;
    margin:auto;
    margin-top:20px;
}

.picture-relate{
    width:100%;
    height:auto;
    cursor:pointer;
}

.related-font{
    padding-left:25px;
    color:#A7123F;
    font-size:16px;
    font-family: 'Noto Sans TC', sans-serif;
    font-weight: 400;
    margin:auto;
    padding-top:10px;
    padding-bottom:15px;
    cursor:pointer;
}

.footer-decor{
    height: 300px;
}
}

@media (min-width: 1023px) and (max-width: 1439px) {
    .img-sticker:hover~.font-sticker{
        opacity: 1;
        transition-duration:0.3s;
      }
    .headericon{
        margin-left:80px;
        width:500px;
        height:100px;
        padding-top:300px;
        align-items: center;
        display:flex;
    }

    .logo{
        height:50px;
        display:inline-block;
        align-items: center;
        padding-left:10px;
    }
    .icon{
        width:100px;
        height:100px;
        display:inline-block;
    }

    .tool{
        width:40px;
        height:40px;
    }

    .headertool{
        width:150px;
        height:40px;
        display:flex;
        justify-content: space-between;
        position:relative;
        top:-20px;
        bottom:10px;
        left:102%;
    }

    .headerchange{
        width:150px;
        height:40px;
        display:flex;
        justify-content: space-between;
        position:relative;
        left:102%;
    }

    .change{
        width:40px;
        height:40px;
    }

    h1 {
        font-family: 'Noto Serif TC', serif;
        width:500px;
        height:140px;
        font-size: 48px;
        color: #AC5167;
        font-weight: 700;
        line-height: 68px;
        padding-top:100px;
        margin-left:80px;
        padding-bottom:240px;
    }
    
    .article-font {
        width:450px;
        font-size:18px;
        line-height: 40px;
        color:#282828;
        font-weight: 400;
        margin-left:80px;
        padding-bottom: 70px;
    }
    
    .caption{
        width:140px;
        font-size:16px;
        line-height: 30px;
        color: #AC5167;
        font-family: 'Noto Sans TC', sans-serif;
    }
    
    .div-background{
        width:calc(1080/1440*100%);
        border-bottom-right-radius: 50px;
        border-bottom-left-radius: 50px;
        background:rgba(255, 255, 255, 0.5);
        margin-left: 60px;
        margin-top: -400px;
    }
    
    .picture{
        width:500px;
        height:auto;
        margin-right:30px;
    }
    
    .div-caption{
        width:750px;
        height:405px;
        display: flex;
        align-items: flex-end;
        margin-left:80px;
        padding-bottom:70px;
    }
    
    .div-of-relate{
        width:calc(1080/1440*100%);
        height:250px;
        display:flex;
        justify-content: space-around;
        margin-top:150px;
        margin-left:60px;
    }
    
    .div-relate{
        width:230px;
        height:230px;
        background-color:#EDD0D0;
        border-radius: 5%;
    }
    
    .div-picture-relate{
        width:200px;
        height:auto;
        padding-top:20px;
        margin:auto;
    }

    .picture-relate{
        width:100%;
        height:auto;
        cursor: pointer;;
    }
    
    .related-font{
        color:#A7123F;
        font-size:16px;
        line-height:20px;
        font-family: 'Noto Sans TC', sans-serif;
        font-weight: 400;
        padding-top:10px;
        width:200px;
        margin:auto;
        cursor:pointer;
    }
    .footer-decor{
        height: 300px;
    }
    }

    @media (min-width: 767px) and (max-width: 1023px) {
        .img-sticker:active~.font-sticker{
            opacity: 1;
            transition-duration:0.3s;
          }

        .headericon{
        margin-right: auto;
        margin-left: auto;
        width:500px;
        height:100px;
        padding-top:300px;
        padding-bottom:50px;
        align-items: center;
        display:flex;
    }    

    .logo{
        height:50px;
        align-items: center;
        padding-left:10px;
        display:inline-block;
    }

    .icon{
        width:70px;
        height:70px;
        display:inline-block;
    }
    
    .headertool{
        width:150px;
        height:50px;
        display:flex;
        justify-content: space-between;
        position:relative;
        top:-70px;
        bottom:10px;
        left:73%;
    }

    .tool{
        width:40px;
        height:40px;
    }

    .headerchange{
        width:150px;
        height:40px;
        display:flex;
        justify-content: space-between;
        position:relative;
        top:12%;
        left:73%;
    }

    .change{
        width:40px;
        height:40px;
    }
        h1 {
            font-family: 'Noto Serif TC', serif;
            width:calc(600/768*100%);
            font-size: 40px;
            color: #AC5167;
            font-weight: 700;
            line-height: 60px;
            padding-top:100px;
            margin-right: auto;
            margin-left: auto;
            padding-bottom:70px;
        }
        
        .article-font {
            width:calc(600/768*100%);
            font-size:16px;
            line-height: 38px;
            color:#282828;
            font-weight: 400;
            margin-right: auto;
            margin-left: auto;
            padding-bottom: 70px;
        }
        
        .caption{
            width:100%;
            font-size:14px;
            line-height: 28px;
            color: #AC5167;
            font-family: 'Noto Sans TC', sans-serif;
            padding-top:10px;
        }
        
        .div-background{
            border-bottom-right-radius: 50px;
            border-bottom-left-radius: 50px;
            background:rgba(255, 255, 255, 0.5);
            margin-right: 15%;
            margin-left: 8%;
            margin-top: -400px;
        }
        
        .picture{
            width:100%;
            height:auto;
        }
        
        .div-caption{
            width:calc(545/675*100%);
            padding-bottom:60px;
            margin-right: auto;
            margin-left: auto;
        }
        
        .div-of-relate{
            width:calc(675/768*100%);
            height:250px;
            display:flex;
            justify-content: space-around;
            margin-top:150px;
            margin-left:40px;
        }
        
        .div-relate{
            width:205px;
            height:200px;
            background-color:#EDD0D0;
            border-radius: 5%;
        }
        
        .div-picture-relate{
            width:175px;
            height:auto;
            margin:auto;
            margin-top:15px;
        }

        .picture-relate{
            width:100%;
            height:auto;
            cursor:pointer;
        }
        
        .related-font{
            padding-left:15px;
            color:#A7123F;
            font-size:16px;
            font-family: 'Noto Sans TC', sans-serif;
            font-weight: 400;
            margin:auto;
            padding-top:5px;
            padding-bottom:5px;
            cursor:pointer;
        }
        .footer-decor{
            height: 300px;
        }
        .footer{
            width:110%;
        }
        .img-sticker{
            height: 140px;
        }
    
        .sticker-font{
            padding: 40px 0;
            font-size:0.8rem;
        }
        }

        @media (min-width: 320px) and (max-width: 767px) {
 
            .img-sticker:active~.font-sticker{
                opacity: 1;
                transition-duration:0.3s;
              }
              .img-sticker{
                display: none;
            }
            .headericon{
                margin-right: auto;
                margin-left: auto;
                width:calc(260/320*100%);
                height:100px;
                padding-top:300px;
                padding-bottom:50px;
                align-items: center;
                display:flex;
            }            
            
            .change{
                width:40px;
                height:40px;
            }

            .tool{
                width:25px;
                height:40px;
            }


            h1 {
                font-family: 'Noto Serif TC', serif;
                width:calc(260/320*100%);
                font-size: 32px;
                color: #AC5167;
                font-weight: 700;
                line-height: 45px;
                padding-top:100px;
                margin-right: auto;
                margin-left: auto;
                padding-bottom:80px;
            }
            
            .article-font {
                width:calc(260/320*100%);
                font-size:16px;
                line-height: 40px;
                color:#282828;
                font-weight: 400;
                margin-right: auto;
                margin-left: auto;
                padding-bottom: 70px;
            }
            
            .caption{
                width:calc(285/320*100%);
                font-size:16px;
                line-height: 30px;
                color: #AC5167;
                font-family: 'Noto Sans TC', sans-serif;
                padding-top:15px;
                padding-left:10%;

            }
            
            .div-background{
                border-bottom-right-radius: 50px;
                border-bottom-left-radius: 50px;
                background:rgba(255, 255, 255, 0.5);
                margin-top: -400px;
                margin-left:60px;
                margin-right:8%;
            }
            
            .picture{
                width:100%;
                height:auto;
            }
            
            .div-caption{
                width:100%;
                padding-bottom:70px;
                margin-right: auto;
                margin-left: auto;

            }
            
            .div-of-relate{
                width:calc(275/320*100%);
                display:flex;
                flex-direction: column;
                margin-top:100px;
                margin-left:60px;
            }
            
            .div-relate{
                width:calc(275/320*100%);
                background-color:#EDD0D0;
                border-radius: 5%;
                padding-bottom:20px;
                margin-bottom:50px;
            }
            
            .picture-relate{
                width:80%;
                height:auto;
                margin-left:10%;
                margin-top:10%;
                cursor:pointer;
            }
            .footer{
                font-size: 14px;
        line-height: 35px;
        padding: 70px 30px;
            }
            
            .footer h3{
                font-size: 22px;
        font-family: 'Noto Serif TC', serif;
            }
            .footer-decor{
                height:180px;
            }
            
            }        

            @media (min-width: 320px) and (max-width:470px){
                .headertool{
                    width:90px;
                    height:30px;
                    display:flex;
                    justify-content: space-between;
                    position:relative;
                    top:-70px;
                    bottom:10px;
                    left:57%;
                }

                .headerchange{
                    width:90px;
                    height:30px;
                    display:flex;
                    justify-content: space-between;
                    position:relative;
                    left:57%;
                }
                .logo{
                    height:25px;
                    align-items: center;
                    display:inline-block;
                    opacity: 0;
                }
            
                .icon{
                    width:50px;
                    height:50px;
                    display:inline-block;
                }

                .related-font{
                    width:80%;
                    padding-left:15px;
                    color:#A7123F;
                    font-size:13px;
                    font-family: 'Noto Sans TC', sans-serif;
                    font-weight: 400;
                    margin-left:10%;
                    margin-top:10px;
                }       
                .footer h3{
                    font-size: 22px;
                    font-family: 'Noto Serif TC', serif;
                }
            
                .footer{
                    font-size: 14px;
                    text-align: center;
                    line-height: 35px;
                    padding: 70px 30px;
                    flex-direction: column;
                    align-items: center;
                }
            
                .footer-decor{
                    margin-bottom: 30px;}
                    
                .handsome{
                    left:3%;
                    height:300px;
                }
                .handsome-font{
                    left:25%;
                    width:200px;
                    height:60px;
                    line-height:60px;
                    font-size: 15px;
                } 
                
                .img-sticker{
                    height: 100px;
                }
                .sticker{
                    text-align: right;
                    position: sticky;
                    top: 250px;
                    padding-left: 103%;
                    display: flex;
                    flex-direction: row-reverse;
                    align-items: center;
                }
            }

            @media (min-width: 470px) and (max-width:767px){
                .headertool{
                    width:90px;
                    height:30px;
                    display:flex;
                    justify-content: space-between;
                    position:relative;
                    top:-65px;
                    bottom:10px;
                    left:71%;
                }

                .headerchange{
                    width:90px;
                    height:30px;
                    display:flex;
                    justify-content: space-between;
                    position:relative;
                    left:71%;
                    cursor:pointer;
                }
                .logo{
                    height:40px;
                    align-items: center;
                    padding-left:5px;
                    display:inline-block;
                }
            
                .icon{
                    width:60px;
                    height:60px;
                    display:inline-block;
                }

                .related-font{
                    width:80%;
                    padding-left:15px;
                    color:#A7123F;
                    font-size:18px;
                    font-family: 'Noto Sans TC', sans-serif;
                    font-weight: 400;
                    margin-left:10%;
                    margin-top:10px;
                    cursor:pointer;
                }

                .footer{
                    line-height: 40px;
                    padding:40px;
                    width:110%;
                }

                .handsome{
                    left:15%;
                    height:320px;
                }
                .handsome-font{
                    left:38%;
                    width:200px;
                    height:60px;
                    line-height:60px;
                    font-size: 15px;
                }  

                .img-sticker{
                    height: 100px;
                }

                .sticker{
                    text-align: right;
                    position: sticky;
                    top: 250px;
                    padding-left: 107%;
                    display: flex;
                    flex-direction: row-reverse;
                    align-items: center;
                }
            }