body{
    margin:0;
}
.container{
    margin:0;
}


.area1{
    height:500px;
}
.PC_img{
    position: relative;
    z-index: -1;
    width:100%;
    height:100%;
}
.P_img{
    display: none;
    position: relative;
    z-index: -1;
    width:100%;
    height:100%;
}
.area1 > h1{
    position:absolute;
    margin-top:-10%;
    margin-left:15%;
    z-index: 0;
    font-size: 70px;
    color:white;
}
.area1 > h2{
    position:absolute;
    margin-top:-8.5%;
    margin-left:35%;
    z-index: 0;
    font-size: 33px;
    color:white;
}
.area2{
    padding:2% 10% 2% 10% ;
}

.area2 > h2{
    font-size:40px;
}
.text{
    padding-left:2%;
    padding-right:2%;
    font-size:30px;
    margin-top:2.5%;
    margin-bottom:2.5%;
}
.area2 img{
    width:25%;
}
.area2 table{
    text-align: center;
    margin:auto;
    width:80%;
}
.area2 table td{
    width:25%;
    font-size: 25px;
}
table .text{
    padding-top:2%;
}
.P_table{
    display: none;
}
.CM_table{
    display: block;
}



@media (max-width:1600px){ /*MD_Computer*/
    .area1 > h1{
        font-size: 55px;
    }
    .area2 > h2{
        font-size:36px;
    }
    .text{
        padding-left:2%;
        padding-right:2%;
        font-size:26px;
    }
    .area2 table td{
        width:25%;
        font-size: 20px;
    }
}

@media (max-width:1280px){ /*MD_Computer*/
    .area1{
        height:450px;
    }
    .area1 img{
        position: relative;
        z-index: -1;
        width:100%;
        height:100%;
    }
    .area1 > h1{
        font-size: 45px;
    }
    .area1 > h2{
        font-size: 25px;
        color:white;
    }
    
    .area2 > h2{
        font-size:30px;
    }
    .text{
        font-size:20px;
    }
}
@media (max-width:768px){ /*Phone*/
    .area1{
        height:450px;
    }
    .PC_img{
        display: none;
    }
    .P_img{
        display: block;
    }
    .area1 > h1{
        font-size: 40px;
        margin-top: -16%;
        margin-left: 5%;
    }
    
    .area1 > h2{
        font-size: 27px;
        margin-left: 33%;
        color: white;
        margin-top: -14.5%;
    }

    .area2{
        padding:2% 5% 5% 5% ;
    }
    .area2 table {
        text-align: center;
        margin: auto;
        width: 100%;
    }
    .area2 > h2{
        font-size:30px;
    }
    .text{
        font-size:20px;
    }
}
@media (max-width:560px){ /*Phone*/
    .area1{
        height:450px;
    }
    .PC_img{
        display: none;
    }
    .P_img{
        display: block;
    }
    .area1 > h1{
        font-size: 38px;
        margin-top:-80%;
        margin-left:5%;
    }
    .area1 > h2{
        font-size: 25px;
        margin-top:-65%;
        margin-left:17%;
        color:white;
    }

    .area2{
        padding:2% 5% 5% 5% ;
    }
    .area2 > h2 {
        font-size: 24px;
    }
    .text{
        font-size:16px;
        line-height: 30px;
        padding-left:7%;
        padding-right:7%;
    }
    .area2 img{
        width:16%;
    }
    .area2 table{
        width:100%;
        margin-top:5%;
    }
    .area2 table td{
        width:50%;
        font-size: 16px;
        padding-top: 5px;
        padding-bottom: 5px;
    }
    .P_table{
        display: block;
    }
    .CM_table{
        display: none;
    }
}