/*박람회*/
#expotop {width: 100%; margin: 50px 0;}
.expotop {width: 1200px; margin: 0 auto; padding: 0 30px;}
.ex_title {position: relative; float: left; width: 50%;}
.ex_title>h1 {width: 0; height: 0;left: -150px; top:50px; position: absolute; z-index: -999}
.ex_title>h1>img {width: 250px;}
.ex_title>h2 {font-weight: 500; line-height: 50px; width: 90%; font-size: 40px; border-bottom: 2px solid #ddd; padding-bottom: 20px;}
.expo_slide {float: left; width: 50%;}
.expo_slide>li {width: 100%; height: 300px; overflow: hidden;}
.expo_slide>li>img {width: 100%;}

    /*애니메이션*/
    .ex_title>h2 {animation: ex_02 1s both; opacity: 0}
    .expo_slide {animation: ex_03 1s .3s both; opacity: 0}
    @keyframes ex_02 {
        from {transform: translateX(-100px); opacity: 0}
        to {transform:  translateX(0); opacity: 1}
    }
    @keyframes ex_03 {
        from {transform: translateX(100px); opacity: 0}
        to {transform:  translateX(0); opacity: 1}
    }
/*박람회목록*/
#expo_list {width: 100%; margin: 100px 0}
.expo_list {width: 1200px; margin: 0 auto;}
.expo_list>li {float: left; width: 20%; padding: 30px;}
.expo_list>li>h1 {width: 100%; color: #888; border-left: 1px solid #888; padding-left: 20px;margin-top: 10px; font-weight: 300}
.expo_list>li>h1>p {display: inline-block; font-size: 20px; color: #000; font-weight: 500;}
.expo_list>li>h2 {width: 100%; top:100%;overflow: hidden;}
.expo_list>li>h2>img {z-index: -999;  width: 100%; height: auto; display: block; transition: .5s; cursor: pointer;}
.expo_list>li>h2:hover>img {transform: scale(1.1);}
.expo_list>li>button {width: 50%; margin: 20px 0; border-radius: 10px;}
    /*애니메이션*/
    .expo_list>li {animation: ex_04 3s}
    @keyframes ex_04 {
            from {opacity: 0}
            to {opacity: 1}
    }
/*박람회보기*/
#expoview {width: 100%; height: 100vh; position: fixed; top:0; z-index: 995; background-color: rgba(0,0,0,.7)}
.expoview {position: absolute; width: auto; top:50%; left: 50%; transform: translate(-50%,-50%);background-color: #fff;}
.expoview button {position: absolute;  right: 0; top:-30px; font-size: 20px; width: 20px; height: 20px; color: #fff;}
.ev_con {width: 100%; padding: 10px 10px 0;}
.ev_text {float: left; width: 50%; padding: 0 20px;}
.ev_text>h1 {font-size: 20px; font-weight: 500;}
.ev_text>h1>p {display: inline-block; margin-right: 20px; font-size: 50px; font-weight: 600; font-family: 'Noto Serif KR', serif; font-weight: 700;}
.ev_text>h2 {border-left: 1px solid #000; padding-left: 20px; color: #6d6e71;  font-weight: 300; margin: 10px 0;}
.ev_text>h3 {font-weight: 400; line-height: 28px; font-size: 16px;}
.ev_con h4 {float: right; width: 30%; text-align: right;}
.ev_con h4>img {width: 100%; height: auto;}
.ev_img {width: 100%; text-align: right; padding: 10px;background-color: #fff;}
.ev_img>img {height: 180px;}