/* 海報 */

.poster{
    width: 100%;
    aspect-ratio: 18 / 9;
    background-color: #C4E1FF;
}
.poster > .content{
    width: 60%;
    position: relative;
    top:25%;
    left: 26%;
}
.poster > .content > h1{
    font-size: clamp(1.5rem, 3.5vw, 5rem);
    letter-spacing: 12px;
}
.poster > .content > h6{
    font-size: clamp(1rem, 1.5vw, 3rem);
    margin-top:2%;
    letter-spacing: 6px;
}

.poster .ribbons{
    position:absolute ; /* 或 absolute，如果是在某個父容器內 */
    top: 8%;
    right: 5%;
    width: 9vw;                /* 寬度根據畫面變化 */
    aspect-ratio: 3 / 5;        /* 高度自動依比例計算（這邊以4:5為例） */
    background-image: url('../img/concept/foot_label.png');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: top;
    z-index: 1;
}
.poster .net{
    position:absolute ; /* 或 absolute，如果是在某個父容器內 */
    top: -25%;
    left: -20%;
    width: 40vw;                /* 寬度根據畫面變化 */
    aspect-ratio: 3 / 5;        /* 高度自動依比例計算（這邊以4:5為例） */
    background-image: url('../img/concept/full_network.png');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: top;
    z-index: 1;
}
.poster .boll{
    position:absolute ; /* 或 absolute，如果是在某個父容器內 */
    top: 90%;
    right: 0;
    width: 13vw;                /* 寬度根據畫面變化 */
    aspect-ratio: 3 / 5;        /* 高度自動依比例計算（這邊以4:5為例） */
    background-image: url('../img/concept/doublenet_right.png');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: top;
    z-index: 1;
}
.poster .right_point{
    position:absolute ; /* 或 absolute，如果是在某個父容器內 */
    top: 103%;
    right: 15%;
    width: 20vw;                /* 寬度根據畫面變化 */
    aspect-ratio: 3 / 5;        /* 高度自動依比例計算（這邊以4:5為例） */
    background-image: url('../img/concept/point_box.png');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: top;
    z-index: 1;
}
.poster .left_point{
    position:absolute ; /* 或 absolute，如果是在某個父容器內 */
    top: 15%;
    right: 20%;
    width: 20vw;                /* 寬度根據畫面變化 */
    aspect-ratio: 3 / 5;        /* 高度自動依比例計算（這邊以4:5為例） */
    background-image: url('../img/concept/point_box.png');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: top;
    z-index: 1;
}

/* 理念區塊 */

.concept{
    position: relative;
    top:30%;
    width: 80%;
    aspect-ratio: 12 / 5;
    padding: 3% 0 3% 0;
    background-color:#0E6DA6;
    box-shadow: 0px 0px 5px #ADADAD;
    z-index: 3;
}

.concept .content_top{
    width: 100%;
    position: relative;
    top:5%;
    text-align: center;
    color: white;
}
.concept h1{
    font-size: clamp(1.2rem, 2.5vw, 4rem);
    letter-spacing: 6px;
}
.concept h3{
    font-size: clamp(1.4rem, 2vw, 4rem);
    letter-spacing: 6px;
}
.concept  h6{
    font-size: clamp(0.5rem, 1.2vw, 3rem);
    margin-top:2%;
    letter-spacing: 3px;
}


.concept .flexbox{
    display: flex;
}

.concept .flexbox > .textbox{
    width: 60%;
    font-size: clamp(0.8rem, 1.2vw, 3rem);
    padding : 3% 3% 3% 8%;
    letter-spacing: 3px;
    line-height: 50px;
    color: white;
}

.concept .flexbox > .imgbox{
    width: 40%;
}


.concept .flexbox > .imgbox > img{
    width:120%;
    height: auto;
}


/* 常見問答 */
.questions{
    width: 100%;
    padding: 18% 10% 0% 10%;
    background-color: white;
}

.questions .content_top{
    width: 100%;
    position: relative;
    top:5%;
    text-align: center;
}
.questions h1{
    font-size: clamp(1.4rem, 2.5vw, 4rem);
    letter-spacing: 6px;
}
.questions h6{
    font-size: clamp(0.8rem, 1.2vw, 3rem);
    margin-top:2%;
    letter-spacing: 3px;
}
.questions .que hr{
    margin: 0;
    padding: 0;
}
.questions .que .q span{
    font-size: clamp(1rem, 1.4vw, 3.2rem);
    display: block;
    padding: 3% 0 3% 0;
    transition: 0.3s;
    border-radius: 5px;
}
.questions .que .q span:hover{
    box-shadow: 0px 0px 5px #ADADAD;
    padding-left: 2%;
    font-weight: bold;
}






