@charset "utf-8";

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    color: #052d12;
}
ul {
    list-style: none;
}
a {
    text-decoration: none;
}
input {
    display: none;
}
    body {
        position: relative;
    }
        div.wrap {
            width: 1000px; height:650px;
        }
            header {
                float:left;
                width:200px; height:650px;
            }
                div.logo {
                    width:200px; height:100px;
                    padding: 30px 0px;
                }
                    div.logo > img {
                        display: inline-block;
                        width: 200px; height: 40px;
                    }
                nav {
                    width:200px;
                    height:550px;
                    padding: 10px 10px;
                }
                    ul.mainmenu {
                        width:180px;
                        background: #c27878;
                    }
                        ul.mainmenu > li {
                            width:180px;
                        }
                            ul.mainmenu > li > a {
                                display: block;
                                width: 100%;
                                height:60px;
                                background: #ffdfdf;
                                color: #80b7ff;
                                font-size: 25px;
                                line-height: 60px;
                                text-align: center;
                            }
                            ul.mainmemnu > li > a {

                            }
                            ul.submenu {
                                
                            }
                                ul.submenu > li {

                                }
                                    ul.submenu > li > a {
                                        display: block;
                                        overflow: hidden;
                                        width:100%;
                                        height:0px;
                                        background: #a1caff;
                                        color: #4b34ff;
                                        font-size: 18px;
                                        line-height: 50px;
                                        text-align: center;
                                        transition: all 0.3s;
                                    }
                                    ul.mainmenu > li:hover ul.submenu > li > a {
                                        height:50px;
                                    }
                                    ul.submenu > li > a:hover {
                                        background: #f1f7ff;
                                    }
            div.aside {
                float:left;
                width:800px; height:650px;
            }
                div.slide {
                    position:relative;
                    width:800px; height:350px;
                }
                    div.slide > img {
                        position: absolute;
                        width:800px; height:350px;
                    }
                    div.slide > img:nth-child(1) {
                        animation: slide1 9s infinite;
                    }
                    div.slide > img:nth-child(2) {
                        animation: slide2 9s infinite;
                    }
                    div.slide > img:nth-child(3) {
                        animation: slide3 9s infinite;
                    }
                    div.slide > p {
                        position:absolute ;
                        color:#efefef;
                        font-size: 40px;
                        font-weight: bold;
                    }
                    div.slide > p:nth-child(4) {
                        left: 130px; top: 130px;
                        animation: slide1 9s infinite;
                    }
                    div.slide > p:nth-child(5) {
                        left: 130px; top: 130px;
                        animation: slide2 9s infinite;
                    }
                    div.slide > p:nth-child(6) {
                        left: 130px; top: 130px;
                        animation: slide3 9s infinite;
                    }
                    div.slide > a {
                        position: absolute;
                        width:100%; height:100%;
                    }
                div.content {
                    width: 800px; height:200px;
                }
                    div.c1c2 {
                        float:left;
                        width:300px; height:200px;
                        padding: 10px 0px;
                    }
                        div.c1c2 > label {
                            display: inline-block;
                            width: 110px; height:30px;
                            margin: 0px 10px;
                            background: #6d9573;
                            color:#f1f7ff;
                            line-height: 30px;
                            font-size: 20px;
                            text-align: center;
                            cursor: pointer;
                            text-shadow: 1px 1px 2px black;
                            border-radius: 10px;
                        }
                        #notice:checked ~ label.nlabel {
                            background: #97f1a6;
                        }
                        #gallery:checked ~ label.glabel {
                            background: #97f1a6;
                        }
                        div.notice {
                            display: none;
                            width:300px; height:150px;
                            margin: 10px 0px;
                            padding: 10px 0px 0px 10px;
                            background: #80b7ff;
                            border-radius: 20px;
                            line-height: 280px;
                            text-align: left;
                        }
                            div.notice > a {

                            }
                            div.notice > a:hover {
                                color:#fff;
                                text-decoration: underline dotted #4b34ff;
                            }
                        #notice:checked ~ div.notice{
                            display: block;
                        }
                        div.gallery {
                            display: none;
                            width:300px; height:150px;
                            margin: 10px 0px;
                            background: #80b7ff;
                            border-radius: 20px;
                            line-height: 280px;
                            text-align: center;
                        }
                        #gallery:checked ~ div.gallery {
                            display: block;
                        }
                            div.notice > a {
                                display: block;
                                font-size: 12px;
                                line-height: 24px;
                            }
                            div.gallery > img {
                                width:90px; height:140px;
                                border-radius: 10px;
                            }
                    div.banner {
                        position: relative;
                        float:left;
                        width:300px; height:200px;
                        padding: 5px 0px 0px 10px;
                    }
                        div.banner > img {
                            width:280px; height:190px;
                            border-radius: 10px;
                        }
                        div.banner > a {
                            display: block;
                            position: absolute;
                            left:0px; top:0px;
                            width:100%; height:100%;
                            color:#ffdfdf;
                            font-size: 20px;
                            text-align: center;
                            line-height: 200px;
                            text-shadow:2px 2px 2px #052d12;
                        }
                    div.link {
                        float:left;
                        width:200px; height:200px;
                    }
                        div.link > a {
                            display: block;
                            width:180px; height:60px;
                            margin:5px 10px;
                            background: #4596ff;
                            color:#efefef;
                            font-size: 20px;
                            line-height: 60px;
                            text-align: center;
                            border-radius: 20px;
                        }
                        div.link > a:hover {
                            background: #19539e;
                        }
                footer {
                    width:800px; height:100px;
                }
                    div.logo2 {
                        float:left;
                        width:200px; height:100px;
                        padding: 30px 0px;
                    }
                        div.logo2 > a {
                            display: inline-block;
                            width:200px; height:40px;
                        }
                            div.logo2 > a > img {
                                filter: grayscale(1);
                                width:200px; height:40px;
                            }
                    div.footsub {
                        float:left;
                        width:600px; height:100px;
                    }
                        div.footmenu {
                            width:600px; height:50px;
                            padding:0px 30px;
                            font-size: 12px;
                            line-height: 50px;
                        }
                            div.footmenu > a {
                                /* color */
                            }
                            div.footmenu > a:hover {
                                color:#4596ff;
                                text-decoration: underline dotted #4b34ff;
                            }
                        div.copyright {
                            width:600px; height:50px;
                            padding:0px 30px;
                            font-size: 12px;
                            line-height: 50px;
                        }
        div#modal {
            display:none;
            position: absolute;
            left:300px;
            top: 100px;
            width:480px;
            height:300px;
            padding: 10px 10px;
            background: #6bc57a;
            border: 15px solid #0b441e;
            border-radius: 30px;
        }
            div#modal > h2 {
                color:#052d12;
                font-size: 22px;
                line-height: 30px;
                text-align: center;
            }   
            div#modal > p {
                color:#052d12;
                font-size: 15px;
                line-height: 30px;
                text-align: center;
            }  
            div#modal > a {
                display: inline-block;
                width:70px; height:50px;
                position: absolute;
                right:15px; bottom: 15px;
                background: #6bc57a;
                line-height: 30px;
                text-align: center;
                border:10px solid #0b441e;
                border-radius: 15px;
            }
        div#modal:target {
            display: block;
        }

@keyframes slide1 {
0%      {opacity:1;}
33.3%   {opacity:0;}
66.6%   {opacity:0;}
100%    {opacity:1;}
}
@keyframes slide2 {
0%      {opacity:0;}
33.3%   {opacity:1;}
66.6%   {opacity:0;}
100%    {opacity:0;}
}
@keyframes slide3 {
0%      {opacity:0;}
33.3%   {opacity:0;}
66.6%   {opacity:1;}
100%    {opacity:0;}
}