/* Have fun adding your style here :) - PS: At all times this file should contain a comment or a rule, otherwise opera might act buggy :( */

/* General Custom CSS */




/*
Desktop Styles
================================================== */
/* Note: Add new css to the media query below that you want to only effect the desktop view of your site */

@media only screen and (min-width: 768px) {
  /* Add your Desktop Styles here */

}

/*
@keyframes color_ccnda{      0%{background-position:0}      to{background-position:500%}    }    .devote_ccnda{position:relative;display:block;background:#fff;border:none;border-radius:100px;box-shadow:0 24px 50px -20px rgba(0,0,0,.5);margin:19px auto 0;min-width:250px;line-height:60px;font-size:25px;text-decoration:none;text-align:center;vertical-align:middle;color:#fff;white-space:wrap;z-index:2;cursor:pointer}

@media screen and (min-width:640px){    .devote_ccnda{margin:0 auto;font-size:30px}    }    .devote_ccnda:before{display:block;background:linear-gradient(90deg,#f36,#61c2f0,#f441a5,#ffeb3b,#f36);background-size:500%;border-radius:100px;content:"";position:absolute;top:-2px;left:-2px;right:-2px;bottom:-2px;z-index:-1;opacity:.8;filter:blur(10px);animation:color_ccnda 28s linear infinite;transition:all .35s}    .devote_ccnda:hover:before{top:-8px;left:-8px;right:-8px;bottom:-8px;opacity:1;animation:color_ccnda 8s linear infinite}*/

    @keyframes color_ccnda{
     0%{
        background-position:0
    }
     to{
        background-position:500%
    }
}
 .devote_ccnda{
    position:relative;
    display:block;
    background:#fff;
    border:none;
    border-radius:100px;
    box-shadow:0 2px 25px -10px rgba(0,0,0,.5);/*0 24px 50px -20px rgba(0,0,0,.5);*/
    margin:19px auto 0;
    min-width:140px; /*165*/
    line-height:40px; /*50*/
    font-size:18px; /*23*/
    text-decoration:none;
    text-align:center;
	vertical-align:middle;
    color:#fff;
    white-space:wrap;
    z-index:2;
    cursor:pointer
}

/*500-*/
@media screen and (max-width: 500px){
     .devote_ccnda{
        margin:0 auto;
        font-size:24px;
		line-height:50px; /*50*/
    }
}
/*640+*/
@media screen and (min-width:640px){
     .devote_ccnda{
        margin:0 auto;
        font-size:18px;
		max-width: 200px;
    }
}
/*螢幕寬度在 400px ~ 700px 之間，就套用這些 css 設定*/
/*@media screen and (min-width: 400px) and (max-width: 700px) {*/
/*如果螢幕視窗為直立*/
@media screen and  (orientation: portrait) {
  /*css 設定寫在此*/
}
	
.devote_ccnda:before{
    /*display:block;background:linear-gradient(90deg,#f36,#61c2f0,#f441a5,#ffeb3b,#f36);background-size:500%;*/
	 /*https://coolors.co/30aee8-1ff3eb-1986ff-4be3ff-2073ff
	   https://coolors.co/2073ff-0096ff-0e35ff-15c6fe-2073ff
	 https://coolors.co/1854ba-0096ff-071974-15c6fe-1854ba*/
	display:block;background:linear-gradient(90deg,#1854ba,#0096ff,#071974,#15c6fe,#1854ba);background-size:500%;
    border-radius:100px;
    content:"";
    position:absolute;
    top:-2px;
    left:-2px;
    right:-2px;
    bottom:-2px;
    z-index:-1;
    opacity:.8;
    filter:blur(0px);
    animation:color_ccnda 120s linear infinite;/*28*/
    transition:all .35s;
/*  	-webkit-animation: down 2s infinite;
    animation: down 2s infinite;  */
}

.devote_ccnda:hover:before{
	 /*display:block;background:linear-gradient(90deg,#f36,#61c2f0,#f441a5,#ffeb3b,#f36);background-size:500%;*/
	display:block;background:linear-gradient(90deg,#2073ff,#0096ff,#0E35FF,#15c6fe,#2073ff);background-size:500%;
    top:-8px;
    left:-8px;
    right:-8px;
    bottom:-8px;
    opacity:1;
    animation:color_ccnda 12s linear infinite;/*8*/
}

/*
 https://www.walkerland.com.tw/event/2018/curry/intro_1.php?sid=1
    -webkit-animation: down 2s infinite;
    animation: down 2s infinite;

@-webkit-keyframes down {
    0% {opacity: 0;}
    30% {opacity: 1;}
    60% {box-shadow: 0 0 0 14px rgba(255,178,57,.2); opacity: .2;}
    100% {opacity: 0;}
}
@keyframes down {
    0% {opacity: 0;}
    30% {opacity: 1;}
    60% {box-shadow: 0 0 0 14px rgba(255,178,57,.2); opacity: .2;}
    100% {opacity: 0;}
}
*/

@-webkit-keyframes down {
/*     0% {opacity: 0;} */
/*     30% {opacity: 1;} */
/*     60% {box-shadow: 0 0 0 14px rgba(255,178,57,.2); opacity: .2;} */
/*     100% {opacity: 0;} */
}
/* @keyframes down {
    0% {opacity: 0.5;}
    30% {opacity: 1;}
    60% {box-shadow: 0 0 0 14px linear-gradient(90deg,#2073ff,#0096ff,#0E35FF,#15c6fe,#2073ff); opacity: .2;}
    100% {opacity: 0.5;}
} */

/*
Mobile Styles
================================================== */
/* Note: Add new css to the media query below that you want to only effect the Mobile and Tablet Portrait view */

@media only screen and (max-width: 767px) {
  /* Add your Mobile Styles here */

}