/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v8.3.6,
* Autoprefixer: v10.3.1
* Browsers: last 4 version
*/

/* -----------@main------------- */
body{
    background-color: #000;
}
body.loading{
    cursor: progress;
}
.bodydeco{
    position: fixed;
    z-index: 0;
    font-size: 1.2rem;
    right: 1rem;
    top: 1rem;
    color: #fff;
    -webkit-transform: scaleY(.8);
        -ms-transform: scaleY(.8);
            transform: scaleY(.8);
    opacity: .5;
}
.page_box{
    background-image: url('../imgs/visual/bodytexture.jpg');
    background-size: 210px;
    -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d;
    opacity: 1;
    -webkit-transform-origin: 0 0;
        -ms-transform-origin: 0 0;
            transform-origin: 0 0;
    -webkit-transition: all 1s cubic-bezier(0.76, 0, 0.24, 1);
    -o-transition: all 1s cubic-bezier(0.76, 0, 0.24, 1);
    transition: all 1s cubic-bezier(0.76, 0, 0.24, 1);
}
.page_box.leave{
    opacity: 0;
    -webkit-transform: rotate(5deg);
        -ms-transform: rotate(5deg);
            transform: rotate(5deg);
}
.page_box.getTag{
    opacity: .2;
}
.es_wrap{
    width: 86%;
    margin: 0 auto;
}
div[data-scroll-container]{
    padding: 11rem 0 0;
}
.esbtn a{
    border: 1px solid #000;
    position: relative;
    padding: .5rem;
    display: inline-block;
    overflow: hidden;
    font-size: 1.1rem;
    -webkit-transition: -webkit-transform .3s;
    transition: -webkit-transform .3s;
    -o-transition: transform .3s;
    transition: transform .3s;
    transition: transform .3s, -webkit-transform .3s;
    font-weight: bolder;
}
.esbtn a div{
    padding: .5rem 1.5rem;
    border: 1px solid #000;
}
.esbtn a:before{
    content: '';
    width: 300%;
    height: 100%;
    z-index: -1;
    position: absolute;
    left: 0;top: 0;
    -webkit-transform: translateX(10%);
        -ms-transform: translateX(10%);
            transform: translateX(10%);
    -webkit-transition: -webkit-transform .3s;
    transition: -webkit-transform .3s;
    -o-transition: transform .3s;
    transition: transform .3s;
    transition: transform .3s, -webkit-transform .3s;
    background: rgb(255,255,255);
    background: -webkit-gradient(linear, left top, right top, from(rgba(255,255,255,0)), color-stop(32%, rgba(179,221,215,1)), color-stop(63%, rgba(255,255,255,0)), to(rgba(179,221,215,1)));
    background: -o-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(179,221,215,1) 32%, rgba(255,255,255,0) 63%, rgba(179,221,215,1) 100%);
    background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(179,221,215,1) 32%, rgba(255,255,255,0) 63%, rgba(179,221,215,1) 100%);
}
.esbtn a:hover:before{
    -webkit-transform: translateX(-65%);
        -ms-transform: translateX(-65%);
            transform: translateX(-65%);
}
.esbtn a:hover{
    -webkit-transform: scale(1.1);
        -ms-transform: scale(1.1);
            transform: scale(1.1);
}
a.current{
    cursor:not-allowed;
    pointer-events: none;
}
/* -----------@header------------- */
header{
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    z-index: 990;
    background-image: url('../imgs/visual/bodytexture.jpg');
    background-size: 210px;
    -webkit-transition: -webkit-transform .5s;
    transition: -webkit-transform .5s;
    -o-transition: transform .5s;
    transition: transform .5s;
    transition: transform .5s, -webkit-transform .5s;
}
.topbar{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    padding: 1rem 0;
    position: relative;
    margin: 0 0 7px;
}
.topbar:before,
.topbar:after{
    content: '';
    position: absolute;
    width: 100%;
    height: 3px;
    background-color: #000;
    left: 0;
    bottom: 0;
}
.topbar:before{
    height: 1px;
    bottom: -7px;
}
.social_midea {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}
.social_midea img{
    width: 1.5rem;
    height: 1.5rem;
}
.social_midea a{
    margin: 0 .5rem 0 0;
    transition: transform .3s;
}
.social_midea a:hover{
    transform: scale(1.1);
}
.head_letter{
    margin: 0 0 0 1rem;
}
.head_letter img{
    width: 35vw;
    height: auto;
}
.head_tag img{
    width: 17vw;
    height: auto;
}
#mainnav{
    padding: 1rem 0;
    position: relative;
    -webkit-transition: padding .3s;
    -o-transition: padding .3s;
    transition: padding .3s;
}
#mainnav > i{
    position: absolute;
    width: 100%;
    height: 1px;
    background-color: #000;
    bottom: 0;
    left: 0;
    -webkit-transform: scaleX(0);
        -ms-transform: scaleX(0);
            transform: scaleX(0);
    -webkit-transition: -webkit-transform .5s;
    transition: -webkit-transform .5s;
    -o-transition: transform .5s;
    transition: transform .5s;
    transition: transform .5s, -webkit-transform .5s;
}
#mainnav:before,
#mainnav:after{
    content: '';
    width: 1px;
    height: 100%;
    background-color: #000;
    left: 0;
    top: 0;
    position: absolute;
    -webkit-transform-origin: 0 0;
        -ms-transform-origin: 0 0;
            transform-origin: 0 0;
    -webkit-transform: scaleY(0);
        -ms-transform: scaleY(0);
            transform: scaleY(0);
    -webkit-transition: -webkit-transform .5s;
    transition: -webkit-transform .5s;
    -o-transition: transform .5s;
    transition: transform .5s;
    transition: transform .5s, -webkit-transform .5s;
}
#mainnav:after{
    left: initial;
    right: 0;
}
#mainnav > ul{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}
#mainnav > ul > li > a{
    border-right: 1px solid #000;
    display: block;
    text-align: center;
    padding: .5rem 0;
}
#mainnav > ul > li:last-child > a{
    border: 0;
}
#mainnav > ul > li{
    width: 17%;
    position: relative;
}
#mainnav > ul > li:before{
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;top: 0;
    z-index: -1;
    -webkit-transform: scaleY(0);
        -ms-transform: scaleY(0);
            transform: scaleY(0);
    -webkit-transform-origin: 0 100%;
        -ms-transform-origin: 0 100%;
            transform-origin: 0 100%;
    -webkit-transition: -webkit-transform .3s;
    transition: -webkit-transform .3s;
    -o-transition: transform .3s;
    transition: transform .3s;
    transition: transform .3s, -webkit-transform .3s;
    background: rgb(179,221,215);
    background: -webkit-gradient(linear, left bottom, left top, from(rgba(179,221,215,1)), to(rgba(255,255,255,0)));
    background: -o-linear-gradient(bottom, rgba(179,221,215,1) 0%, rgba(255,255,255,0) 100%);
    background: linear-gradient(0deg, rgba(179,221,215,1) 0%, rgba(255,255,255,0) 100%);
}
#mainnav > ul > li:hover:before{
    -webkit-transform: scaleY(1);
        -ms-transform: scaleY(1);
            transform: scaleY(1);
}
#mainnav a.current{
    opacity: .3;
}
.sub_nav{
    position: absolute;
    background-color: #fff;
    border: 1px solid #000;
    width: 20rem;
    pointer-events: none;
    opacity: 0;
    -webkit-transform: translateY(2rem);
        -ms-transform: translateY(2rem);
            transform: translateY(2rem);
    -webkit-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
    left: 50%;
    margin: 0 0 0 -10rem;
}
#mainnav > ul > li:first-child .sub_nav{
    left: 0;
    margin: 0;
}
#mainnav > ul > li:last-child .sub_nav{
    right: 0;
    left: initial;
    margin: 0;
}
#mainnav > ul > li:hover .sub_nav{
    pointer-events: initial;
    opacity: 1;
    -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
            transform: translateY(0);
}
.sub_nav a{
    position: relative;
    text-align: center;
    font-size: 1.1rem;
    line-height: 3;
    border-bottom: 1px solid #000;
}
.sub_nav a:before,
.sub_nav a:after{
    content: '▪︎';
    position: absolute;
    font-size: 20px;
    line-height: 2.5;
    left: 0;
    top: 0;
    color: #a4cfbe;
    opacity: 0;
    -webkit-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
}
.sub_nav a:after{
    left: initial;
    right: 0;
}
.sub_nav a:hover:before{
    left: 1rem;
    opacity: 1;
}
.sub_nav a:hover:after{
    right: 1rem;
    opacity: 1;
}
.sub_nav li:last-child a{
    border: 0;
}
header.scroll{
    -webkit-transform: translate3d(0,-4.5rem,0);
            transform: translate3d(0,-4.5rem,0);
}
header.scroll #mainnav{
    padding: 0;
}
header.scroll #mainnav i{
    -webkit-transform: scaleX(1);
        -ms-transform: scaleX(1);
            transform: scaleX(1);
}
header.scroll #mainnav:before,
header.scroll #mainnav:after{
    -webkit-transform: scaleY(1);
        -ms-transform: scaleY(1);
            transform: scaleY(1);
}
#navbottom{
    margin: 2rem 0 0;
    padding: 1rem;
    border-top: 1px solid #000;
    display: none;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
}
#navbottom img{
    width: 13rem;
}
#navbottom a{
    width: 3rem;
    margin: .5rem;
}
#navopen{
    width: 45px;
    height: 45px;
    border: 1px solid #000;
    border-radius: 100%;
    padding: 5px;
    float: right;
    position: relative;
    margin: 1rem 0 0;
    display: none;
}
#navopen > div{
    width: 100%;
    height: 100%;
    border: 1px solid #000;
    border-radius: 100%;
}
#navopen i{
    width: 20px;
    height: 1px;
    background-color: #000;
    position: absolute;
    left: 12px;
    top: 17px;
    -webkit-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
}
#navopen i:last-child{
    top: 25px;
}
#navopen.open i{
    -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
            transform: rotate(45deg);
    top: 21px;
}
#navopen.open i:last-child{
    -webkit-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
            transform: rotate(-45deg);
}
#moLogo{
    margin: 1.5rem 0 .8rem;
    width: 70vw;
    display: none;
}
/* -----------@home------------- */
.sec_main_visual{
    position: relative;
    margin: 0 0 5rem;
}
.hmv_text{
    border: 1px solid #000;
    position: relative;
    padding: 0 0 50vw;
}
.hmv_text h1{
    font-size: 0;
}
.hmv_text h1,
.hmv_text span{
    padding: 1.5rem;
    border-bottom: 1px solid #000;
}
.hmv_text h1 img{
    width: 60vw;
}
.hmv_text span img{
    width: 30vw;
}
.hmv_tag{
    position: absolute;
    top: 1.8vw;
    right: 1rem;
    width: 5.5vw;
}
.main_visual{
    position: absolute;
    width: 100%;
    height: 50vw;
    left: 0;
    bottom: 0;
}
/* @mainvisual */
.mv_bg{
    position: absolute;
    width: 100%;
    height: 80%;
    left: 0;
    bottom: -10%;
    z-index: 0;
    background: rgb(255,255,255);
    background: -webkit-gradient(linear, left bottom, left top, from(rgba(255,255,255,0)), color-stop(20%, rgba(179,221,215,1)), to(rgba(255,255,255,0)));
    background: -o-linear-gradient(bottom, rgba(255,255,255,0) 0%, rgba(179,221,215,1) 20%, rgba(255,255,255,0) 100%);
    background: linear-gradient(0deg, rgba(255,255,255,0) 0%, rgba(179,221,215,1) 20%, rgba(255,255,255,0) 100%);
}
.mv_obj{
    z-index: 1;
    position: absolute;
    bottom: 0;
    -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d;
    -webkit-transition: -webkit-transform 1s cubic-bezier(0, 0, 0.2, 1);
    transition: -webkit-transform 1s cubic-bezier(0, 0, 0.2, 1);
    -o-transition: transform 1s cubic-bezier(0, 0, 0.2, 1);
    transition: transform 1s cubic-bezier(0, 0, 0.2, 1);
    transition: transform 1s cubic-bezier(0, 0, 0.2, 1), -webkit-transform 1s cubic-bezier(0, 0, 0.2, 1);
    will-change: transform;
    pointer-events: none;
}
.mv_obj img{
    width: 100%;
    height: auto;
}
.mv_obj.audio{
    bottom: initial;
    top: 4vw;
    width: 15vw;
    left: 16vw;
}
.mv_obj.building{
    bottom: initial;
    top: 12vw;
    width: 12vw;
    left: 13vw;
}
.mv_obj.ball{
    bottom: initial;
    top: -3vw;
    width: 17vw;
    left: 30vw;
}
.mv_obj.girl{    
    bottom: 7vw;
    left: 3vw;
    width: 15vw;
}
.mv_obj.buffalo{    
    bottom: 11vw;
    left: 11vw;
    width: 29vw;
}
.mv_obj.people{    
    left: 35vw;
    width: 27vw;
}
.mv_obj.movie{
    left: 25vw;
    width: 27vw;
    bottom: 8vw;
}
.mv_obj.museum{    
    left: -4vw;
    width: 54vw;
    bottom: -4vw;
}
.mv_obj.sound{    
    width: 39vw;
    right: 22vw;
    bottom: 1vw;
    pointer-events: initial;
}
.mvobj_logo{
    position: absolute;
    width: 25vw;
    right: 2rem;
    bottom: 2rem;
}
.mvobj_logo img{
    width: 100%;
    height: auto;
}
.mv_obj.sound > div{
    -webkit-transform: rotate(56deg);
        -ms-transform: rotate(56deg);
            transform: rotate(56deg);
}
.mv_obj .bigimg{
    position: relative;
    z-index: 2;
}
.mv_navs{
    position: absolute;
    left: 0;
    top: -60%;
    width: 100%;
    height: 100%;
}
.mvnav{
    position: absolute;
    cursor: pointer;
    display: block;
}
.mvnav div{
    -webkit-transition: -webkit-transform .3s;
    transition: -webkit-transform .3s;
    -o-transition: transform .3s;
    transition: transform .3s;
    transition: transform .3s, -webkit-transform .3s;
}
.mvnav:hover{
    z-index: 1;
}
.mvnav:hover div{
    -webkit-transform: scale(1.1);
        -ms-transform: scale(1.1);
            transform: scale(1.1);
}
.sec_hm_content{
    position: relative;
    z-index: 1;
    font-size: 1.1rem;
}
.sec_hm_content > div{
    border-top: 3px solid #000;
}
.hmc_sec1{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    text-align: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    border: 1px solid #000;
    margin: .5rem 0;
}
.hmc_sec2{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    border: 1px solid #000;
    margin: 0 0 .5rem;
}
.hmc_sec2 div{
    width: 40%;
    background-image: url('../imgs/visual/dot_bg.svg');
    background-repeat: repeat-x;    
    background-size: contain;
}
.hmc_sec2 div:nth-child(2){
    padding: 1rem 2rem;
    width: 20%;
    background: none;
}
.hmc_sec1 span{
    font-size: 4vw;
}
.hmc_sec1 div{
    width: 15%;
}
div.hmcse1_logo{
    width: 70%;
    position: relative;
    border-left: 1px solid #000;
    border-right: 1px solid #000;
}
.hmcse1_logo:before,
.hmcse1_logo:after{
    content: '';
    position: absolute;
    width: 12%;
    height: 1px;
    background-color: #000;
    top: 50%;
    left: 10%;
}
.hmcse1_logo:after{
    left: initial;
    right: 10%;
}
.hmcse1_logo img{
    margin: 0 auto;
}
.hmc_sec3{
    border: 1px solid #000;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}
.hmc3_lrtext{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}
.hmc3_lrtext h2{
    font-weight: bolder;
    font-size: 4vw;
    line-height: 1.1;
}
.hmc3_lrtext span{
    display: block;
}
.hmc3_lrtext.astyle h2:after,
.hmc3_lrtext.astyle h2:before{
    content: '';
    display: block;
    width: 100%;
    height: 5px;
    background: #000;
}
.hmc3_lrtext.astyle h2{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    padding: 3rem;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    border-right: 1px solid #000;
}
.hmc3_lrtext.astyle span{
    margin: 10px -9px 10px 0;
}
.hmc3_lrtext div{
    padding: 3vw;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    border-right: 1px solid #000;
}
.hmc3_lrtext:last-child div{border: 0;}
.hmc3_lrtext.bstyle h2{
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    padding: 1rem;
    border: 1px solid #000;
    margin: 1rem 0 1rem -1rem;
    background-image: url('../imgs/visual/bodytexture.jpg');
}
.hmc3_lrtext.bstyle h2 span{
    margin: 0 -10px 0 0;
}
.hmc3_lrtext.bstyle h2:after,
.hmc3_lrtext.bstyle h2:before{
    content: '“';
    width: 2rem;
    position: absolute;
    display: block;
    left: 0;
    bottom: 0;
    font-size: 3vw;
}

.hmc3_lrtext.bstyle h2:after{
    content: '”';
    left: initial;
    right: 1vw;
    top: 2vw;
}
.hmc3_lrtext.bstyle h2 div{
    padding: 2.5rem 2rem;
    height: 100%;
    border: 1px solid #000;
}
.hmc_sec4{
    overflow: hidden;
    border: 1px solid #000;
    padding: 1rem 0;
    margin: -1px 0 0;
}
.horizon_text{
    white-space: nowrap;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
}
.horizon_text img{
    width: auto;
    max-width: none; 
    height: 8vw;
    margin: 0 0 -1rem -40vh;
}
.hmc_sec5{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding: 1rem;
    border: 1px solid #000;
    margin: -1px 0 0;
}
.hmc_sec5 > div{
    border: 1px solid #000;
}
.hmc_sec5 > div:last-child{
    border-left: 0;
}
.hmc5_horitext{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding: 3rem;
    background: rgb(179,221,215);
    background: -webkit-gradient(linear, left bottom, left top, from(rgba(179,221,215,1)), color-stop(60%, rgba(255,255,255,0)));
    background: -o-linear-gradient(bottom, rgba(179,221,215,1) 0%, rgba(255,255,255,0) 60%);
    background: linear-gradient(0deg, rgba(179,221,215,1) 0%, rgba(255,255,255,0) 60%);
}
.hmc5_horitext h2{
    font-weight: bolder;
    font-size: 4vw;
    text-align: center;
    line-height: 1.2;
    border-left: 1px solid #000;
}
.hmc5_horitext h2:last-child{
    border-right: 1px solid #000;
}
.hmc5_timer{
    width: 11vw;
    border-left: 1px solid #000;
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}
.hmc_sec5 > div{
    width: 50%;
}
.hmc5_content{
    padding: 3rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    text-decoration: underline;
}
.hmc_sec6{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin: -1px 0 0;
    border: 1px solid #000;
}
.hmc6_video iframe{
    width: 50vw;
    height: 26vw;
    max-width: 100%;
    margin: 0 auto;
}
.hmc6_video{
    padding: 1rem;
    width: 60%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}
.hmc6_content{
    padding: 5rem;
    width: 40%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    border-left: 1px solid #000;
}
.hmc6_content h2{
    font-size: 3vw;
    font-weight: bolder;
    text-align: center;
    margin: 0 0 1rem;
}
.hmc6_content h3{
    margin: 0 0 1rem;
    font-weight: bolder;
}
/* @homeevent */
.hmv_event{
    padding: 5rem 0;
}
.h_event_wrap{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    border-top: 3px solid #000;
}
.lsl_title,
.hm_event_title{
    text-align: center;
    padding: 2rem;
    border: 1px solid #000;
    position: relative;
    width: 10%;
}
.h_event_lists{
    width: 90%;
}
.hm_event_title:before,
.hm_event_title:after{
    content: '';
    width: 100%;
    height: 5rem;
    background-image: url('../imgs/visual/shape_door.svg');
    background-size: 100%;
    background-repeat: no-repeat;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
}
.hm_event_title:after{
    top: initial;
    bottom: 0;
    -webkit-transform: rotate(180deg);
        -ms-transform: rotate(180deg);
            transform: rotate(180deg);
}
.lsl_title h2,
.hm_event_title h2{
    -webkit-writing-mode: vertical-lr;
        -ms-writing-mode: tb-lr;
            writing-mode: vertical-lr;
    font-weight: bolder;
    margin: 0 auto;
    font-size: 1.6rem;
}
.dlf_title b,
.event_title.exhi b,
.lsl_title b,
.hm_event_title b{
    display: block;
    width: 30px;
    height: 30px;
    padding: 7px;
    border-radius: 100%;
    border: 1px solid #000;
    margin: 0 auto 1rem;
}
.dlf_title i,
.event_title.exhi i,
.lsl_title i,
.hm_event_title i{
    width: 100%;
    height: 100%;
    border-radius: 100%;
    border: 1px solid #000;
}
.h_event_lists li{
    overflow: hidden;
    border-bottom: 1px solid #000;
}
.h_event_lists a{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    padding: 1rem;
    position: relative;
    -webkit-transition: padding .3s;
    -o-transition: padding .3s;
    transition: padding .3s;
}
.h_event_lists a:hover{
    padding: 2rem 1rem;
}
.h_event_lists a:before{
    content: '';
    position: absolute;
    left: 0;bottom: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    -webkit-transform-origin: 0 100%;
        -ms-transform-origin: 0 100%;
            transform-origin: 0 100%;
    -webkit-transform: scaleY(0);
        -ms-transform: scaleY(0);
            transform: scaleY(0);
    -webkit-transition: -webkit-transform .3s;
    transition: -webkit-transform .3s;
    -o-transition: transform .3s;
    transition: transform .3s;
    transition: transform .3s, -webkit-transform .3s;
    background: rgb(179,221,215);
    background: -webkit-gradient(linear, left bottom, left top, from(rgba(179,221,215,1)), to(rgba(255,255,255,0)));
    background: -o-linear-gradient(bottom, rgba(179,221,215,1) 0%, rgba(255,255,255,0) 100%);
    background: linear-gradient(0deg, rgba(179,221,215,1) 0%, rgba(255,255,255,0) 100%);
}
.h_event_lists a:hover:before{
    -webkit-transform: scaleY(1);
        -ms-transform: scaleY(1);
            transform: scaleY(1);
}
.hevent_date{
    width: 8rem;
    font-weight: bolder;
}
.hevent_type{
    width: 10rem;
}
.hevent_type span{
    border: 1px solid #000;
    padding: .2rem 1.5rem;
    display: inline-block;
    margin: 2px;
}
.hevent_title h3{
    font-size: 1.2rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}
.hevent_title h3:before{
    content: '';
    width: 10px;
    height: 10px;
    border-radius: 100%;
    background-color: #000;
    display: inline-block;
    vertical-align: middle;
    margin: 0 .5rem 0 0;
}

/* -----------@singleevent------------- */
.event_title{
    position: relative;
    text-align: center;
    border-top: 3px solid #000;
    overflow: hidden;
}
.event_title h1{
    font-size: 2.5rem;
    font-weight: bolder;
    height: 8rem;
    border: 1px solid #000;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    letter-spacing: 2px;
}
.event_title:before,
.event_title:after{
    content: '';
    display: block;
    width: 8rem;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-image: url('../imgs/visual/shape_door.svg');
    background-repeat: no-repeat;
    background-size: 100%;
    -webkit-transform: rotate(-90deg);
        -ms-transform: rotate(-90deg);
            transform: rotate(-90deg);
}
.event_title:after{
    left: initial;
    right: 0;
    -webkit-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
            transform: rotate(90deg);
}
.event_infos{
    text-align: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    font-size: 1.1rem;
    border: 1px solid #000;
    margin: -1px 0 0;
    padding: 1rem;
    font-weight: bolder;
}
.event_infos > div{
    width: 100%;
}
.event_infos.two > div{
    width: 50%;
}
.event_infos.two > div:last-child{
    border-left: 1px solid #000;
}
.event_top{
    background: rgb(179,221,215);
    background: -webkit-gradient(linear, left bottom, left top, from(rgba(179,221,215,1)), to(rgba(255,255,255,0)));
    background: -o-linear-gradient(bottom, rgba(179,221,215,1) 0%, rgba(255,255,255,0) 100%);
    background: linear-gradient(0deg, rgba(179,221,215,1) 0%, rgba(255,255,255,0) 100%);
}
.eve_deco_l{
    position: absolute;
    left: 2rem;
    width: 12vw;
    top: -3vw;
    height: auto;
}
.eve_deco_r{
    position: absolute;
    right: 2rem;
    width: 12vw;
    top: 0;
}
.eve_deco_r img:first-child{
    position: absolute;
    left: -4rem;
    top: 4rem;
    width: 63%;
}
/* @layout */
.single_event_layout,
.line_block{
    border: 1px solid #000;
    margin: -1px 0 0;
}
.ls_a_layout{
    text-align: center;
    padding: .5rem;
    font-size: 1.1rem;
    border-top: 3px solid #000;
    border-bottom: 3px solid #000;
}
.ls_a_layout > div{
    border: 1px solid #000;
    padding: 1.5rem;
}
.ls_a_layout .esbtn{
    margin: 1rem 0 0;
}
.ls_video_a{
    padding: 1.5rem;
}
.ls_video_a iframe{
    margin: 0 auto;
    width: 60vw;
    height: 35vw;
}
.lva_img{
    padding: 1.5rem;
}
.ls_has_title{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}
.lsl_content{
    width: 90%;
    padding: 2rem;
}
.lsl_title{
    border: 0;
    border-right: 1px solid #000;
}
.lsl_title i{
    background-color: #000;
}
.ls_video_b{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}
.lsb_speaker{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding: 1rem;
}
.lsb_speaker > div{
    padding: .5rem 1rem;
}
.lsb_speaker figure{
    width: 15vw;
    height: 15vw;
    background-color: #fff;
}
.lsb_speaker img{
    -o-object-fit: cover;
       object-fit: cover;
    width: 100%;
    height: 100%;
}
.lsbspea_text h3{
    font-weight: bolder;
    padding: 0 0 0 1rem;
    border-left: 5px solid #000;
    margin: 0 0 1rem;
}
.lsbspea_text span{
    display: inline-block;
    font-size: 1rem;
    font-weight: normal;
}
.ls_slide{
    padding: 2rem 1rem 1rem;
    cursor: -webkit-grab;
    cursor: grab;
}
.eve_sli_obj img{
    height: 30vw;
}
.eve_sli_obj{
    padding: 0 .5rem;
}
.lsd_cont{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: space-evenly;
        -ms-flex-pack: space-evenly;
            justify-content: space-evenly;
    padding: 2rem 4rem;
}
.lsd_cont td{
    display: table-cell;
    padding: 0 .5rem;
}
.lsd_cont td:first-child{
    width: 9rem;
}
.content_layout img{
    width: 100%;
}
.event_slider img{
    width: auto;
}

/* -----------@exhibition------------- */

.event_title.exhi h1{
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
    position: relative;
    z-index: 2;
}
.event_title.exhi b{
    margin: 0 1rem 0 2.5rem;
}
.event_title.exhi i{
    background-color: #000;
}
.exhi_title_deco{
    width: 50%;
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    background: rgb(255,255,255);
    background: -webkit-gradient(linear, left top, right top, from(rgba(255,255,255,0)), to(rgba(179,221,215,1)));
    background: -o-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(179,221,215,1) 100%);
    background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(179,221,215,1) 100%);
}
.exhi_title_deco span{
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
            transform: translateY(-50%);
    right: 3rem;
    border: 1px solid #000;
    padding: .5rem 1.5rem;
    font-weight: bolder;
}
.etd_imgs img{
    position: absolute;
    top: 0;
}
.etd_imgs img:nth-child(1){
    width: 15rem;
    right: 15rem;
    top: 3rem;
    -webkit-transform: rotate(-52deg);
        -ms-transform: rotate(-52deg);
            transform: rotate(-52deg);
}
.etd_imgs img:nth-child(2){
    width: 15rem;
    right: 9rem;
    top: 5rem;
    -webkit-transform: rotate(-20deg);
        -ms-transform: rotate(-20deg);
            transform: rotate(-20deg);
}
.etd_imgs img:nth-child(3){
    width: 2.7rem;
    right: 19rem;
    top: -6rem;
    -webkit-transform: rotate(43deg);
        -ms-transform: rotate(43deg);
            transform: rotate(43deg);
}
.etd_imgs img:nth-child(4){
    width: 2.7rem;
    right: 18rem;
    top: -1rem;
    -webkit-transform: rotate(52deg);
        -ms-transform: rotate(52deg);
            transform: rotate(52deg);
}
.exhi_banner{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}
.exhib_img{
    width: 70%;
    padding: 1.5rem;
}
.exhib_img img{
    width: 100%;
}
.exhib_infos{
    width: 30%;
    border-left: 1px solid #000;
}
.exhib_infos > div{
    padding: 2rem;
}
.exinfo .des{
    line-height: 2;
    border-bottom: 1px solid #000;
    margin: 0 0 1rem;
    padding: 0 0 1rem;
}
.ls_layout_f{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding: 2rem .5rem;
}
.ls_layout_f > div{
    width: 50%;
    padding: 0 1rem;
}
.lsf_l{
    border-right: 1px solid #000;
}
/* -----------@defaulTemp------------- */
.defa_title{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}
.defa_title_text h1{
    font-size: 2.5rem;
    font-weight: bolder;
    letter-spacing: 2px;
}
.defa_title{
    border: 1px solid #000;
}
.defa_title_text{
    min-height: 11rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    border-left: 10px solid #000;
    border-right: 1px solid #000;
    width: 35%;
    padding: 2rem;
    background: rgb(255,255,255);
    background: -webkit-gradient(linear, left top, right top, from(rgba(255,255,255,0)), to(rgba(179,221,215,1)));
    background: -o-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(179,221,215,1) 100%);
    background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(179,221,215,1) 100%);
}
.defa_title_deco{
    width: 65%;
    padding-left: .5rem;
}
.dtd_deco{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 100%;
    border-left: 1px solid #000;
    border-bottom: 1px solid #000;
}
.dtd_deco.hastext{height: 60%;}
.dtd_deco div{
    width: 33.333333%;
    overflow: hidden;
    position: relative;
    background: rgb(255,255,255);
    background: -webkit-gradient(linear, left top, right top, from(rgba(255,255,255,0)), to(rgba(179,221,215,1)));
    background: -o-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(179,221,215,1) 100%);
    background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(179,221,215,1) 100%);
}
.dtd_deco img{
    position: absolute;
    width: 15rem;
    left: -3rem;
    top: 0;
    -webkit-transform: translate3d(-2.5rem,0,0);
            transform: translate3d(-2.5rem,0,0);
}
.dtd_text{
    border-left: 1px solid #000;    
    height: 40%;
    font-weight: bolder;
    text-align: right;
    padding: 0 2rem 0 0;
    font-size: 1.5rem;
}
.dtd_text span{
    display: inline-block;
    vertical-align: baseline;
    font-size: 3vw;
    font-weight: normal;
}
.d_layout_a{
    padding: 1.5rem;
}
.d_layout_a img{
    width: 100%;
}
.d_layout_b,
.d_layout_c{
    text-align: center;
    padding: 2rem;
}
.d_layout_b td{
    display: table-cell;
}
.d_layout_b td:first-child{
    width: 10rem;
}
.d_layout_b table{
    display: inline-block;
    margin: 0 auto;
}
.d_layout_d{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding: 1rem;
}
.d_layout_d p{
    margin: 0 0 1rem;
}
.d_layout_d > div{
    width: 50%;
    padding: 1rem;
}
.dle_title{
    border-left: 5px solid #000;
    border-right: 5px solid #000;
    border-bottom: 1px solid #000;
    padding: 0 .5rem;
}
.dle_title h2{
    padding: 1rem;
    font-weight: bolder;
}
.dle_title > div{
    border-left: 1px solid #000;
    border-right: 1px solid #000;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
}
.dle_title .deco{
    width: 80%;
    background-image: url('../imgs//visual/dot_bg.svg');
    background-repeat: repeat-x;
    background-size: contain;
}
.dlebuy{
    position: relative;
    border-bottom: 1px solid;
}
.dlebuy:before{
    content: '';
    width: 100%;
    height: 100%;
    z-index: -1;
    -webkit-transform: scaleY(0);
        -ms-transform: scaleY(0);
            transform: scaleY(0);
    -webkit-transform-origin: 0 100%;
        -ms-transform-origin: 0 100%;
            transform-origin: 0 100%;
    -webkit-transition: -webkit-transform .3s;
    transition: -webkit-transform .3s;
    -o-transition: transform .3s;
    transition: transform .3s;
    transition: transform .3s, -webkit-transform .3s;
    left: 0;top: 0;position: absolute;
    background: rgb(179,221,215);
    background: -webkit-gradient(linear, left bottom, left top, from(rgba(179,221,215,1)), to(rgba(255,255,255,0)));
    background: -o-linear-gradient(bottom, rgba(179,221,215,1) 0%, rgba(255,255,255,0) 100%);
    background: linear-gradient(0deg, rgba(179,221,215,1) 0%, rgba(255,255,255,0) 100%);
}
.dlebuy a {
    font-size: 1.4rem;
    padding: 1rem;
}
.dlebuy img{
    float: right;
    -webkit-transition: -webkit-transform .3s;
    transition: -webkit-transform .3s;
    -o-transition: transform .3s;
    transition: transform .3s;
    transition: transform .3s, -webkit-transform .3s;
    -webkit-transform: translateX(-2rem);
        -ms-transform: translateX(-2rem);
            transform: translateX(-2rem);
}
.dlebuy a:hover img{
    -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
            transform: translateX(0);
}
.dlebuy a:before{
    content: '●';
    display: inline-block;
}
.dlebuy:hover:before{
    -webkit-transform: scaleY(1);
        -ms-transform: scaleY(1);
            transform: scaleY(1);
}
.d_layout_f{
    padding: 1rem;
}
.dlf_title{
    padding: 1rem 1rem 2rem;
}
.dlf_title h2{
    font-weight: bolder;
}
.dlf_title b{
    margin: 0 1rem 0 0;
    display: inline-block;
    vertical-align: middle;
}
.dlf_title i{
    background-color: #000;
}
.dlf_cont{
    display: inline-block;
    width: 50%;
    padding: 1rem;
    vertical-align: top;
}
.dlf_cont > div{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}
.dlf_cont figure{
    width: 35%;
}
.dlf_cont_inner{
    width: 65%;
    padding: 0 0 0 1rem;
}
.dlf_cont_inner h3{
    font-weight: bolder;
    border-left: 5px solid #000;
    padding: 0 0 0 1rem;
    margin: 0 0 1rem;
}
.dlf_cont_inner p{
    margin: 0 0 1rem;
}
.dlf_cont_link h4{
    font-size: 1rem;
    margin: 0 0 1rem;
}
.dlf_cont_link img{
    display: inline-block;
    vertical-align: middle;
}
.conrelink{
    display: inline-block;
    margin: 0 .5rem 1rem 0;
}
.conrelink a{
    padding: .3rem .7rem;
    font-size: .9rem;
    border: 1px solid #000;
}

