* { margin: 0; padding: 0; text-decoration: none; list-style: none; }
#wrap { width: 100%; }

#head {
    width: 100%; height: 80px;
    display: flex; align-items: center; 
}
#head p {
    margin-left: 40px; font-size: 20px;
}

#con1 {
    width: 100%; height: 500px;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
}
#con1 .l52w {
    font-size: 100px; font-weight: bold; margin-right: 450px; margin-bottom: 30px;
}
#con1 .db {
    font-size: 100px; font-weight: bold; font-style: italic; margin-left: 100px; margin-bottom: 0px;
}
#con1 img {
    position: absolute; 
    width: 175px; top: 100px; right: 20%; 
}
#con1 p { padding-top: 100px; }

#loading {
    width: 100%; height: 500px; 
    /* background: #999; */
    display: flex; flex-direction: column; align-items: center; justify-content: center; grid-row-gap: 60px;
}
#loading > img { width: 50px; }

#con2 {
    width: 100%; height: 600px;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
}
#con2 .header {
    width: 100%; height: 20%; display: flex; align-items: center; justify-content: space-between;
}
#con2 .header h1 { margin-left: 100px; }
#con2 .header .line { width: 70%; height: 1px; background: #000; margin-right: 100px; }
#con2 .content {
    width: 100%; height: 80%; 
    display: flex; align-items: center; justify-content: space-between;
}
#con2 .content .pic { 
    width: 40%; display: flex; align-items: center; justify-content: center;
}
#con2 .content .cont { width: 60%; }
#con2 .content .cont ul { display: flex; flex-direction: column; grid-row-gap: 30px; }
#con2 .content .cont li { display: flex; }
#con2 .content .cont p { width: 10%; }
#con2 .content .cont span { width: 90%; }

#con3 { width: 100%; height: 200px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
#con3 .header { width: 100%; height: 20%; display: flex; align-items: center; justify-content: space-between; }
#con3 .header h1 { margin-left: 100px; } 
#con3 .header .line { width: 57%; height: 1px; background: #000; margin-right: 100px;}
#con3 .content { width: 100%; height: 80%; display: flex; align-items: center; justify-content: center; }
#con3 .content ul { margin-top: 1%; }

#con4 { width: 100%; height: 400px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
#con4 .header { width: 100%; height: 20%; display: flex; align-items: center; justify-content: space-between; }
#con4 .header h1 { margin-left: 100px; } 
#con4 .header .line { width: 71%; height: 1px; background: #000; margin-right: 100px;}
#con4 .content { width: 100%; height: 80%; display: flex; text-align: center; justify-content: center; }
#con4 .content img { width: 60%; height: 50%; margin-top: 3%; }

#footer {
    width: 100%; height: 50px; background: #eee;
    display: flex; align-items: center; justify-content: center;
}
#footer p { font-size: 10pt; color: #777; }