.mAuto{
    display:block;
    margin-left:auto;
    margin-right:auto
}
.mpReset{
    margin:0;
    padding:0
}
.ulReset{
    margin:0;
    padding:0;
    list-style-type:none
}
.con{
	text-align:center;
	margin-bottom: 48px;
	    flex-grow:1;
    flex-basis:0
	
}
.con h1{
	font-size: 36px;
	color:#7d5bc3;
	font-weight: 600;
	margin: 0;
	padding: 0;
}
.con h2{
	font-size: 30px;
	color:#000000;
	font-weight: 600;
	margin: 0;
	padding: 0;
	margin-bottom: 16px;
}

.con p{
	font-size: 16px;
margin-top: 15px;
line-height: 1.6;

		text-align:left;
}
.con p a{
color:#000;

}
.con p a:hover{
color:#7d5bc3;
	text-decoration:none;
	font-weight: 900;

}
hr.new1{
border:none;
	border-bottom:3px solid #7d5bc3;
	width: 20%;
}

.text{
	font-size: 20px;
	color:#000;
	font-weight: 800;
}
.row{
    display:flex;
	padding-bottom: 32px;
}

.row a{
    text-decoration:none;
}
.row a:hover{
color:#7d5bc3;
	text-decoration:none;
	font-weight: 900;

}
.row .col{
    padding:16px;
    flex-grow:1;
    flex-basis:0;
		text-align: center;
}
.row .col.half{
    width:40%;
    flex:none;
}
.row .col.half-five{
    width:41.6666%;
    flex:none
}
.row .col.half-four{
    width:60%;
    flex:none
}
.row .col.half-three{
    width:25%;
    flex:none
}
.row .col.half-two{
    width:16.6666%;
    flex:none
}
.row h2{
	color:#000000;
	font-size: 34px;
	line-height: 48px;
}
.row h1{
font-size: 30px;
color:#555151;
	font-weight: 600;
	margin: 0;
	padding: 0;
	text-align:center;
}
@media (max-width: 660px){
    .row{
        display:block
    }
    .row .col.half,.row .col.half-five,.row .col.half-four,.row .col.half-three,.row .col.half-two{
        width:auto
    }
}
.row.keep-flex{
    display:flex
}
.row.keep-flex .col.half{
    width:50%
}
.row.keep-flex .col.half-five{
    width:41.6666%
}
.row.keep-flex .col.half-four{
    width:33.3333%
}
.row.keep-flex .col.half-three{
    width:25%
}
.row.keep-flex .col.half-two{
    width:16.6666%
}
body{
    position:relative;
    -webkit-transition:all 400ms ease;
    transition:all 400ms ease;
    overflow:auto;
    right:0;
    background-color:#F7F7F8;
    background-image:url("../img/kanban.jpg?20190901");
    background-position:center 60px;
    background-repeat:no-repeat
}
@media (max-width: 960px){
    body{
        background-size:1320px 402px
    }
    body.showMenu{
        overflow:hidden;
        right:260px;
        background-position:calc(50% - 260px) 60px
    }
}
@media (max-width: 660px){
    body{
        background-size:960px 293px
    }
}
@media (max-width: 480px){
    body{
        background-size:639.36px 195px
    }
}
#loading{
    position:fixed;
    z-index:4;
    width:56px;
    height:56px;
    top:50%;
    left:50%;
    margin-top:-28px;
    margin-left:-28px;
    -webkit-box-shadow:0px 0px 8px rgba(0,0,0,0.4);
    box-shadow:0px 0px 8px rgba(0,0,0,0.4);
    background-image:url(data:image/gif;
    base64,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)
}
#loading-cover{
    position:fixed;
    width:100%;
    height:3px;
    top:0;
    left:0;
    z-index:9
}
#loading-cover div{
    position:relative;
    width:0%;
    height:100%;
    top:0;
    left:0;
    background-color:#E5005A;
    box-shadow:0 0 12px #E5005A;
    -webkit-transition:all 100ms ease;
    transition:all 100ms ease;
    z-index:-1
}
#loading-cover>div.done{
    width:100%;
    -webkit-transition:all 800ms ease;
    transition:all 800ms ease
}
#blackOverlay {
	display: none;
	position: fixed;
	z-index: 5;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABZ0RVh0Q3JlYXRpb24gVGltZQAxMi8zMS8xNdOFLqwAAAAcdEVYdFNvZnR3YXJlAEFkb2JlIEZpcmV3b3JrcyBDUzbovLKMAAAAGElEQVQYlWNkYGBoYCACMBGjaFQh9RQCANyeAJRQ3dKnAAAAAElFTkSuQmCC);
}
.wrapper{
    max-width:1104px;
    margin-left:auto;
    margin-right:auto;
    position:relative
}
header{
    width:100%;
    height:60px;
    background-color:#FFF;
    position:fixed;
    top:0px;
    left:0px;
    z-index:3;
    -webkit-box-shadow:0px 0px 8px rgba(0,0,0,0.5);
    box-shadow:0px 0px 8px rgba(0,0,0,0.5);
    -webkit-transition:all 400ms ease;
    transition:all 400ms ease
}
header div{
    height:60px;
    text-align:right
}
header div>a{
    display:inline-block;
    width:70px;
    height:60px;
    background-color:#F4F4F4;
    vertical-align:top;
    line-height:60px;
    text-align:center;
    margin-right:1px;
    font-size:13px;
    -webkit-transition:all 400ms ease;
    transition:all 400ms ease
}
header div>a:hover{
    text-decoration:none;
    background-color:#E9E9E9
}
header div #goHome{
    display:none
}
@media (max-width: 960px){
    header div #goHome{
        display:inline-block

    }
}
.showMenu header{
    left:-260px
}
#WUFU_Logo{
    width:147px;
    height:36px;
    margin:0;
    background-position:-296px 0;
    background-image:url(../img/sprite.png);
    position:absolute;
    left:0px;
    top:11px
}
@media (max-width: 960px){
    #WUFU_Logo{
        left:10px;
        -webkit-background-size:500px;
        background-size:500px;
        background-position:0 0
    }
}
#WUFU_Logo a{
    display:block;
    height:100%;
    text-decoration:none
}
#openMenu{
    position:relative;
    display:none;
}
@media (max-width: 960px){
    #openMenu{
        display:inline-block;
    }
    #openMenu span{
        position:absolute;
        display:block;
        width:50%;
        height:4px;
        background-color:#345AFD;
        top:50%;
        left:50%;
        margin-top:-2px;
        border-radius:4px;
        margin-left:-25%;
        -webkit-transition:all 400ms ease;
        transition:all 400ms ease
    }
    #openMenu span:before,#openMenu span:after{
        position:absolute;
        content:'';
        display:block;
        width:100%;
        height:4px;
        background-color:#345AFD;
        border-radius:4px;
        -webkit-transition:all 600ms ease;
        transition:all 600ms ease
    }
    #openMenu span:before{
        top:-10px
    }
    #openMenu span:after{
        bottom:-10px
    }
    .showMenu #openMenu span{
        background-color:rgba(255,255,255,0)
    }
    .showMenu #openMenu span:before{
        top:0;
        transform:rotate(45deg)
    }
    .showMenu #openMenu span:after{
        bottom:0;
        transform:rotate(-45deg)
    }
}
nav{
    position:relative;
    display:block;
    width:100%;
    margin:0px auto 0px auto;
    font-family:"Noto Sans TC", "Microsoft JhengHei UI", "Microsoft JhengHei", "PingFang TC", "HeiTi TC", "sans-serif";
    font-weight:300;
    font-size:20px;
    border-radius:10px;
    overflow:hidden;
    box-shadow:0px 0px 25px #93242494;
	background-color: #7d5bc3;
}
nav a{
    display:inline-block;
    width:25%;
    height:70px;
    line-height:70px;
    text-align:center;
    background-color:#7d5bc3;
    color:#FFF
}
nav a:hover,nav a:active,nav a.active{
    background-color:#c13adb;
    text-decoration:none
}
@media (max-width: 960px){
    nav{
        display:block;
        width:260px;
        position:fixed;
        top:0;
        bottom:0;
        right:-270px;
        left:auto;
        z-index:5;
        border-style:none;
        box-shadow:0px 0px 8px rgba(0,0,0,0.5);
        overflow-y:auto;
        margin:0;
        border-radius:0;
        -webkit-overflow-scrolling:touch;
        -webkit-transition:all 400ms ease;
        transition:all 400ms ease
    }
    nav a{
        display:block;
        width:100%;
        text-align:left;
        height:48px;
        line-height:48px;
        font-size:18px;
        color:#FFF;
        -webkit-transition:all 400ms ease;
        transition:all 400ms ease;
        padding-left:10px;
        position:relative;
        border-bottom:1px solid #fff;
    }

    .showMenu nav{
        right:0
    }
}