/* -----------@eventDisplay------------- */
.eve_bigtitle h1{
    font-size: 0px;
}
.evedis_title{
    border: 1px solid #000;
    position: relative;
    background: rgb(179,221,215);
    background: -webkit-gradient(linear, left bottom, left top, from(rgba(179,221,215,1)), to(rgba(255,255,255,0)));
    background: -o-linear-gradient(bottom, rgba(179,221,215,1) 0%, rgba(255,255,255,0) 100%);
    background: linear-gradient(0deg, rgba(179,221,215,1) 0%, rgba(255,255,255,0) 100%);
}
.evedis_title:before,
.evedis_title:after{
    content: '';
    width: 100%;
    height: 1px;
    background-color: #000;
    position: absolute;
    top: 10px;
    left: 0;
}
.evedis_title:after{
    top: initial;
    bottom: 10px;
}
.eve_circle > div{
    position: absolute;
    top: 45%;
    left: 5%;
    margin: -3.5rem 0 0;
    z-index: 1;
}
div.evec_r{
    left: initial;
    right: 5%;
}
.eve_circle span{
    width: 7rem;
    height: 7rem;
    border: 1px solid #000;
    border-radius: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    text-align: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-writing-mode: vertical-lr;
        -ms-writing-mode: tb-lr;
            writing-mode: vertical-lr;
    font-size: 1.5rem;
    position: relative;
    font-weight: bolder;
}
.eve_circle span:before{
    content: '';
    width: 6.4rem;
    height: 6.4rem;
    border: 1px solid #000;
    border-radius: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -3.2rem 0 0 -3.2rem;
}
.eve_bigtitle{
    width: 100%;
    text-align: center;
    padding: 3rem 4rem;
    position: relative;
    z-index: 1;
}
.eve_bigtitle img{
    margin: 0 auto;
    width: 30vw;
}
.eve_letter{
    position: absolute;
    bottom: 0;
    z-index: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
}
.eve_letter img{
    width: auto;
    max-width: none;
    height: 10vh;
}
.events_wrap{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    border: 1px solid #000;
}
.events_wrap .date{
    color: #a4cfbe;
    font-size: 3.5rem;
    position: absolute;
}
.events_wrap > div{
    border-right: 1px solid #000;
    position: relative;
    overflow: hidden;
}
.events_wrap > div > a{
    padding: 2.5rem;
    height: 100%;
}
.events_wrap > div:nth-child(1){
    width: 30%;
}
.events_wrap > div:nth-child(3){
    width: 30%;
    border: 0;
}
.events_wrap > div:nth-child(2){
    width: 40%;
}
.events_wrap > div.end:before{
    content: '';
    position: absolute;
    z-index: 90;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    opacity: 0.9;
    cursor: not-allowed;
}
.events_wrap > div.end:after{
    content: '活動已結束';
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
    z-index: 100;
    font-size: 2rem;
    font-weight: bolder;
}
.events_wrap > div.end > a{
    -webkit-filter: blur(9px);
            filter: blur(9px);
    opacity: .5;
    pointer-events: none;
}
.event_btn svg{
    width: 1rem;
    height: 1rem;
    fill:none;stroke:#000000;stroke-width:2;stroke-miterlimit:10;
}
.event_btn span{
    border-radius: 100%;
    border: 1px solid #000;
    width: 3rem;
    height: 3rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    position: relative;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    background-color: #fff;
    -webkit-transition: -webkit-transform .3s;
    transition: -webkit-transform .3s;
    -o-transition: transform .3s;
    transition: transform .3s;
    transition: transform .3s, -webkit-transform .3s;
}
.events_wrap a:hover .event_btn span{
    -webkit-transform: scale(1.2);
        -ms-transform: scale(1.2);
            transform: scale(1.2);
}
.events_wrap figure img{
    -webkit-transition: -webkit-transform .3s;
    transition: -webkit-transform .3s;
    -o-transition: transform .3s;
    transition: transform .3s;
    transition: transform .3s, -webkit-transform .3s;
}
.events_wrap a:hover figure img{
    -webkit-transform: scale(1.1);
        -ms-transform: scale(1.1);
            transform: scale(1.1);
}
.event_btn span:before{
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 2.4rem;
    height: 2.4rem;
    margin: -1.2rem 0 0 -1.2rem;
    border-radius: 100%;
    border: 1px solid #000;
}
.events_wrap .tag i{
    background-color: #000;
    color: #fff;
    padding: 1rem;
    display: inline-block;
    font-style: normal;
}
.events_wrap figure{
    overflow: hidden;
}
.events_wrap h2{
    font-size: 2rem;
    font-weight: bolder;
}
.event_style_a{
    background: rgb(179,221,215);
    background: -webkit-gradient(linear, left bottom, left top, from(rgba(179,221,215,1)), color-stop(68%, rgba(255,255,255,0)));
    background: -o-linear-gradient(bottom, rgba(179,221,215,1) 0%, rgba(255,255,255,0) 68%);
    background: linear-gradient(0deg, rgba(179,221,215,1) 0%, rgba(255,255,255,0) 68%);
}
.event_style_a .date{    
    right: 1rem;
    top: -1rem;
    -webkit-transform: rotate(-90deg);
        -ms-transform: rotate(-90deg);
            transform: rotate(-90deg);
    -webkit-transform-origin: 100% 50%;
        -ms-transform-origin: 100% 50%;
            transform-origin: 100% 50%;
}
.event_style_a .title{
    padding: 2rem 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
}
.event_style_a .title h2{
    -webkit-writing-mode: vertical-rl;
        -ms-writing-mode: tb-rl;
            writing-mode: vertical-rl;
    border-right: 1px solid #000;
    height: 5.3rem;
    position: relative;
    line-height: 2;
    margin: 0 0 0 auto;
    font-size: 2rem;
}
.event_style_a .title h2:before,
.event_style_a .title h2:after{
    content: '';
    height: 100%;
    width: 1px;
    background-color: #000;
    position: absolute;
    top: 0;
    left: 0;
}
.event_style_a .title h2:after{
    left: 4rem;
}
.event_style_a .tag{
    -webkit-writing-mode: vertical-lr;
        -ms-writing-mode: tb-lr;
            writing-mode: vertical-lr;
}
.event_style_a .quote:before{
    content: '“';
    font-size: 2rem;
    font-weight: bolder;
    margin: 0 0 0 -1rem;
    height: 0;
    display: block;
}
.event_style_a .bottom .quote:before{
    content: '”';
    margin: 0 -1rem 0 0;
}
.event_style_a .bottom{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
}
.event_style_b .title{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
}
.event_style_b h2{
    font-size: 1.8rem;
    letter-spacing: 4px;
    margin: 0 0 1rem;
}
.event_style_b .tag i{
    margin: 0 1rem 0 0;
    padding: 1rem .5rem;
    -webkit-writing-mode: vertical-lr;
        -ms-writing-mode: tb-lr;
            writing-mode: vertical-lr;
}
.event_style_b .date{
    position: absolute;
    bottom: -2rem;
    left: 0;
}
.event_style_b figure{
    margin: 0 0 1rem;
}
.event_style_c{
    text-align: center;
}
.event_style_c .date{
    position: absolute;
    left: 0;
    bottom: -2rem;
}
.event_style_c .event_btn span{
    margin: 0 auto;
}
.event_style_c h2{
    letter-spacing: 2px;
    margin: 1rem 0;
}
.event_style_c .cirtitle:before,
.event_style_c .cirtitle:after{
    content: '';
    background-image: url('../imgs/visual/double_cir.svg');
    display: inline-block;
}
.event_style_d .date{
    position: absolute;
    right: 0;
    bottom: -2rem;
}
.event_style_d{
    background: rgb(179,221,215);
    background: -o-linear-gradient(30deg, rgba(179,221,215,1) 0%, rgba(255,255,255,0) 47%);
    background: linear-gradient(60deg, rgba(179,221,215,1) 0%, rgba(255,255,255,0) 47%);
}
.event_style_d h2{
    margin: 1rem 0;
}
.event_style_d figure{
    margin: 0 0 1rem;
}
.event_style_e{
    text-align: center;
    background: rgb(179,221,215);
    background: -o-linear-gradient(295deg, rgba(179,221,215,1) 0%, rgba(255,255,255,0) 76%);
    background: linear-gradient(155deg, rgba(179,221,215,1) 0%, rgba(255,255,255,0) 76%);
}
.event_style_e .date{
    position: absolute;
    bottom: -2rem;
    left: 0;
    width: 100%;
    text-align: center;
    font-size: 3rem;
}
.event_style_e h2{
    letter-spacing: 5px;
    border-left: 1px solid #000;
    position: relative;
    display: inline-block;
    letter-spacing: 25px;
    padding: 0 0 0 15px;
}
.event_style_e h2 i{
    width: 1px;
    height: 100%;
    background: #000;
    position: absolute;
    right: 0;
    top: 0;
}
.event_style_e h2 i:nth-child(2){right: 4.2rem;}
.event_style_e h2 i:nth-child(3){right: 7.8rem;}
.event_style_e h2 i:nth-child(4){right: 11.5rem;}
.event_style_e figure{
    margin: 1rem 0;
}
.event_style_e .event_btn span{
    margin: 1rem auto;
}
.event_style_f{
    background: rgb(179,221,215);
    background: -webkit-gradient(linear, left bottom, left top, from(rgba(179,221,215,1)), color-stop(50%, rgba(255,255,255,0)));
    background: -o-linear-gradient(bottom, rgba(179,221,215,1) 0%, rgba(255,255,255,0) 50%);
    background: linear-gradient(0deg, rgba(179,221,215,1) 0%, rgba(255,255,255,0) 50%);
}
.event_style_f .date{    
    position: absolute;
    top: 30%;
    -webkit-transform: rotate(-90deg);
        -ms-transform: rotate(-90deg);
            transform: rotate(-90deg);
    -webkit-transform-origin: 100% 50%;
        -ms-transform-origin: 100% 50%;
            transform-origin: 100% 50%;
    right: 1rem;
}
.event_style_f .title{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}
.event_style_f .tag{
    -webkit-writing-mode: vertical-lr;
        -ms-writing-mode: tb-lr;
            writing-mode: vertical-lr;
    margin: 0 1rem 0 0;
}
.event_style_f figure{
    margin: 1rem 0;
}
.event_style_f .event_btn{
    position: absolute;
    right: 2rem;
    bottom: 2rem;
}
.event_style_a .tag i,
.event_style_f .tag i{    
    padding: 1rem .5rem;
}
.event_style_d h2,
.event_style_f h2{
    letter-spacing: 2px;
}
/* -----------@footer------------- */
footer{
    position: relative;
    margin: 5rem 0 0;
    border-top: 3px solid #000;
    background: rgb(179,221,215);
    background: -webkit-gradient(linear, left bottom, left top, from(rgba(179,221,215,0.53125)), color-stop(59%, rgba(255,255,255,0)));
    background: -o-linear-gradient(bottom, rgba(179,221,215,0.53125) 0%, rgba(255,255,255,0) 59%);
    background: linear-gradient(0deg, rgba(179,221,215,0.53125) 0%, rgba(255,255,255,0) 59%);
}
#gotop{
    position: absolute;
    top: -2.5rem;
    right: 7vw;
    width: 6rem;
    cursor: pointer;
    -webkit-transition: -webkit-transform .3s;
    transition: -webkit-transform .3s;
    -o-transition: transform .3s;
    transition: transform .3s;
    transition: transform .3s, -webkit-transform .3s;
}
#gotop:hover{
    -webkit-transform: scale(1.1);
        -ms-transform: scale(1.1);
            transform: scale(1.1);
}
#gotop span{
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
    color: #fff;
    font-weight: bolder;
    width: 38%;
    line-height: 1.2;
}
.foot_logo{
    padding: 1.5rem 0;
    border-bottom: 1px solid #000;
}
.foot_infos{
    padding: 1.5rem 0 3rem;
    border-bottom: 1px solid #000;
}
.foot_infos > div > div{
    display: inline-block;
    vertical-align: top;
}
.foot_infos .info{
    padding: .5rem 1.5rem;
    border-left: 1px solid #000;
    border-right: 1px solid #000;
    margin: 0 0 0 -1px;
}
.foot_copy{
    text-align: right;
    font-size: .7rem;
    line-height: 1.2;
    float: right;
}
.font_copyright{
    opacity: 0.5;
}
footer a{
    display: inline-block;
}