*{ font-family: 'Noto Sans TC', "微軟正黑體", sans-serif;}
html,body{ margin: 0; padding: 0; background: #fdfaf0 center top; background-image:url(../images/bg_dot.png), url(../images/bg_cloud.png);}
img{ vertical-align:middle;}
.w1200{ width: 1200px; max-width: 100%;}
.ro_20th{ position: fixed; top: 50px; left: 50px; display: inline-block; width: 150px; z-index: 9;}
.ro_20th img{ max-width: 100%;}

.vote_top_bg .ro_20th{ position: absolute; top: 15px;}
@media (max-width:768px){
    html,body{ background-image:url(../images/bg_dot.png); background-size: 150px;}
    .ro_20th{ width: 100px; top: 20px; left: 20px;}
}

@media (max-width:480px){
    html,body{ background-image:url(../images/bg_dot.png); background-size: 150px;}
    .ro_20th{ position: fixed; width: 55px; top: 6px; left: 9px; bottom: unset; right: unset;}
    .vote_top_bg .ro_20th{ position: absolute;}
}



/*--主視覺--*/
.top_bg{ position: relative; height: 730px; margin: 0 auto; background: #4cb2dc; overflow: hidden;}
.top_bg:before{ position: absolute; top: 0; left: 0; content: ""; width: 50vw; height: 730px; background: #ecffed; }
@media (max-width:1200px){
    .top_bg{ height: auto;}
}


.top_bg01{ position: absolute; top: 0; left: 50%; width: 2000px; height: 730px; transform: translate(-50%,0); background: url(../images/top_bg01.png); animation: 1.5s top_bg01_d infinite;}
.top_bg02{ position: absolute; top: 0; left: 50%; width: 2000px; height: 730px; transform: translate(-50%,0); background: url(../images/top_bg02.png); animation: 1.5s top_bg02_d infinite;}
.top_bg03{ position: absolute; top: 0; left: 50%; width: 2000px; height: 730px; transform: translate(-50%,0); background: url(../images/top_bg03.png); animation: 1.5s top_bg03_d infinite;}
.bg_dot{ position: absolute; top: 0; left: 50%; width: 100%; height: 730px; transform: translate(-50%,0); background: url(../images/bg_dot.png) center top;}

@keyframes top_bg01 {
    0%{ transform: translate(-50%,0);}
    50%{ transform: translate(-51%,0);}
    100%{ transform: translate(-50%,0);}
}

@keyframes top_bg02 {
    0%{ transform: translate(-50%,0);}
    50%{ transform: translate(-49%,0);}
    100%{ transform: translate(-50%,0);}
}

@keyframes top_bg03 {
    0%{ transform: translate(-50%,0);}
    50%{ transform: translate(-51%,0);}
    100%{ transform: translate(-50%,0);}
}

@media (max-width:480px){
    .top_bg01{ height: 120vh; transform: translate(-35%,0); background-size: cover; animation:none;}
    .top_bg02{ height: 120vh; transform: translate(-55%,0); background-size: cover; animation:none;}
    .top_bg03{ height: 120vh; background-size: cover;}
    .bg_dot{ height: 120vh; background-size: 150px;}
}


.top_bg_main{ position: relative; margin: 0 auto;}
.top_bg_cover{ max-width: 100%;}
.logo{ position: absolute; top: 10.7%; right: 2.8%; width: 50%; z-index: 1;}

.top_pic01{ position: absolute; top: 0; right: -4.833%; width: 29.9166%; animation: 1.5s top_pic01 infinite;}
@keyframes top_pic01 {
    0%{ transform-origin:bottom; transform:skewX(2deg) scaleY(1);}
    25%{ transform-origin:bottom; transform:skewX(0deg) scaleY(0.95);}
    50%{  transform-origin:bottom; transform:skewX(-2deg) scaleY(1);}
    75%{ transform-origin:bottom; transform:skewX(0deg) scaleY(0.95);}
    100%{  transform-origin:bottom; transform:skewX(2deg) scaleY(1);}
}

.top_pic02{ display: none; position: absolute; top: 6.85%; left: -25.5%; width: 12.916%;}
.top_pic03{ position: absolute; top: 56.44%; right: -23%; width: 9.66%;}

.top_set01{ position: absolute; top: 0; left: -10.25%; width: 66.166%; animation: 1.5s top_set01 infinite;}
@keyframes top_set01 {
    0%{ transform-origin:bottom; transform:skewX(2deg) scaleY(1);}
    25%{ transform-origin:bottom; transform:skewX(0deg) scaleY(0.95);}
    50%{  transform-origin:bottom; transform:skewX(-2deg) scaleY(1);}
    75%{ transform-origin:bottom; transform:skewX(0deg) scaleY(0.95);}
    100%{  transform-origin:bottom; transform:skewX(2deg) scaleY(1);}
}
.top_set02{ position: absolute; top: 0; left: -6.75%; width: 64.75%; animation: 1.5s top_set02 infinite;}
@keyframes top_set02 {
    0%{ transform-origin:bottom; transform:skewX(2deg) scaleY(1);}
    25%{ transform-origin:bottom; transform:skewX(0deg) scaleY(0.95);}
    50%{  transform-origin:bottom; transform:skewX(-2deg) scaleY(1);}
    75%{ transform-origin:bottom; transform:skewX(0deg) scaleY(0.95);}
    100%{  transform-origin:bottom; transform:skewX(2deg) scaleY(1);}
}
.top_set03{ position: absolute; top: 0; left: -11.66%; width: 65.5%; animation: 1.5s top_set03 infinite;}
@keyframes top_set03 {
    0%{ transform-origin:bottom; transform:skewX(2deg) scaleY(1);}
    25%{ transform-origin:bottom; transform:skewX(0deg) scaleY(0.95);}
    50%{  transform-origin:bottom; transform:skewX(-2deg) scaleY(1);}
    75%{ transform-origin:bottom; transform:skewX(0deg) scaleY(0.95);}
    100%{  transform-origin:bottom; transform:skewX(2deg) scaleY(1);}
}

@media (max-width:480px){
    .top_bg_main{ height: auto;}
    .top_bg_cover{ display: none;}
    .logo{ position: static; width: 90%; margin: 60px 5% -20px 5%;}
    .top_pic01{ display: none;}

    .top_set01,.top_set02,.top_set03{ position: static; width: 100%;}
}

.top_poring01{ position: absolute; bottom: 13.28%; right:23.75%; width: 15.416%; animation: 9s top_poring01 infinite;}
@keyframes top_poring01 {
    0%{ bottom: -22%; right:17.7%; transform-origin:bottom; transform:skewX(0deg) scaleY(1);}
    10%{ bottom: 13.3%; right:24.7%; transform-origin:bottom; transform:skewX(0deg) scaleY(1);}
    11.25%{ bottom: 13.0%; right:25; transform-origin:bottom; transform:skewX(2deg) scaleY(1.1);}
    12.5%{ bottom: 14.3%; right:25.7%; transform-origin:bottom; transform:skewX(2deg) scaleY(1.1);}
    13.75%{ bottom: 14%; right:26%; transform-origin:bottom; transform:skewX(0deg) scaleY(1);}
    15%{ bottom: 15%; right:26.7%; transform-origin:bottom; transform:skewX(2deg) scaleY(1.1);}
    18.75%{ bottom: 14.7%; right:27%; transform-origin:bottom; transform:skewX(2deg) scaleY(1.1);}
    25%{ bottom: -22%; right:37.7%; transform-origin:bottom; transform:skewX(0deg) scaleY(1);}
    100%{ bottom: -22%; right:37.7%; transform-origin:bottom; transform:skewX(0deg) scaleY(1);}
}

.top_poring02{ position: absolute; bottom: -22%; right:15.7%; width: 15.416%; animation: 9s top_poring02 infinite;}
@keyframes top_poring02 {
    0%{ bottom: -22%; right:37.7%; transform-origin:bottom; transform:skewX(0deg) scaleY(1);}
    25%{ bottom: -22%; right:37.7%; transform-origin:bottom; transform:skewX(0deg) scaleY(1);}
    35%{ bottom: 13.3%; right:27%; transform-origin:bottom; transform:skewX(0deg) scaleY(1);}
    36.25%{ bottom: 13.0%; right:26.7; transform-origin:bottom; transform:skewX(2deg) scaleY(1.1);}
    37.5%{ bottom: 14.3%; right:26%; transform-origin:bottom; transform:skewX(2deg) scaleY(1.1);}
    38.75%{ bottom: 14%; right:25.7%; transform-origin:bottom; transform:skewX(0deg) scaleY(1);}
    40%{ bottom: 15%; right:25%; transform-origin:bottom; transform:skewX(2deg) scaleY(1.1);}
    43.75%{ bottom: 14.7%; right:24.7%; transform-origin:bottom; transform:skewX(2deg) scaleY(1.1);}
    50%{ bottom: -22%; right:17.7%; transform-origin:bottom; transform:skewX(0deg) scaleY(1);}
    100%{ bottom: -22%; right:17.7%; transform-origin:bottom; transform:skewX(0deg) scaleY(1);}
}

.top_poring03{ position: absolute; bottom: -22%; right:15.7%; width: 15.416%; animation: 9s top_poring03 infinite;}
@keyframes top_poring03 {
    0%{ bottom: -22%; right:17.7%; transform-origin:bottom; transform:skewX(0deg) scaleY(1);}
    50%{ bottom: -22%; right:17.7%; transform-origin:bottom; transform:skewX(0deg) scaleY(1);}
    60%{ bottom: 13.3%; right:24.7%; transform-origin:bottom; transform:skewX(0deg) scaleY(1);}
    61.25%{ bottom: 13.0%; right:25; transform-origin:bottom; transform:skewX(2deg) scaleY(1.1);}
    62.5%{ bottom: 14.3%; right:25.7%; transform-origin:bottom; transform:skewX(2deg) scaleY(1.1);}
    63.75%{ bottom: 14%; right:26%; transform-origin:bottom; transform:skewX(0deg) scaleY(1);}
    65%{ bottom: 15%; right:26.7%; transform-origin:bottom; transform:skewX(2deg) scaleY(1.1);}
    68.75%{ bottom: 14.7%; right:27%; transform-origin:bottom; transform:skewX(2deg) scaleY(1.1);}
    75%{ bottom: -22%; right:37.7%; transform-origin:bottom; transform:skewX(0deg) scaleY(1);}
    100%{ bottom: -22%; right:37.7%; transform-origin:bottom; transform:skewX(0deg) scaleY(1);}
}

.top_poring04{ position: absolute; bottom: -22%; right:15.7%; width: 15.416%; animation: 9s top_poring04 infinite;}
@keyframes top_poring04 {
    0%{ bottom: -22%; right:37.7%; transform-origin:bottom; transform:skewX(0deg) scaleY(1);}
    75%{ bottom: -22%; right:37.7%; transform-origin:bottom; transform:skewX(0deg) scaleY(1);}
    85%{ bottom: 13.3%; right:27%; transform-origin:bottom; transform:skewX(0deg) scaleY(1);}
    86.25%{ bottom: 13.0%; right:26.7; transform-origin:bottom; transform:skewX(2deg) scaleY(1.1);}
    87.5%{ bottom: 14.3%; right:26%; transform-origin:bottom; transform:skewX(2deg) scaleY(1.1);}
    88.75%{ bottom: 14%; right:25.7%; transform-origin:bottom; transform:skewX(0deg) scaleY(1);}
    90%{ bottom: 15%; right:25%; transform-origin:bottom; transform:skewX(2deg) scaleY(1.1);}
    93.75%{ bottom: 14.7%; right:24.7%; transform-origin:bottom; transform:skewX(2deg) scaleY(1.1);}
    100%{ bottom: -22%; right:17.7%; transform-origin:bottom; transform:skewX(0deg) scaleY(1);}
}

@media (max-width:480px){
    .top_poring01{ animation: 9s top_poring01_m infinite;}
    .top_poring03{ animation: 9s top_poring03_m infinite;}
    .top_poring04{ animation: 9s top_poring04_m infinite;}
    .top_poring01,.top_poring02,.top_poring03,.top_poring04{ width: 20%;}
}

@keyframes top_poring01_m {
    0%{ bottom: -22%; right:17.7%; transform-origin:bottom; transform:skewX(0deg) scaleY(1);}
    10%{ bottom: 13.3%; right:47.7%; transform-origin:bottom; transform:skewX(0deg) scaleY(1);}
    11.25%{ bottom: 13.0%; right:48; transform-origin:bottom; transform:skewX(2deg) scaleY(1.1);}
    12.5%{ bottom: 14.3%; right:48.7%; transform-origin:bottom; transform:skewX(2deg) scaleY(1.1);}
    13.75%{ bottom: 14%; right:49%; transform-origin:bottom; transform:skewX(0deg) scaleY(1);}
    15%{ bottom: 15%; right:49.7%; transform-origin:bottom; transform:skewX(2deg) scaleY(1.1);}
    18.75%{ bottom: 14.7%; right:50%; transform-origin:bottom; transform:skewX(2deg) scaleY(1.1);}
    25%{ bottom: -22%; right:87.7%; transform-origin:bottom; transform:skewX(0deg) scaleY(1);}
    100%{ bottom: -22%; right:87.7%; transform-origin:bottom; transform:skewX(0deg) scaleY(1);}
}

@keyframes top_poring03_m {
    0%{ bottom: -22%; right:22.7%; transform-origin:bottom; transform:skewX(0deg) scaleY(1);}
    50%{ bottom: -22%; right:22.7%; transform-origin:bottom; transform:skewX(0deg) scaleY(1);}
    60%{ bottom: 13.3%; right:29.7%; transform-origin:bottom; transform:skewX(0deg) scaleY(1);}
    61.25%{ bottom: 13.0%; right:30; transform-origin:bottom; transform:skewX(2deg) scaleY(1.1);}
    62.5%{ bottom: 14.3%; right:30.7%; transform-origin:bottom; transform:skewX(2deg) scaleY(1.1);}
    63.75%{ bottom: 14%; right:31%; transform-origin:bottom; transform:skewX(0deg) scaleY(1);}
    65%{ bottom: 15%; right:31.7%; transform-origin:bottom; transform:skewX(2deg) scaleY(1.1);}
    68.75%{ bottom: 14.7%; right:32%; transform-origin:bottom; transform:skewX(2deg) scaleY(1.1);}
    75%{ bottom: -22%; right:42.7%; transform-origin:bottom; transform:skewX(0deg) scaleY(1);}
    100%{ bottom: -22%; right:42.7%; transform-origin:bottom; transform:skewX(0deg) scaleY(1);}
}

@keyframes top_poring04_m {
    0%{ bottom: -22%; right:47.7%; transform-origin:bottom; transform:skewX(0deg) scaleY(1);}
    75%{ bottom: -22%; right:47.7%; transform-origin:bottom; transform:skewX(0deg) scaleY(1);}
    85%{ bottom: 13.3%; right:27%; transform-origin:bottom; transform:skewX(0deg) scaleY(1);}
    86.25%{ bottom: 13.0%; right:26.7; transform-origin:bottom; transform:skewX(2deg) scaleY(1.1);}
    87.5%{ bottom: 14.3%; right:26%; transform-origin:bottom; transform:skewX(2deg) scaleY(1.1);}
    88.75%{ bottom: 14%; right:25.7%; transform-origin:bottom; transform:skewX(0deg) scaleY(1);}
    90%{ bottom: 15%; right:25%; transform-origin:bottom; transform:skewX(2deg) scaleY(1.1);}
    93.75%{ bottom: 14.7%; right:24.7%; transform-origin:bottom; transform:skewX(2deg) scaleY(1.1);}
    100%{ bottom: -22%; right:7.7%; transform-origin:bottom; transform:skewX(0deg) scaleY(1);}
}


/*--登入區--*/
.login{ position: relative; padding: 60px 0 70px; background: #fff; text-align: center;}
.login::after{ content: ""; position: absolute; bottom: -23px; left: 0; width: 100%; height: 23px; background: url(../images/bg_wave.png) left top; transform: rotate(180deg); animation: 3s bg_wave linear infinite;}
.login::before{ content: ""; position: absolute; top: -23px; left: 0; width: 100%; height: 23px; background: url(../images/bg_wave.png) left top; animation: 3s bg_wave linear infinite;}
.login font{ font-size: 0.6em; color: #f27474;}
@keyframes bg_wave {
    0%{ background-position: 0;}
    100%{ background-position: 162px;}
}

.login span{ display: block; padding: 10px 0; font-size: 1.5em; font-weight: bold;}
.login p{ margin: 40px 0 0 0;}
.login p a{ display: inline-block; margin: 0 5px; width: 155px; line-height: 50px; text-decoration: none; color: #fff; font-size: 1.25em; font-weight: bolder; transition: 0.3s;}
.login p a:nth-child(1){ background: #ff7979; border-radius: 10px; box-shadow: 0px 5px 0px 0px #e35555;}
.login p a:nth-child(1):hover{ box-shadow: 0px 0px 0px 3px #d4d4d4, 0px 5px 0px 0px #e35555 inset; transform: translateY(3px);}
.login p a:nth-child(2){ background: #7ed4dd; border-radius: 10px; box-shadow: 0px 5px 0px 0px #4cb2dc;}
.login p a:nth-child(2):hover{ box-shadow: 0px 0px 0px 3px #d4d4d4, 0px 5px 0px 0px #4cb2dc inset; transform: translateY(3px);}
.login p a:nth-child(3){ background: #f68ba4; border-radius: 10px; box-shadow: 0px 5px 0px 0px #e46784;}
.login p a:nth-child(3):hover{ box-shadow: 0px 0px 0px 3px #d4d4d4, 0px 5px 0px 0px #e46784 inset; transform: translateY(3px);}
.login p a:nth-child(4){ background: #969696; border-radius: 10px; box-shadow: 0px 5px 0px 0px #7e7e7e;}
.login p a:nth-child(4):hover{ box-shadow: 0px 0px 0px 3px #d4d4d4, 0px 5px 0px 0px #7e7e7e inset; transform: translateY(3px);}
.login p a:nth-child(5){ background: #4eaec3; border-radius: 10px; box-shadow: 0px 5px 0px 0px #117e96;}
.login p a:nth-child(5):hover{ box-shadow: 0px 0px 0px 3px #d4d4d4, 0px 5px 0px 0px #117e96 inset; transform: translateY(3px);}
.login b{ display: inline-block; margin: 20px 0 0 0; padding: 20px 50px; background: #fdfaf0; border-radius: 10px; color: #b4b4b4; font-size: 1.25em;}
.login>a{ display: inline-block; margin: 20px 0 0 0; color: #4cb2dc;}

@media (max-width:768px){
    .login img{ width: 120px;}
    .login span{ font-size: 1.25em;}
    .login p a{ margin: 0; width: 110px; line-height: 40px; font-size: 1em;}
}

@media (max-width:480px){
    .login{  padding: 30px 0 35px;}
    .login img{ width: 80px;}
    .login p{ display: flex; flex-wrap: wrap; justify-content: space-evenly; margin: 20px 0 0 0;}
    .login p a{ width: 40%; margin: 10px 0;}
}



/*--活動選單--*/
.event{ margin: 100px auto 80px; padding: 0 50px;}
.event_btn{ position: relative;}
.event_btn img{ max-width: 100%; cursor: pointer; transition: .3s;}
.event_btn img+img{ position: absolute; top: 0; left: 0; opacity: 0;}
.event_btn img+img:hover{ opacity: 1;}
.event_btn .btn_c{ opacity: 1; animation: 1s btn_c infinite;}
.slick-current .event_btn img+img{ opacity: 1;}
.event_btn:hover .btn_c,.slick-current .event_btn .btn_c{ animation: 1s btn_c infinite;}
@keyframes btn_c {
    from, to {
      transform: scale(1); }
    25% {
      transform: scale(0.97, 1.03); transform-origin:76% center;}
    50% {
      transform: scale(1.03, 0.97); transform-origin:76% center;}
    75% {
      transform: scale(0.97, 1.03); transform-origin:76% center;} 
    }


@media (max-width:768px){
    .event{ margin: 60px auto 40px; padding: 0 50px;}
}

@media (max-width:480px){
    .event{ width: 100%; position: fixed; top: 0; left: 0; margin: 0; padding: 5px 5px 5px 70px; z-index: 8; background: #7ed4dd;}
    .event_btn img{ display: inline-block;}
    .event_btn img+img:hover{}
    
    .slick-current .event_btn img+img{ opacity: 1;}
}



/*--活動內容--*/
.event_box{ margin: 0 auto; padding: 0; box-sizing: border-box;}
.event_main{ padding: 0 0 30px 0; text-align: center;}
.event_main img{ display: block; max-width: 100%; margin: 0 auto;}
.event_main img.event_step{ margin: 50px auto;}
.event_main img.event_step_m{ display: none;}
.event_main h2{ margin: 0 40px 50px 40px;}
.event_main h3{ margin: 0 auto; width: 240px; line-height: 60px; border: 5px solid #000; border-radius: 60px; font-size: 1.875em;}
.event_main p{ display: flex; align-items: center; margin: 40px auto 0; padding: 0 40px; width: 1080px; max-width: 100%; font-size: 1.5em; font-weight: bolder; text-align: justify; box-sizing: border-box;}
.event_main p img{ margin: 0 20px 0 0;}
.event_main hr{ margin:40px auto; width: 1000px; max-width: calc(100% - 80px); border: none; border-bottom: 5px dashed #000; box-sizing: border-box;}
.event_main ul{ width: 980px; max-width: calc(100% - 100px); margin: 0 auto 30px; padding: 0; list-style: decimal-leading-zero; transform: translateX(20px);}
.event_main li{ margin: 0; padding: 0 0 15px 20px; text-align: left; font-weight: bold;}
.event_main li a{ color: #4cb2dc;}
.event_main ul ul{ max-width: 100%; list-style: decimal; margin: 0 auto;}
.event_main li li{ padding: 10px 0 0 0;}
.event_main li.ipt{ color: #f27474;}
.event_main li span{ color: #f27474;}
.event_main .link{ display: flex; justify-content: center; margin: 0 40px;}
.event_main .link>div{ position: relative; cursor: pointer;}
.event_main .link>div img+img{ position: absolute; top: 0; left: 0; opacity: 0; transition: .3s;}
.event_main .link>div img+img:hover{ opacity: 1;}

.event_main .gift_box{ position: relative; margin: 100px 0; padding: 60px 0 70px; background: #fff;}
.event_main .gift_box::after{ content: ""; position: absolute; bottom: -23px; left: 0; width: 100%; height: 23px; background: url(../images/bg_wave.png) left top; transform: rotate(180deg); animation: 3s bg_wave linear infinite;}
.event_main .gift_box::before{ content: ""; position: absolute; top: -23px; left: 0; width: 100%; height: 23px; background: url(../images/bg_wave.png) left top; animation: 3s bg_wave linear infinite;}
.event_main .gift_box>div{ display: flex; justify-content: space-between; width: 1000px; max-width: calc(100% - 80px); margin: 50px auto;}
.event_main .gift_box>div img{ width: 22%; border:5px solid #f1f1f1; border-radius: 10px; cursor: pointer; transition: .3s;}
.event_main .gift_box>div img:hover{ border:5px solid #ffefc6; box-shadow: 0px 0px 10px 5px #ddd;}

.event_main .notice_box h3{ margin: 0 auto 50px;}
.event_main .drawtips{ max-width: calc(100% - 80px); margin: 0 auto 50px;}

.bgm_download{ display: flex; flex-wrap: wrap; justify-content: center; margin: 0 0 60px;}
.bgm_download>div{ position: relative; width: 250px; border-radius: 10px; background: #fff;}
.bgm_download>div+div{ margin: 0 0 0 30px;}
.bgm_download audio{ display: none;}
.bgm_download .disc64,.bgm_download .disc66{  animation: 9s disc_turn linear infinite;}
.bgm_download .disc{ animation-play-state: paused;}
.bgm_download span{ display: none;}
@keyframes disc_turn {
    0%{ transform:rotate(0deg);}
    100%{ transform:rotate(360deg);}
}
.bgm_download .pause{ position: absolute; top: 0; left: 0; display: none; cursor: pointer; transition: .3s;}
.bgm_download .start{ position: absolute; top: 0; left: 0; cursor: pointer; transition: .3s;}
.bgm_download .pause:hover,.bgm_download .start:hover{ opacity: .3;}

.bgm_download p{ margin: 0; justify-content: center;}
.bgm_download a{ display: block; margin: 20px auto; width: 155px; line-height: 50px; text-decoration: none; color: #fff; font-size: 1.25em; font-weight: bolder; background: #ff7979; border-radius: 10px; text-align: center; box-shadow: 0px 5px 0px 0px #e35555; transition: 0.3s;}
.bgm_download a:hover{ box-shadow: 0px 0px 0px 3px #d4d4d4, 0px 5px 0px 0px #e35555 inset; transform: translateY(3px);}



@media (max-width:768px){
    .event_box{ padding: 0x;}
    .event_main p{ padding: 0 30px;}
    .event_main p img{ display: none;}

    .bgm_download>div{ width: 200px;}
    .bgm_download p{ font-size: 1em;}
    .bgm_download a{ margin: 20px auto; width: 110px; line-height: 40px; font-size: 1em;}
    .bgm_download span{ display: block; width: 100%; margin: 20px 0 0 0; font-size: 0.875em; color: #f27474;}
}

@media (max-width:480px){
    .event_main img{ max-width: 100%;}
    .event_main img.event_title{ margin: 50px 0 20px;}
    .event_main img.event_step{ display: none;}
    .event_main img.event_step_m{ display: block;}
    .event_main h3{ width: 200px; line-height: 40px; border: 3px solid #000; font-size: 1.25em;}
    .event_main p{ margin: 20px 0 0; padding: 0 20px; font-size: 1.125em;}
    .event_main hr{ max-width: calc(100% - 40px); border-bottom: 3px dashed #000;}
    .event_main ul{ max-width: calc(100% - 60px); margin: 0 0 0 33px; font-size: 0.875em; transform: translateX(10px);}
    .event_main ul ul{ margin: 0 0 0 5px; font-size: 1em;}
    .event_main li li{ padding: 10px 20px 0 0;}
    .event_main .link{ margin: 0 20px;}
    .event_main .gift_box>div{ flex-wrap: wrap; max-width: calc(100% - 20px);}
    .event_main .gift_box>div img{ width: 46%; margin: 0 0 10px;}

    .event_main .drawtips{ max-width: calc(100% - 40px);}

    .bgm_download>div{ width: 45%;}
    .bgm_download>div+div{ margin: 0 0 0 10px;}
    .bgm_download p{ margin: 0; font-size: 1em;}
}



/*--彈窗--*/
.overlay{ display: none; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0,0,0,0.9); z-index: 9;}
.lightbox{ display: none; position: fixed; top: 50%; left: 50%; width: 600px; max-width: calc(100vw - 20px); max-height: 80vh; transform: translate(-50%,-50%); z-index: 10;}

.close { width: 46px; height: 46px; border-radius: 100%; border: 1px solid #c1fbed; cursor: pointer; position: relative; margin: 0 auto 20px; -webkit-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; }
.close:hover { -webkit-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); }
.close span { display: block; background-color: #c1fbed; width: 30px; height: 2px; position: absolute; }
.close span:nth-child(1) { left: 8px; top: 21px; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); }
.close span:nth-child(2) { left: 7px; top: 21px; -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); }

.lightbox_main{ padding: 0 0 50px; max-height: calc(80vh - 66px); border-radius: 30px; background: #fff; overflow-x: hidden; overflow-y: auto; box-sizing: border-box;}
.lightbox_main img{ max-width: 100%;}

.tabs{ margin: 0 60px;}
.tabs ul{ display: flex; justify-content: center; margin: 0; padding: 50px 0 30px; list-style: none;}
.tabs li{ margin: 0; padding: 0;}
.tabs li a{ text-decoration: none; color: #999; font-size: 1.25em; font-weight: bold; transition: .3s;}
.tabs li a mark{ color: #999; padding: 2px 10px; background: linear-gradient(transparent 40%, rgba(255,255,255,0) 60%, #f1f1f1 60%, #f1f1f1 90%, transparent 95%); transition: .5s;}
.tabs li a:hover mark{ color: #000; background: linear-gradient(transparent 40%, rgba(255,255,255,0) 60%, #ff7979 60%, #ff7979 90%, transparent 95%);}
.tabs li.ui-tabs-active a{ color: #000;}
.tabs li.ui-tabs-active a mark{ color: #000; background: linear-gradient(transparent 40%, rgba(255,255,255,0) 60%, #ff7979 60%, #ff7979 90%, transparent 95%);}

.tabs .gift_list{ display: flex; flex-wrap: wrap; justify-content: space-between;}
.tabs h4{ margin: 0 auto 20px; width: 100%; line-height: 40px; border-radius: 10px; background: #ffe49d; text-align: center;}
.tabs h4.green{ background: #a5dc86;}
.tabs .gift_list>div{ display: flex; flex-direction: column; margin: 0 0 20px; text-align: center; border: 3px solid #ffe49d; border-radius: 15px; box-sizing: border-box; overflow: hidden;}
.tabs .gift_list>div.w100{ width: 100%;}
.tabs .gift_list>div.green{ border: 3px solid #a5dc86;}
.tabs .gift_list>div.green p{ background: #eeffe5;}
.tabs .gift_list>div.green span{ background: #a5dc86; color: #26580a;}

.tabs .gift_list>div.w50{ width: 47%;}
.tabs .gift_list>div.w33{ width: 30%;}
.tabs .gift_list img{ border-radius: 20px 20px 0 0; overflow: hidden; box-sizing: border-box;}
.tabs .gift_list p{ flex: auto; margin: 0; padding: 10px 15px; text-align: center; background: #fdfaf1;}
.tabs .gift_list span{ display: block; background: #ffe49d; text-align: center; line-height: 40px; color: #856000;}
.tabs .gift_list i{ display: block; width: 100%; margin: -15px 0 35px 0; text-align: center; font-size: 0.875em; font-style: normal; color: #f27474;}

.lightbox_main::-webkit-scrollbar { width: 6px; background-color: transparent; }
.lightbox_main::-webkit-scrollbar-thumb { background-color: #feda74; border-radius: 3px;}

.lightbox_main .set{ margin: 50px 60px;}
.lightbox_main .set h4{ text-align: center; margin: 0 auto 20px; width: 100%; line-height: 40px; border-radius: 10px; background: #ffe49d; text-align: center;}
.lightbox_main .set span{ font-size: 0.85em; color: #e35555;}
.lightbox_main .set p{ border: 3px solid #fdfaf0; background: #fdfaf0; text-align: center; color: #f27474; margin: 0 0 10px; padding: 10px 20px; border-radius: 20px;}
.lightbox_main .set i{ display: block; font-style: inherit; font-size: 0.875em; margin: 10px 0 3px; font-weight: bold; color: #bfbfbf;}

.lightbox_main select{ position: relative; margin: 0 0 10px; padding: 0 20px; width: 100%; line-height: 40px; font-size: 1em; color: #333; box-shadow: none; border: 3px solid #f1f1f1; border-radius: 10px; background: transparent url(../images/icon_arrow.png) top right no-repeat; background-size: contain; appearance: none; -moz-appearance: none; -webkit-appearance: none; cursor: pointer; transition: .3s;}
.lightbox_main select:focus{ border: 3px solid #ffe49d; outline : 0;}
.lightbox_main input{ margin: 0 0 10px; padding: 0 20px; width: 100%; font-size: 1em; line-height: 40px; box-shadow: none; border: 3px solid #f1f1f1; border-radius: 10px; box-sizing: border-box; background: transparent url(../images/icon_pen.png) top right no-repeat; background-size: contain; appearance: none; -moz-appearance: none; -webkit-appearance: none; transition: .3s;}
.lightbox_main input:focus{ border: 3px solid #ffe49d; outline : 0;}

.lightbox_main select:disabled{ background: #f1f1f1; cursor: default;}
.lightbox_main input:disabled{ background: #f1f1f1;}

.lightbox_main input[type="file"]{ display: flex; align-items: center; height: 46px; background: transparent url(../images/icon_pic.png) top right no-repeat; background-size: contain;}
.lightbox_main input[type="file"]:disabled{ background: #f1f1f1;}

.lightbox_main input#copyBtn{ margin: 0 0 10px; padding: 0 20px; width: 100%; font-size: 0.875em; line-height: 40px; box-shadow: none; border: none; border-radius: 10px; box-sizing: border-box; background: #ffeded url(../images/icon_copy.png) top right no-repeat; color: #f27474; background-size: contain; appearance: none; -moz-appearance: none; -webkit-appearance: none; cursor: pointer;}


.lightbox_main .set input.team_number{ border: 3px solid #fdfaf0; background: #fdfaf0; text-align: center; color: #f27474;}

.lightbox_main .tabs .set h4{ border: none;}
.lightbox_main .tabs .set{ margin: 50px 0;}
.lightbox_main .tabs hr{ max-width: 100%;}
.lightbox_main .tabs ul.apply_notice{ max-width: calc(100% - 20px);}

.lightbox_main hr{ margin:40px auto; max-width: calc(100% - 130px); border: none; border-bottom: 5px dashed #000; box-sizing: border-box;}

.lightbox_main ul.apply_notice{ display: block; width: 100%; max-width: calc(100% - 150px); margin: 0 auto; padding: 0; list-style: decimal-leading-zero; border-bottom: none; transform: translateX(16px);}
.lightbox_main ul.apply_notice li{ margin: 0; padding: 0 0 15px 20px; text-align: left; font-weight: bold;}
.lightbox_main ul.apply_notice li a{ color: #4cb2dc;}

.lightbox_main a.apply_btn{ display: block; margin: 20px auto; width: 155px; line-height: 50px; text-decoration: none; color: #fff; font-size: 1.25em; font-weight: bolder; background: #ff7979; border-radius: 10px; text-align: center; box-shadow: 0px 5px 0px 0px #e35555; transition: 0.3s;}
.lightbox_main a.apply_btn:hover{ box-shadow: 0px 0px 0px 3px #d4d4d4, 0px 5px 0px 0px #e35555 inset; transform: translateY(3px);}


@media (max-width:768px){
    .tabs{ margin: 0 20px;}
    .lightbox_main a.apply_btn{ margin: 20px auto; width: 110px; line-height: 40px; font-size: 1em;}
}

@media (max-width:480px){
    .tabs ul{}
    .tabs li a{ font-size: 1em;}
    .tabs li a mark{ padding: 2px 4px;}
    .tabs .gift_list p{ font-size: 0.85em;}
    .tabs .gift_list>div{ width: 48%;}

    .lightbox_main .set{ margin: 50px 20px;}
    .lightbox_main select{ font-size: 0.85em;}
    .lightbox_main input{ font-size: 0.85em;}
    .lightbox_main input[type="file"]{padding: 10px 20px 0 20px;}

    .lightbox_main hr{ margin: 20px auto; max-width: calc(100% - 40px); border-bottom: 3px dashed #000;}
    .lightbox_main ul.apply_notice{ max-width: calc(100% - 60px); font-size: 0.875em;}
}



.gotop{ display: none; position: fixed; right: 20px; top: 50%; transform: translateY(-50%); cursor: pointer; z-index: 8;}
.gotop img{ max-width: 100%;}
.gotop .go_top_b1{ display: none; position: absolute; top: 45%; right: 15px; animation: 0.5s go_top_b1 linear infinite; opacity: 0; animation-delay: 0.1s;}
.gotop .go_top_b2{ display: none; position: absolute; top: 49%; right: 9px; transform: rotate(20deg); animation: 0.5s go_top_b2 linear infinite; opacity: 0;}

.gohome{ display: none; position: fixed; right: 20px; top: 50%; transform: translateY(75px); cursor: pointer; z-index: 8;}
.gohome img{ max-width: 100%;}
.gohome .go_top_b1{ display: none; position: absolute; top: 45%; right: 15px; animation: 0.5s go_top_b1 linear infinite; opacity: 0; animation-delay: 0.1s;}
.gohome .go_top_b2{ display: none; position: absolute; top: 49%; right: 9px; transform: rotate(20deg); animation: 0.5s go_top_b2 linear infinite; opacity: 0;}

@keyframes go_top_b1 {
    0%{ top: 45%; right: 15px; opacity: 0;}
    50%{ top: 42.5%; right: 12px; opacity: 1;}
    100%{ top: 40%; right: 10px; opacity: 0;}
}
@keyframes go_top_b2 {
    0%{ top: 51%; right: 9px; opacity: 0;}
    0%{ top: 49.5%; right: 7px; opacity: 1;}
    100%{ top: 48%; right: 5px; opacity: 0;}
}
.gotop:hover .go_top_b1,.gotop:hover .go_top_b2,.gohome:hover .go_top_b1,.gohome:hover .go_top_b2{ display: block;}

@media (max-width:768px){
    .gotop{ top: 100%; transform: translateY(-143px);}
    .gohome{ top: 100%; transform: translateY(-280px);}
}
@media (max-width:480px){
    .gotop{ width: 47px; right: 10px; transform: translateY(-87px);}
    .gohome{ width: 47px; right: 10px; transform: translateY(-160px);}
}


footer{ background-color: #4b392b;}




/*--main top_banner--*/
.vote_top_bg{ position: relative; max-width: 2000px; height: 460px; margin: 0 auto; background: #4cb2dc; overflow: hidden;}
.vote_top_bg img{ position: absolute; top: 100%; left: 50%; transform: translateX(-50%);}
.vote_top_bg .main_top_01{ animation: 1s main_top forwards; animation-delay: 0.3s;}
.vote_top_bg .main_top_02{ animation: 1s main_top forwards; animation-delay: 0.2s;}
.vote_top_bg .main_top_03{ animation: 1s main_top forwards; animation-delay: 0.1s;}
.vote_top_bg .main_top_04{ animation: 1s main_top forwards;}
.vote_top_bg .main_top_05{ animation: 1s main_top forwards;}
.vote_top_bg .main_top_06{ animation: 1s main_top forwards; animation-delay: 0.1s;}
.vote_top_bg .main_top_07{ animation: 1s main_top forwards; animation-delay: 0.2s;}
.vote_top_bg .main_top_08{ animation: 1s main_top forwards; animation-delay: 0.3s;}
@keyframes main_top {
    0%{ top: 100%;}
    70%{ top: -10%;}
    100%{ top: 0;}
}
.vote_top_bg .logo{ width: 500px; max-width: 90%; top: 20%;}
@media (max-width:768px){
.vote_top_bg>img{ max-width: 130%; top: unset; bottom: -100%;}
.vote_top_bg .main_top_01{ animation: 1s main_top_2 forwards; transform: translateX(-36%); animation-delay: 0.3s;}
.vote_top_bg .main_top_02{ animation: 1s main_top_2 forwards; transform: translateX(-36%); animation-delay: 0.2s;}
.vote_top_bg .main_top_03{ animation: 1s main_top_2 forwards; transform: translateX(-36%); animation-delay: 0.1s;}
.vote_top_bg .main_top_04{ animation: 1s main_top_2 forwards; transform: translateX(-62%);}
.vote_top_bg .main_top_05{ animation: 1s main_top_2 forwards; transform: translateX(-62%);}
.vote_top_bg .main_top_06{ animation: 1s main_top_2 forwards; transform: translateX(-62%); animation-delay: 0.1s;}
.vote_top_bg .main_top_07{ animation: 1s main_top_2 forwards; transform: translateX(-62%); animation-delay: 0.2s;}
.vote_top_bg .main_top_08{ animation: 1s main_top_2 forwards; transform: translateX(-62%); animation-delay: 0.3s;}
.vote_top_bg .logo{ top: 40px;}
}
@keyframes main_top_2 {
    0%{ bottom: -100%;}
    70%{ bottom: 10px;}
    100%{ bottom: 0;}
}
@media (max-width:480px){
.vote_top_bg{ height: 360px;}
.vote_top_bg .logo{ margin: 0;} 
}


/*--main_vote_tips--*/
.vote_tips{ position: relative; padding: 60px 0 70px; background: #fff; text-align: center;}
.vote_tips::after{ content: ""; position: absolute; bottom: -23px; left: 0; width: 100%; height: 23px; background: url(../images/bg_wave.png) left top; transform: rotate(180deg); animation: 3s bg_wave linear infinite;}
.vote_tips::before{ content: ""; position: absolute; top: -23px; left: 0; width: 100%; height: 23px; background: url(../images/bg_wave.png) left top; animation: 3s bg_wave linear infinite;}
.vote_tips img{ max-width: calc(100% - 40px);}
@media (max-width:480px){
.vote_tips{ padding: 30px 0 35px;}
}


/*--main_list_box--*/
.list_box{ max-width: 1100px; margin: 60px auto;}
.list_box .vote_title{ display: block; margin: 0 auto; max-width: calc(100% - 40px);}

.search{ position: sticky; top: 10px; width: 960px; max-width: calc(100% - 40px); margin: 30px auto; z-index: 8;}
.search input{ margin: 0 0 10px; padding: 0 20px; width: 100%; font-size: 1em; line-height: 60px; box-shadow: none; border: 3px solid #eee; border-radius: 10px; box-sizing: border-box; background: #fff; appearance: none; -moz-appearance: none; -webkit-appearance: none; transition: .3s;}
.search input:focus{ border: 3px solid #ffe49d; outline : 0;}
.search a{ position: absolute; right: 20px; top: 14px;}

.list{ display: flex; flex-wrap: wrap; justify-content: center; max-width: calc(100% - 40px); margin: 0 auto;}
.item{ display: flex; flex-direction: column; flex-wrap: wrap; position: relative; width: 32%; margin: 0 0.667% 50px; padding: 10px; background: #fff; border-radius: 10px; box-sizing: border-box;}
.item>div{ position: relative; width: 100%; height: 200px; padding: 3px; border:1px solid #ccc; box-sizing: border-box; border-radius: 10px 10px 0 0; overflow: hidden;}
.item>div>img{ width: 100%; height: 100%; object-fit: cover; cursor: pointer; border-radius: 10px 10px 0 0;}
.item>div b{ display: flex; justify-content: center; align-items: center; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.9); cursor: pointer; opacity: 0; transition: .3s; z-index: 2;}
.item>div:hover b{ opacity: 1;}
.item>div b img{ width: 50px;}

.item p{ position: relative; flex: 1; margin: 0; padding: 21px 95px 30px 40px; width: 100%; font-size: 1.125em; font-weight: bold; color: #555; border:1px solid #ccc; line-height: 1em; border-top:none; border-radius: 0 0 10px 10px; text-align: left; box-sizing: border-box;}
.item p img{ position: absolute; left: 0; top: 10px; width: 40px;}
.item p span{ position: absolute; display: block; bottom: -30px; left: 10px; padding: 0 10px; width: calc(100% - 127px); text-align: center; font-size: 0.875em; color: #999; background: #fff; border-radius: 10px; border:1px solid #ccc; line-height: 40px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
.item p a{ position: absolute; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; top: 22px; right: 10px; width: 77px; height: 77px; padding: 20px 0 0 0; color: #19aa88; background: #b1fae9 url(../images/vote/icon_heart_a.png) no-repeat; background-size: 35%; background-position: center 15px; border-radius: 10px; text-decoration: none; box-sizing: border-box; transition: .3s;}
.item p a:hover{ color: #f9595f; background: #b1fae9 url(../images/vote/icon_heart_b.png) no-repeat; background-size: 35%; background-position: center 15px;}
.item p b{ display: block; margin: 10px 0 0 0; font-size: 0.66em; font-weight: normal; color: #000;}
.item p mark{ font-size: 0.66em; font-weight: normal; background: transparent;}

.item i{ display: flex; align-items: center; position: absolute; top: 20px; left: 20px; background: #f9595f; padding: 3px 15px; border-radius: 30px; color: #fff; font-size: 0.875em;}
.item i img{ width: 15px; padding: 0 5px 0 0;}

.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; }
.embed-container iframe,.embed-container object,.embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

@media (max-width:1000px){
    .list{ justify-content: space-between;}
    .item{ width: 49%; margin: 0 0 50px;}
    .item>div{ height: 300px;}
}
@media (max-width:768px){
    .item>div{ height: 200px;}
}
@media (max-width:480px){
    .list_box{ margin: 60px auto 20px;}

    .search{ margin: 30px auto 10px;}
    .search input{ line-height: 40px;}
    .search a{ right: 15px; top: 8px;}
    .search img{ width: 30px;}
    
    .item{ width: 100%;}
    .item>div{ height: 180px;}
}


/*--main_path--*/
.path{ margin: 0 0 80px; text-align: center;}
.path a{ text-decoration: none; cursor: pointer;}
.path ul{ margin: 0; padding: 0;}
.path li{ display: inline-flex; justify-content: center; align-items: center; width: 45px; height: 45px; margin: 0; padding: 0; background: #fff; border:3px solid #fff; border-radius: 50px; color: #000; transition: .3s;}
.path a.active li,.path a.active:hover li{ border:3px solid #f27474; color: #f27474;}
.path a:hover li{ border:3px solid #eee; color: #f27474;}

@media (max-width:480px){
    .path li{ width: 30px; height: 30px;}
}


/*--main_vote_lightbox--*/
.big_item h4{ margin: 0 0 30px 0; padding: 20px; background: #ffe49d; text-align: center; font-size: 1.25em; font-weight: bold;}
.big_item img{ display: block; width: calc(100% - 40px); margin: 0 auto; padding: 3px; border-radius: 10px; border: 1px solid #ccc; box-sizing: border-box;}

@media (max-width:480px){
    .swal2-modal h2{ font-size: 1em;}
}


/*--main_rank--*/
.rank{ position: relative; padding: 60px 0 10px; background: #fff; text-align: center;}
.rank::after{ content: ""; position: absolute; bottom: -23px; left: 0; width: 100%; height: 23px; background: url(../images/bg_wave.png) left top; transform: rotate(180deg); animation: 3s bg_wave linear infinite;}
.rank::before{ content: ""; position: absolute; top: -23px; left: 0; width: 100%; height: 23px; background: url(../images/bg_wave.png) left top; animation: 3s bg_wave linear infinite;}
.rank>img{ max-width: calc(100% - 40px);}

.rank h3 mark{ font-size: 1.875em; background: linear-gradient(transparent 40%, rgba(255,255,255,0) 60%, #ffd25c 60%, #ffd973 90%, transparent 95%);}
.rank h3 mark.blue{ background: linear-gradient(transparent 40%, rgba(255,255,255,0) 60%, rgb(27 127 204 / 80%) 60%, #4cb2dc 90%, transparent 95%);}

.top_rank{ display: flex; flex-wrap: wrap; justify-content: space-between; margin: 0 auto 60px; padding: 10px; width: 1040px; max-width: calc(100vw - 40px); border-radius: 10px; background: #ffe49d; box-sizing: border-box;}
.top_rank.blue{ background: #b1fae9;}
.top_rank img{ max-width: 100%;}

.rank_1row{ position: relative; width: 100%; padding: 3px; border-radius: 10px; background: #fff; box-sizing: border-box; cursor: pointer;}
.rank_1row img{ border-radius: 10px; width: 100%;}
.rank_1row img.rank_pic01{ position: absolute; width: auto; height: auto; right: 0; top: -77px; z-index: 8;}
.rank_1row_info{ position: relative; width: 100%; margin: 10px 0; padding: 30px 0; background: linear-gradient(#fff, #fdfaf0); border-radius: 10px; box-sizing: border-box;}
.rank_1row_info.blue{ background: linear-gradient(#fff, #eefff5);}
.rank_1row_info img{ position: absolute; left: -50px; bottom: 0;}
.rank_1row_info p{ margin: 0 0 10px 0; padding: 0 230px; color: #475a88; font-size: 1.5em; font-weight: bold; }
.rank_1row_info i{ position: relative; display: inline-block; background: #ffe49d; font-style: normal; margin: 0 0 10px 0; padding: 0 20px; line-height: 30px; font-weight: bold; font-size: 1.125em; color: #e35555;}
.rank_1row_info i:before{ position: absolute; left: -30px; top: 0; display: block; content: ""; border: 15px solid; border-color: #ffe49d #ffe49d #f8bb86 transparent; }
.rank_1row_info i:after{ position: absolute; right: -30px; top: 0; display: block; content: ""; border: 15px solid; border-color: #ffe49d transparent #f8bb86 #ffe49d; }
.rank_1row_info b{ display: block; margin: 0 230px; padding: 10px 0; font-weight: normal; font-size: 0.66em;}
.rank_1row_info b::before{ display: inline-block; content: ""; margin: 0 10px 0 0; width: 10px; height: 10px; border-radius: 10px; background: #fbe5a0;}
.rank_1row_info b span{}
.rank_1row_info b span::before{ display: inline-block; content: "-";}
.rank_1row_info b span::after{ display: inline-block; content: ""; margin: 0 0 0 10px; width: 10px; height: 10px; border-radius: 10px; background: #fbe5a0;}


.rank_1row_info.blue i{ background: #b1fae9;}
.rank_1row_info.blue i:before{ border-color: #b1fae9 #b1fae9 #7ed4dd transparent; }
.rank_1row_info.blue i:after{ border-color: #b1fae9 transparent #7ed4dd #b1fae9; }


.rank_2row{ width: calc(50% - 5px);}
.rank_2row>img{ border-radius: 10px; border: 3px solid #fff; margin: 0; box-sizing: border-box; cursor: pointer;}

.rank_2row_info{ position: relative; width: 100%; margin: 10px 0 0 0; padding: 20px 10px; background: linear-gradient(#fff, #fdfaf0); border-radius: 10px; text-align: left; box-sizing: border-box;}
.rank_2row_info.blue{ background: linear-gradient(#fff, #eefff5);}
.rank_2row_info img{ position: absolute; right: -10px; bottom: 0;}
.rank_2row_info p{ margin: 0 0 10px 0; padding: 0 150px 0 0; color: #475a88; font-size: 1.5em; font-weight: bold; }
.rank_2row_info i{ position: relative; display: inline-block; background: #ffe49d; font-style: normal; margin: 0 0 10px -10px; padding: 0 20px; line-height: 30px; font-weight: bold; font-size: 1.125em; color: #e35555;}
.rank_2row_info i:after{ position: absolute; right: -30px; top: 0; display: block; content: ""; border: 15px solid; border-color: #ffe49d transparent #f8bb86 #ffe49d; }
.rank_2row_info b{ display: block; margin: 0 150px 0 0; padding: 10px 0; font-weight: normal; font-size: 0.66em;}
.rank_2row_info b span{}
.rank_2row_info b span::before{ display: inline-block; content: "-";}


.rank_2row_info.blue i{ background: #b1fae9;}
.rank_2row_info.blue i:after{ border-color: #b1fae9 transparent #7ed4dd #b1fae9; }

.rank .item p a{ color: #fff; background: #fec006 url(../images/rank/icon_crown.png) no-repeat; background-size: 35%; background-position: center 15px; cursor: default;}
.rank .item p a:hover{ background: #fec006 url(../images/rank/icon_crown.png) no-repeat; background-size: 35%; background-position: center 15px;}

.rank_item p{ padding: 21px 20px 30px 40px;}
.rank_item p span{ width: calc(100% - 40px);}
@media (max-width:768px){
.rank_1row img.rank_pic01{ width: 84px; top: -44px;}
.rank_1row_info img{ width: 134px; left: -20px;}
.rank_1row_info p{ padding:  0 130px;}
.rank_1row_info b{ margin: 0 130px;}
.rank_1row_info b::before{ display: none;}
.rank_1row_info b span{ display: block;}
.rank_1row_info b span::before{ display: none;}
.rank_1row_info b span::after{ display: none;}

.rank_2row_info img{ width: 68px;}
.rank_2row_info p{ padding:  0 70px 0 0;}
.rank_2row_info b{ margin: 0 70px 0 0;}
.rank_2row_info b span{ display: block;}
.rank_2row_info b span::before{ display: none;}
}

    
@media (max-width:480px){
.rank{ padding: 30px 0 35px;}

.rank_1row_info{ padding: 15px 10px; text-align: right;}
.rank_1row_info p{ margin: 0; padding: 0 0 0 105px; font-size: 1.125em;}
.rank_1row_info>span{ font-size: 0.875em;}
.rank_1row_info i{ display: none;}
.rank_1row_info b{ margin: 0 0 0 105px;}

.rank_2row{ width: 100%;}
.rank_2row_info{ padding: 15px 10px;}
.rank_2row_info p{ margin: 0; padding: 0 105px 0 0; font-size: 1.125em;}
.rank_2row_info>span{ font-size: 0.875em;}
.rank_2row_info img{ width: 90px;}
.rank_2row+.rank_2row{ margin: 10px 0 0 0;}
.rank_2row_info i{ display: none;}
.rank_2row_info b{ margin: 0 105px 0 0;}
}