main{
    position:relative;
    padding-top:50px;
    padding-bottom:50px;
    min-height:500px;
    overflow:hidden;
}
main a{
	color:#7d5bc3;
}
.fixed+main{
    padding-top:150px
}
@media (max-width: 960px){
    main{
        padding-top:55px;
        padding-bottom:25px
    }
}
@media (max-width: 480px){
    main{
        padding-top:10px;
        padding-bottom:25px
    }
}
#kanban{
    margin-top:60px;
    height:570px;
    overflow:hidden
}
#kanban .wrapper{
    height:100%
}
@media (max-width: 960px){
    #kanban{
        background-size:1320px 402px;
        height:402px;
    }
}
@media (max-width: 660px){
    #kanban{
        background-size:960px 300px;
        height:300px;
    }
}
@media (max-width: 480px){
    #kanban{
        background-size:639.36px 195px;
		  height:195px;
    }
}
#social{
    display:block;
    position:absolute;
    bottom:40px;
    width:100%;
    text-align:center;
}
@media (max-width: 960px){
    #social{
        bottom:25px
    }
}
@media (max-width: 660px){
    #social{
        bottom:10px
    }
}
@media (max-width: 480px){
    #social{
        bottom:0px;
		text-align:right;
		padding-right: 16px;
    }
}
#social div,#social iframe{
    display:inline-block;
    vertical-align:baseline
}
/*footer{
    position:relative;
    background-color:#FFF;
    -webkit-box-shadow:0px 0px 8px rgba(0,0,0,0.5);
    box-shadow:0px 0px 8px rgba(0,0,0,0.5);
    font-size:12px;
    padding-top:40px;
    padding-bottom:40px;
    font-family:Cambria, PMingLiU, "SongTi TC", "serif"
}*/
@media (max-width: 480px){
    footer{
        padding-top:20px;
        padding-bottom:20px
    }
}
@media (max-width: 960px){
    footer .wrapper{
        width:94%;
        margin-left:3%;
        margin-right:3%
    }
}
@media (max-width: 660px){
    footer .wrapper{
        text-align:center
    }
}
footer .wrapper>span{
    margin-right:5px;
    line-height:150%
}
footer .wrapper>span strong{
    font-weight:normal
}
footer .wrapper hr{
    border:none;
    height:2px;
    background-color:#E5015A;
    margin-top:15px
}
footer .wrapper #followUs{
    position:absolute;
    right:0;
    top:0;
    line-height:25px
}
@media (max-width: 660px){
    footer .wrapper #followUs{
        position:relative
    }
}
footer .wrapper #followUs span{
    vertical-align:top
}
@media (max-width: 660px){
    footer .wrapper #followUs span{
        display:block;
        text-align:center;
        margin-top:5px
    }
}
footer .wrapper #followUs a{
    display:inline-block;
    vertical-align:text-bottom;
    width:25px;
    height:25px;
    margin-left:5px;
    margin-right:5px;
    background-image:url(../img/sprite.png)
}
@media (max-width: 960px){
    footer .wrapper #followUs a{
        width:24.96px;
        height:24.96px;
        -webkit-background-size:312px;
        background-size:312px
    }
}
@media (max-width: 660px){
    footer .wrapper #followUs a{
        width:40px;
        height:40px;
        -webkit-background-size:500px;
        background-size:500px
    }
}
footer .wrapper #followUs #FB_Icon{
    background-position:-298px -37px
}
@media (max-width: 960px){
    footer .wrapper #followUs #FB_Icon{
        background-position:-138.528px 0
    }
}
@media (max-width: 660px){
    footer .wrapper #followUs #FB_Icon{
        background-position:-222px 0
    }
}
footer .wrapper #followUs #Line_Icon{
    background-position:-324px -37px
}
@media (max-width: 960px){
    footer .wrapper #followUs #Line_Icon{
        background-position:-163.8px 0
    }
}
@media (max-width: 660px){
    footer .wrapper #followUs #Line_Icon{
        background-position:-262.5px 0
    }
}
footer .wrapper #followUs #Instagram_Icon{
    background-position:-350px -37px
}
@media (max-width: 960px){
    footer .wrapper #followUs #Instagram_Icon{
        background-position:-189.072px 0
    }
}
@media (max-width: 660px){
    footer .wrapper #followUs #Instagram_Icon{
        background-position:-303px 0
    }
}
/*#scrollUp{
    display:none;
    position:fixed;
    z-index:2;
    bottom:-50px;
    right:20px;
    width:100px;
    height:102px;
    -webkit-transition:all 200ms ease;
    transition:all 200ms ease;
    background-position:-890px 0px;
    background-image:url(../img/sprite.png)
}*/
 /*@media (max-width: 960px){
   #scrollUp{
        width:100px;
        height:0px;
        background-image:none;
        bottom:20px;
        right:10px;
        z-index:4;
    }
}*/
/*#scrollUp:before{
    content:'GO TOP';
    position:absolute;
    width:90%;
    margin-left:5%;
    height:24px;
    line-height:24px;
    top:-30px;
    border-radius:12px;
    font-size:12px;
    color:#FFF;
    text-align:center;
    border:1px solid #545D6A;
    background-image:-webkit-linear-gradient(bottom, #5a6471 0%, #707b8b 100%);
    background-image:-o-linear-gradient(bottom, #5a6471 0%, #707b8b 100%);
    background-image:linear-gradient(to top, #5a6471 0%, #707b8b 100%);
    opacity:0.75
}*/
/*@media (max-width: 960px){
    #scrollUp:before{
        height:40px;
        line-height:40px;
        border-radius:20px
    }
}
#scrollUp:hover{
    bottom:-40px
}
@media (max-width: 960px){
    #scrollUp:hover{
        bottom:68px
    }
}
#scrollUp.active{
    -webkit-animation-duration:400ms;
    animation-duration:400ms;
    -webkit-animation-fill-mode:both;
    animation-fill-mode:both;
    -webkit-animation-name:toUP;
    animation-name:toUP
}*/
@-webkit-keyframes toUP{
    from{
        -webkit-transform:translateY(0)
    }
    to{
        -webkit-transform:translateY(-1000px)
    }
}
@keyframes toUP{
    from{
        transform:translateY(0)
    }
    to{
        transform:translateY(-1000px)
    }
}
#content{
    padding:0px 10px 0px 10px
}
#about h3,#spot h3,#delicious h3{
    margin:0px 0px 0.2em 0px;
    font-family: "Noto Sans TC", "Microsoft JhengHei UI", "Microsoft JhengHei", "PingFang TC", "HeiTi TC", "sans-serif";
    font-weight:700;
    color:#7d5bc3;
	font-size: 30px;

	line-height: 33px;
}
#about p,#spot p,#delicious p{
    font-size:18px;
    text-shadow:1px 1px 0 rgba(255,255,255,0.4);
    margin-top:0;
	line-height: 1.8;
	border-top-style:solid; border-top-color:#000;
	border-width:1px; 
	padding-top: 12px;
}
#about img,#spot img,#delicious img{
    display:block;
    width:100%;
	border-radius:20px;
}
#recommend>div{
    /*margin-top:2em*/
}
#recommend article p{
    font-size:13px;
    text-shadow:1px 1px 0 rgba(255,255,255,0.4)
}
#recommend article img{
    display:block;
    width:100%;
}
#recommend h3{
    margin:0;
    font-family:"Noto Serif TC", Cambria, PMingLiU, "SongTi TC", "serif";
    font-weight:700;
    height:50px;
    line-height:50px;
    color:#FFF;
    background-color:#0067A3;
    text-align:center;
    border-top-left-radius:9px;
    border-top-right-radius:9px
}
@media (max-width: 480px){
    #recommend h3{
        font-size:16px
    }
}
#recommend .card{
    overflow:hidden;
    border-bottom-left-radius:9px;
    border-bottom-right-radius:9px;
    background-color:#FFF
}
#recommend .card a{
    background-color:#FFF;
    display:inline-block;
    width:50%;
    padding-top:1em;
    color:#666;
    min-height:202px;
    vertical-align:top;
    -webkit-transition:all 200ms ease;
    transition:all 200ms ease
}
#recommend .card a img{
    display:block;
    width:90%;
    margin:0 auto 0 auto
}
#recommend .card a p{
    font-size:15px;
    text-align:center;
    margin:0.5em
}
#recommend .card a:hover{
    background-color:#F8F8F8;
    text-decoration:none
}
@media (max-width: 480px){
    #recommend .card a{
        width:100%
    }
}
#trips h2{
    position:relative;
    margin:0 0 0.5em 0;
    text-align:center
}
#trips h2 span{
    position:relative;
    display:inline-block;
    font-family:"Noto Sans TC", "Microsoft JhengHei UI", "Microsoft JhengHei", "PingFang TC", "HeiTi TC", "sans-serif";
    font-size:20px;
    height:40px;
    line-height:38px;
    color:#FFF;
    padding:0 1em 0 1em;
    background-color:#7d5bc3;
    border-radius:10px;
}
#trips h2:before{
    content:'';
    position:absolute;
    top:50%;
    left:0;
    width:100%;
    height:1px;
    background-color:#7d5bc3;
    z-index:0
}
#trips section{
    position:relative;
    min-height:100px;
    margin-top:1.5em
}
#trips section a{
    width:100%;
    background-color:#FFF;
    box-sizing:border-box;
    padding-top:2.083%;
    padding-bottom:2.083%;
    padding-left:2.083%;
    margin-top:15px;
    margin-bottom:15px;
    -webkit-transition:all 200ms ease;
    transition:all 200ms ease;
    display:table;
    font-family:"Noto Sans TC", "Microsoft JhengHei UI", "Microsoft JhengHei", "PingFang TC", "HeiTi TC", "sans-serif";
    border-radius:10px;
    border:1px solid #ffffff;
    box-shadow:0 2px 4px rgba(0,0,0,0.5)
}
@media (max-width: 960px){
    #trips section a{
        padding-top:3.125%;
        padding-bottom:3.125%;
        padding-left:3.125%
    }
}
@media (max-width: 660px){
    #trips section a{
        padding-left:0%;
        padding-top:15px;
        padding-bottom:15px
    }
}
#trips section a p{
    margin:0
}
#trips section a div{
    display:table-cell;
    box-sizing:border-box
}
#trips section a .productInfo{
    width:60%;
    padding-right:2%;
    font-size:18px;
    line-height:25px
}
@media (max-width: 960px){
    #trips section a .productInfo{
        width:53.125%
    }
}
@media (max-width: 660px){
    #trips section a .productInfo{
        display:block;
        width:auto;
        padding-right:0;
        margin-left:15px;
        margin-right:15px
    }
}
.lt-ie9 #trips section a .productInfo{
    padding-right:20px
}
#trips section a .productInfo .area{
    height:24px;
    border-radius:12px;
    margin-bottom:9px;
    background-image:-webkit-linear-gradient(left, #f0f0f0 0%, rgba(240,240,240,0) 100%);
    background-image:-o-linear-gradient(left, #f0f0f0 0%, rgba(240,240,240,0) 100%);
    background-image:linear-gradient(to right, #f0f0f0 0%, rgba(240,240,240,0) 100%)
}
.lt-ie9 #trips section a .productInfo .area{
    background-color:#F4F4F4
}
#trips section a .productInfo .area span{
    display:inline-block;
    vertical-align:top;
    padding-left:10px;
    padding-right:10px;
    background-color:#999;
    color:#FFF;
    font-size:15px;
    line-height:24px;
    border-radius:12px
}
@media (max-width: 660px){
    #trips section a .productInfo .area span{
        display:block;
        text-align:center
    }
}
#trips section a .productInfo .title{
    color:#333;
    font-size:18px;
    font-weight:normal;
    margin:0
}
#trips section a .productInfo .event{
    color:#D90000
}
#trips section a .departureDay,#trips section a .productPrice{
    text-align:center;
    vertical-align:middle;
    width:20%;
    padding-left:10px;
    padding-right:10px;
    border-left:1px solid #999999;
    box-sizing:border-box
}
@media (max-width: 960px){
    #trips section a .departureDay,#trips section a .productPrice{
        width:21.875%
    }
}
@media (max-width: 660px){
    #trips section a .departureDay,#trips section a .productPrice{
        display:block;
        width:auto;
        padding-left:15px;
        padding-right:15px;
        border:none
    }
}
#trips section a .departureDay small,#trips section a .productPrice small{
    font-family:"Microsoft JhengHei UI", "Microsoft JhengHei", "PingFang TC", "HeiTi TC", "sans-serif";
    display:block;
    color:#333;
    text-align:left;
    line-height:120%
}
#trips section a .departureDay>span,#trips section a .productPrice>span{
    display:inline-block
}
#trips section a .departureDay{
    text-align:left
}
@media (max-width: 660px){
    #trips section a .departureDay{
        font-family:"Microsoft JhengHei UI", "Microsoft JhengHei", "PingFang TC", "HeiTi TC", "sans-serif"
    }
    #trips section a .departureDay small{
        display:inline-block;
        line-height:25px;
        font-size:16px
    }
    #trips section a .departureDay small:after{
        content:'：'
    }
}
#trips section a .departureDay>span{
    color:#333;
    font-size:15px;
    text-align:left;
    display:-webkit-box;
    -webkit-line-clamp:4;
    -webkit-box-orient:vertical;
    overflow:hidden;
    max-height:4.8em;
    line-height:1.2em
}
@media (max-width: 660px){
    #trips section a .departureDay>span{
        font-size:16px;
        display:inline
    }
}
@media (max-width: 660px){
    #trips section a .productPrice{
        margin-top:9px;
        height:60px;
        line-height:60px;
        background-color:#F0F0F0
    }
    #trips section a .productPrice small{
        display:none
    }
}
#trips section a .productPrice span{
    color:#D90000;
    font-size:12px
}
#trips section a .productPrice span strong{
    display:inline-block;
    font-weight:500;
    vertical-align:middle;
    font-size:32px;
    line-height:1.2;
    margin-left:0.1em;
    margin-right:0.1em
}
#trips section a:hover{
    box-shadow:0 6px 16px rgba(0,0,0,0.8);
    text-decoration:none;
    transform:translateY(-4px)
}
#trips section:nth-child(1) a .area span{
    background-color:#2098DB
}
#trips section:nth-child(2) a .area span{
    background-color:#2EA29A
}
#trips section:nth-child(3) a .area span{
    background-color:#558657
}
#trips section:nth-child(4) a .area span{
    background-color:#F5AE00
}
#trips section:nth-child(5) a .area span{
    background-color:#E76C00
}
#trips section:nth-child(6) a .area span{
    background-color:#DF000A
}
#trips section:nth-child(7) a .area span{
    background-color:#DC167A
}
#trips section:nth-child(8) a .area span{
    background-color:#2098DB
}
#trips section:nth-child(9) a .area span{
    background-color:#2EA29A
}
#trips section:nth-child(10) a .area span{
    background-color:#558657
}
#trips section:nth-child(11) a .area span{
    background-color:#F5AE00
}
#trips section:nth-child(12) a .area span{
    background-color:#E76C00
}
#trips section:nth-child(13) a .area span{
    background-color:#DF000A
}
#trips section:nth-child(14) a .area span{
    background-color:#DC167A
}
#trips section:first-child{
    margin-top:0
}
#trips section.loading:before{
    position:absolute;
    z-index:1;
    content:'';
    width:18px;
    height:6px;
    top:50%;
    left:50%;
    margin-top:25px;
    margin-left:-8px;
    border:1px solid #000;
    background-image:url(data:image/gif;
    base64,R0lGODlhEAAEAJEAAP///5mZmQAAAAAAACH/C05FVFNDQVBFMi4wAwEAAAAh/wtYTVAgRGF0YVhNUDw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQyIDc5LjE2MDkyNCwgMjAxNy8wNy8xMy0wMTowNjozOSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo1NzJiZDA0MS02NmYzLTk0NDMtOTY4Ni03NTBjMTlkOTY3YmYiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MDQ2N0U5QkQwRDNBMTFFOEE3RDg5RDdBRkI4RjI1NjMiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MDQ2N0U5QkMwRDNBMTFFOEE3RDg5RDdBRkI4RjI1NjMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjU3MmJkMDQxLTY2ZjMtOTQ0My05Njg2LTc1MGMxOWQ5NjdiZiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo1NzJiZDA0MS02NmYzLTk0NDMtOTY4Ni03NTBjMTlkOTY3YmYiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4B//79/Pv6+fj39vX08/Lx8O/u7ezr6uno5+bl5OPi4eDf3t3c29rZ2NfW1dTT0tHQz87NzMvKycjHxsXEw8LBwL++vby7urm4t7a1tLOysbCvrq2sq6qpqKempaSjoqGgn56dnJuamZiXlpWUk5KRkI+OjYyLiomIh4aFhIOCgYB/fn18e3p5eHd2dXRzcnFwb25tbGtqaWhnZmVkY2JhYF9eXVxbWllYV1ZVVFNSUVBPTk1MS0pJSEdGRURDQkFAPz49PDs6OTg3NjU0MzIxMC8uLSwrKikoJyYlJCMiISAfHh0cGxoZGBcWFRQTEhEQDw4NDAsKCQgHBgUEAwIBAAAh+QQEFAAAACwAAAAAEAAEAAACD4SPacICAcOLq014pdqnAAAh+QQEFAAAACwBAAEACQACAAACB4wDonK4UgAAIfkEBBQAAAAsBgABAAkAAgAAAgeMA6JyuFIAACH5BAQKAAAALAYAAQAJAAIAAAIHlAWhcbhRAAA7);
    box-shadow:0 0 4px rgba(0,0,0,0.5)
}
/*# sourceMappingURL=main.css.map */