/* 免責申明 */

.statement{
    width: 100%;
    padding: 7% 10% 0% 10%;
    background-color: white;
}

.statement .content_top{
    width: 100%;
    position: relative;
    top:5%;
    text-align: center;
}
.statement h1{
    font-size: clamp(1rem, 2.5vw, 4rem);
    letter-spacing: 6px;
}
.statement h6{
    font-size: clamp(0.5rem, 1.2vw, 3rem);
    margin-top:2%;
    letter-spacing: 3px;
}

.statement > .content{
    font-size: clamp(0.8rem, 1.2vw, 3rem);
    padding: 2% 5% 2% 5%;
    letter-spacing: 3px;

}






@media (max-width:1600px){ 
    .concept .flexbox > .textbox{
        line-height: 40px;
    }
}
@media (max-width:1280px){  

}

@media (max-width:1024px){  
    .concept .flexbox > .textbox {
        line-height: 25px;
    } 
}

@media (max-width:768px){  
    .poster .ribbons {
        top: 6%;
        right: 5%;
        width: 12vw;
    }
    .poster .left_point {
        top: 13%;
        right: 20%;
        width: 28vw;
    }
    
    .concept .flexbox > .textbox {
        width: 100%;
        line-height: 25px;
    } 
    .concept .flexbox > .imgbox > img {
        margin-top: 10%;
        width: 180%;
    }
    .poster > .content {
        width: 60%;
        position: relative;
        top: 25%;
        left: 10%;
    }
    .questions .content_top {
        margin-top: 5%;
        margin-bottom: 5%;
    }
}

@media (max-width:560px){  
    .poster {
        aspect-ratio: 18 / 18;
    }
    .poster > .content {
        width: 80%;
        position: relative;
        top: 9%;
        left: 10%;
    }
    .poster .ribbons {
        top: 10%;
    }
    .poster .left_point {
        top: 16%;
    }
    .poster .right_point {
        top: 80%;
        right: 79%;
        width: 30vw;
    }
    .concept {
        top: 12%;
    }
    .concept .flexbox{
        flex-direction: column;
    }
    .concept .flexbox > .textbox {
        width: 100%;
        line-height: 20px;
        padding: 3% 10% 3% 8%;
    }
    .concept .flexbox > .imgbox > img {
        position: absolute;
        top: 85%;
        left: 63%;
        margin-top: 0%;
        width: 56%;
    }
    .poster .boll {
        top: 40%;
        width: 16vw;
    }
    .questions {
        padding: 25% 10% 0% 10%;
    }
    
}
@media (max-width:450px){  
    .poster > .content > h6 {
        line-height: 25px;
    }
    .poster {
        aspect-ratio: 18 / 22;
    }
    .poster .right_point {
        top: 69%;
        right: 68%;
        width: 30vw;
    }
    .concept .flexbox > .imgbox > img {
        top: 89%;
        left: 60%;
        width: 61%;
    }
    .questions {
        padding: 35% 10% 0% 10%;
    }

}
@media (max-width:420px){  
    .poster {
        aspect-ratio: 18 / 22;
    }
    .concept {
        width: 90%;
    }
    .poster .left_point {
        top: 13%;
    }
    .poster .right_point {
        top: 70%;
        right: 68%;
        width: 30vw;
    }
    .concept .flexbox > .imgbox > img {
        top: 90%;
        left: 50%;
        width: 55%;
    }
    .questions {
        padding: 35% 10% 0% 10%;
    }

}
@media (max-width:390px){  
    .poster {
        aspect-ratio: 18 / 25;
    }
    .poster .ribbons {
        top: 10%;
    }
    .poster .left_point {
        width: 32vw;
        top:14%;
    }
    .concept .flexbox > .imgbox > img {
        top: 92%;
        left: 53%;
        width: 49%;
    }
    .poster .right_point {
        top: 77%;
        right: 62%;
        width: 44vw;
    }
    .concept {
        top: 10%;
        width: 95%;
    }
    .questions {
        padding: 35% 10% 0% 10%;
    }
    
}
@media (max-width:380px){  
    .poster {
        aspect-ratio: 18 / 25;
    }
    .poster .ribbons {
        top: 12%;
    }
    .poster .left_point {
        width: 31vw;
    }
    .concept .flexbox > .imgbox > img {
        top: 92%;
        left: 53%;
        width: 49%;
    }
    .concept {
        top: 10%;
        width: 95%;
    }
    .poster .right_point {
        top: 95%;
        right: 66%;
        width: 37vw;
    }
    .questions {
        padding: 45% 10% 0% 10%;
    }
    
}