@charset "utf-8";
*{margin:0;padding:0;}
ul{list-style: none;}
a{text-decoration: inherit;color:inherit;}
img{max-width: 100%;}
html{background-color: #fff;color:#333;}

.container{
    height:650px;
    display: flex;
}
footer{
    height:100px;
    background-color: #000;
    color:#fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
header {
    width: 200px;
    background-color: #fa940e;
}
.logo{
    margin:20px 0;
}
.gnb{
    width:180px;
    margin:0 auto;
    color:#fff;
}
.gnb ul{
    height:0;
    overflow: hidden;
    transition: all 0.6s ease 0s;
    background-color: #fa1872;
}
.gnb>li:hover ul{
    height:130px;
}
.gnb>li>a{
    width:180px;
    height:50px;
    display: flex;
    align-items: center;
    border-bottom:1px solid #fff;
    font-weight: bold;
}
.gnb>li>ul>li>a{
    width:180px;
    height:30px;
    display: flex;
    align-items: center;
}
.gnb li:hover>a{
    background-color: #000;
    color:#fff;
}

.wrap{
    width:calc(100% - 200px);
}
.hero{
    height:400px;
}
.station{
    width:calc(100% - 230px);
    height:100%;
    overflow: hidden;
}
.train{
    width:300%;
    height:100%;
    display: flex;
    transition: all 0.6s ease 0s;
}
.train>li{
    flex:1;
}
.train img{
    width:100%;
    height:100%;
    object-fit: cover;
}
h2{
    font-size: 1.2rem;
}
.banner{
    width:230px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding:10px;
    box-sizing: border-box;
    background-color: #fa1872;
    color:#fff;
}
.banner>a{
    align-self: flex-end;
}



.contents{
    height:250px;
    display: flex;
}
.contents>section{
    flex:1;
    background-color: #fff;
    margin:10px;
    overflow: auto;
}
.contents h2{
    margin:20px 0;
}


.notice li{
    border-bottom:1px solid #333;
    margin-bottom:5px;
    display: flex;
    justify-content: space-between;
}
.gallery{
    display: flex;
}
.gallery>li{
    margin-right:10px;
    flex:1;
}
.gallery>li:last-of-type{
    margin-right:0;
}
.gallery img{
    height:120px;
    width:100%;
}

.hero{
    display: flex;
}
.station{
    width:calc(100% - 230px);
    background-color: #777;
}

.modal{
    position: fixed;
    left:0;
    top:0;
    width:100%;
    height:100%;
    background-color: #000;
    opacity: 0.8;
    z-index: 500;
    display: none;
}
.modal.on{
    display: block;
}
.popup{
    position: fixed;
    left:300px;
    top:300px;
    width:300px;
    padding:30px;
    border:3px solid #000;
    background-color: #fff;
    display: none;
    z-index: 501;
}
.popup.on{
    display: block;
}
.popup_ctl{
    margin-top:20px;
    display: flex;
    justify-content: flex-end;
}
.popup h2{margin-bottom:20px;}
.btn_close{
    border:2px solid #000;
    cursor: pointer;
    padding:10px 35px;
}