/* 個資首頁 */
#sectionGDPR{
    color: #fff;
    background-image:url(../img/GDPR-bg.jpg);
    background-size: cover;
}
.GDPR-bg{
    background-color: rgb(0 0 0/.4);
    padding: 50px 0;
}
.GDPR-span{
    font-size: 1.2rem;
    display: block;
    width: fit-content;
    margin: 7px auto;
    line-height: 1.6;
    padding: 7px 20px;
    background: rgb(255 255 255 / .4);
    border-radius: 30px;
}
.GDPR-subject{
    padding-top: 70px;
    padding-bottom: 20px;
}
.GDPR-title{
    font-weight: bold;
    font-size: 20px;
    text-align: center;
}
.GDPR-svg{
    fill: #fff;
    width: 90px;
    padding: 15px;
}
.GDPR-grid1{
    display: grid;
    align-items: center;
    grid-template-columns: 1fr 15px 1fr 15px 1fr;
    gap:50px 50px;
}
.GDPR-grid1 > div{
    background: rgb(0 0 0 / .3);
    padding: 2rem;
    border-radius: 20px;
    border: 2px dashed rgb(255 255 255 / .7);
    font-size: 1.2rem;
}

.GDPR-grid1 > div span{
    font-weight: bold;
    color: #FFC107;
    font-size: 1.4rem;
}
.GDPR-grid1 > span{
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
.GDPR-grid1 > span::after,.GDPR-grid1 > span::before{
    position: absolute;
    content: "";
    width: 35px;
    height: 5px;
    background-color: #fff;
    border-radius: 20px;
}
.GDPR-grid1 > span::after{
    transform: rotate(90deg);
}
.GDPR-grid1 > span::before{
}

.GDPR-grid2{
    display: grid;
    align-items: center;
    grid-template-columns: repeat(6, 1fr);
    gap:50px 50px;
    margin-top: 20px;
}

.GDPR-grid2>div{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.GDPR-grid2 p{
    background-color: rgb(0 0 0 / .5);
    padding: 10px 15px 7px;
    border-radius: 20px;
    border: 1px solid rgb(255 255 255 / .5);
}
.GDPR-note{
    text-align: center;
    margin: 20px 0;
}

.GDPR-grid3{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap:50px 50px;
}
.GDPR-grid3>div{
    border-radius: 30px;
    padding: 10px 20px;
}

.GDPR-grid3 > div:nth-child(1){
    background-color: #ff89b1;
}
.GDPR-grid3 > div:nth-child(2){
    background-color: #ffa307;
}
.GDPR-grid3 > div:nth-child(3){
    background-color: #009688;
}
.GDPR-grid3>div h3{
    font-size: 1.3rem;
    border-bottom: 1px solid rgb(255 255 255 / .5);
    padding-bottom: 10px;
}
.GDPR-grid3>div p{
    font-size: 1.1rem;
}
.GDPR-grid3>div span{
    color: #FFEB3B;
    font-weight: bold;
    text-decoration: underline;
}
.GDPR-sub-grid{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap:10px;
}
.GDPR-sub-grid>div{
    padding: 20px;
    border-radius: 50px;
    background-color: rgb(255 255 255 / .2);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 0.95rem;
}
.GDPR-grid3>div .grid3-note{
    padding: 10px;
    background: rgb(0 0 0 / .1);
    border-radius: 10px;
    font-size: 1rem;
}

.GDPR-wrap{
    padding: 1.5rem;
    background-color: rgb(255 255 255 / .1);
    margin-top: 2rem;
    border-radius: 20px;
    border: 1px solid rgb(255 255 255 / .5);
}
.GDPR-wrap > h3{
    text-align: center;
    font-size: 1.2rem;
    margin-bottom: 2rem;
}
.GDPR-grid4{
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap:20px;
}
.GDPR-grid4>div{
    padding: 20px;
    background-color: rgb(0 188 212/.8);
    border-radius: 10px;
}
.GDPR4-title{
    border-bottom: 1px solid rgb(255 255 255/.5);
    padding-bottom: 7px;
    margin-bottom: 7px;
    font-size: 1.2rem;
}
.GDPR-grid4>div ul{
    padding-inline-start: 15px;
    font-size: 0.95rem;
}
.GDPR-grid4>div ul li{
    margin-bottom: 10px;
}
.GDPR-ul{
    font-size: 1.1rem;
}

.GDPR-ul li{
    margin-bottom: 1rem;
}

/* 個資內頁 */
.GDPR-header{
    background: url(../img/GDPR-header.jpg) no-repeat;
    background-size: cover;
    padding: 100px;
}
.GDPR-intro{
    color: #fff;
}
.GDPR-intro h3{
    font-size: 3rem;
    color: #fff;
}
.GDPR-intro p{
    background-color: rgb(0 0 0 / .5);
    padding: 2rem;
    border-radius: 10px;
    font-size: 1.1rem;
    line-height: 1.6;
}
.GDPR-content{}
.GDPR-content section{
    margin:5rem 0;
}
.GDPR-content section h3{
    color: #004ea2;
    font-size: 2rem;
    margin-bottom: 25px;
    font-weight: bold;
}
.GDPR-content section h4{
    color: #007bff;
    font-size: 1.5rem;
    margin-bottom: 15px;
    font-weight: bold;
}
.GDPR-content section .GDPR-grid1 > div{
    background: #03A9F4;
    border: 2px dashed rgb(255 255 255 /1);
    color: #fff;
}

.GDPR-content section .GDPR-grid1 > div span{
    color: #FFEB3B;
}
.GDPR-content section .GDPR-grid1 > span::after,.GDPR-content section .GDPR-grid1 > span::before{
    background-color: #FFEB3B;
}

.GDPR-Range{
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 20px;
    margin: 3rem 0;
}
.GDPR-Range > div{
    padding: 0.7rem 1rem;
    background-color: #98c63f;
    border-radius: 20px;
}
.GDPR-Range h5{
    font-size: 1.1rem;
    color:#fff;
    text-align: center;
    margin-bottom: 15px;
}
.GDPR-Range > div .GDPR-Range-list{
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap:2rem;
}
.GDPR-Range > div:last-child .GDPR-Range-list{
    grid-template-columns: repeat(6,1fr);
}
.GDPR-Range-list > div{
    border: 2px solid rgb(255 255 255 / .5);
    padding: 20px;
    border-radius: 200px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    background-color: rgb(0 0 0 / .1);
}
.GDPR-Range-list > div svg{
    fill: #fff;
    width: 55px;
}
.GDPR-Range-list > div p{
    color: #fff;
    margin-bottom: 0;
    margin-top: 10px;
}

.GDPR-ci{
    display: grid;
    grid-template-columns: 3fr 1fr;
    gap: 3rem;
    align-items: center;
}

.GDPR-ci-text{}
.GDPR-ci-text > div{
    margin-bottom: 3rem;
}
.GDPR-regu-list{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 3rem;
    margin-top: 3rem;
}
.GDPR-regu-text p{
    font-size: 1.2rem;
    line-height: 1.6;
}
.GDPR-regu-text p span{
    color: #007bff;
}
.GDPR-regu-list > ul{
    background-color: #03A9F4;
    padding: 2rem 2rem 2rem 4rem;
    border-radius: 20px;
    color: #fff;
    margin-bottom: 0;
}
.GDPR-regu-list > ul li{
    margin-bottom: 10px;
}
.att-wrap{
    background-color: #ff699c;
    padding: 2rem;
    border-radius: 20px;
    color: #fff;
}
.att-wrap p{
    font-size: 2rem;
    font-weight: bold;
    border-bottom: 1px solid;
    padding-bottom: 1rem;
    margin-bottom: 1.5rem;
}
.att-wrap ul{}
.att-wrap ul li{
    margin-bottom: 10px;
    font-size: 1.2rem;
}

.GDPR-items{
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 1rem;
}
.GDPR-items >div{ 
    display: flex;
    align-items: center;
    padding: 3rem;
    background-color: #ccc;
    border-radius: 150px;
    text-align: center;
    justify-content: center;
    color:#fff;
    font-size: 1.1rem;
    font-weight: bold;
}
.GDPR-items >div:nth-child(1){
    background-color: #a3d98b;
}
.GDPR-items >div:nth-child(2){
    background-color: #85c892;
}
.GDPR-items >div:nth-child(3){
    background-color: #6ab69a;
}
.GDPR-items >div:nth-child(4){
    background-color: #53a0a3;
}
.GDPR-items >div:nth-child(5){
    background-color: #408aad;
}
.GDPR-items >div:nth-child(6){
    background-color: #346092;
}
.GDPR-items >div:nth-child(7){
    background-color: #2a4e78;
}

.GDPR-implement{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    font-size: 1.2rem;
}
.GDPR-implement > ul{}
.GDPR-implement > div{
    padding: 2rem;
    background-color: #fffbd5;
    border-radius: 20px;
}
.GDPR-implement > div p{
    font-size: 1.4rem;
    font-weight: bold;
    color: #2196F3;
}
.GDPR-implement > div > ul li{
    margin-bottom: 10px;
    color:#34657c;
}
.GDPR-implement > div > ul> li >ul{
    margin-top: 10px;
}

.GDPR-feat-txt{}
.GDPR-feat-txt p{}
.GDPR-feat{
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 3rem;
}
.GDPR-feat >div{
    padding: 2rem;
    background-color: #03A9F4;
    border-radius: 1rem;
    color: #fff;
}
.GDPR-feat >div h5{
    border-bottom: 2px solid;
    font-size: 1.2rem;
    font-weight: bold;
}
.GDPR-feat >div p{}

.GDPR-feat >div:nth-child(1){
    background-color: #630233;
}
.GDPR-feat >div:nth-child(2){
    background-color: #82053e;
}
.GDPR-feat >div:nth-child(3){
    background-color: #a30c4a;
}
.GDPR-feat >div:nth-child(4){
    background-color: #c31952;
}
.GDPR-feat >div:nth-child(5){
    background-color: #de2c62;
}
.GDPR-feat >div:nth-child(6){
    background-color: #ee376a;
}


.GDPR-typical{
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 2rem;
}
.GDPR-typical >div{
        padding: 1.5rem;
}
.GDPR-typical >div h5{
    font-size: 1.2rem;
    font-weight: bold;
    border-radius: 2rem;
    padding: 10px;
    color: #fff;
    text-align: center;
}
.GDPR-typical >div ul{}
.GDPR-typical >div ul li{}

.GDPR-typical >div:nth-child(1) h5{
    background-color: #003440;
}
.GDPR-typical >div:nth-child(2) h5{
    background-color: #005062;
}
.GDPR-typical >div:nth-child(3) h5{
    background-color: #005c62;
}
.GDPR-typical >div:nth-child(4) h5{
    background-color: #006b6c;
}
.GDPR-typical >div:nth-child(5) h5{
    background-color: #00857c;
}
.GDPR-typical >div:nth-child(6) h5{
    background-color: #009990;
}
@media (max-width: 1400px) { 
    .GDPR-grid1{}
    .GDPR-Range{
        grid-template-columns: 1fr;
    }
    .GDPR-Range > div .GDPR-Range-list{}
    .GDPR-Range > div:last-child .GDPR-Range-list{}
    .GDPR-ci{}
    .GDPR-regu-list{}
    .GDPR-items{
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: auto auto;
    }
    .GDPR-items>div:nth-child(5){
        grid-row: 2;
        grid-column:1;
    }
    .GDPR-items>div:nth-child(6){
        grid-row:2;
        grid-column:2;
    }
    .GDPR-items>div:nth-child(7){
        grid-row: 2;
        grid-column: span 2;
    }
    .GDPR-implement{}
    .GDPR-feat{
        grid-template-columns: repeat(3, 1fr);
    }
    .GDPR-typical{
        grid-template-columns: repeat(3, 1fr);
    }
    
}
@media (max-width: 992px) { 
    .GDPR-grid1{}
    .GDPR-Range{}
    .GDPR-Range > div .GDPR-Range-list{}
    .GDPR-Range > div:last-child .GDPR-Range-list{}
    .GDPR-ci{
        grid-template-columns: 1fr 1fr;
    }
    .GDPR-regu-list{
        grid-template-columns: 1fr;
    }
    .GDPR-items{}
    .GDPR-implement{}
    .GDPR-feat{}
    .GDPR-typical{}
}
@media (max-width: 576px) {
    .GDPR-grid1{
        grid-template-columns: 1fr;
    }
    .GDPR-Range{
        grid-template-columns: 100%;
    }
    .GDPR-Range > div .GDPR-Range-list{}
    .GDPR-Range > div:last-child .GDPR-Range-list{
        grid-template-columns: repeat(3, 1fr);
    }
    .GDPR-ci{
        grid-template-columns: 1fr;
    }
    .GDPR-regu-list{}
    .GDPR-items{
        grid-template-columns: repeat(2, 1fr);
    }
    .GDPR-items>div:nth-child(7) {
        grid-row: auto;
    }
    .GDPR-implement{
        grid-template-columns: 1fr;
    }
    .GDPR-feat{
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }
    .GDPR-typical{
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }
 }