@import url(../../css/font.css);
@import url(../../css/init.css);
@import url(../../css/vars.css);
@import url(../../css/srgntopbar.css);
@import url(../../css/srgnmenu.css);
@import url(../../css/srgnfooter.css);
@import url(../../css/pageheader.css);

.headerarea{
    background-image: url(../../image/cbgrd.png);
}

.affiliateitems{
    width: 90%;
    margin: 0 auto;
    padding: 0 2rem;
    min-height: 300px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: stretch;
    gap: 2rem;
    row-gap: 4rem;
}

.affiliateitem{
    display: flex;
    flex-basis: calc(100% /3 - 2rem);
    flex-direction: column;
    justify-content: center;
    padding: 2rem;
    align-items: center;
    border: 1px solid rgb(136, 136, 136);
    min-width: 250px;
}

.affiliateitem .afftitle{
    font-family: 'Fahkwang-Medium', 'Courier New', Courier, monospace;
    font-size: 1.5rem;
    text-align: center;
    line-height: 1.7rem;
    color: rgb(55, 51, 51);
    letter-spacing: 0.05rem;
    padding-bottom: 2rem;
}

.affiliateitem .affimg img{
    width: 200px;
    margin-bottom: 2rem;
}

.affiliateitem .affidesc{
font-family: 'Fahkwang-Regular', 'Courier New', Courier, monospace;
    font-size: 1rem;
    text-align: justify;
    line-height: 1.2em;
    color: rgb(55, 51, 51);
    letter-spacing: 0.03rem;
    padding-bottom: 2rem;
}

.affiliateitem .icondata{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    row-gap: 1rem;
}

.affiliateitem .icondata div{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1.5rem;
}

@media screen and (max-width:400px) {
    .affiliateitem{
        flex-basis: 100%;
        width: 100%;
    }
}