@charset "utf-8";
/* 簡單流變媒體
   注意: 流變媒體要求您必須移除 HTML 中媒體的高度和寬度屬性
   http://www.alistapart.com/articles/fluid-images/ 
*/
Body {
  font-family: "蘋果儷中黑", "微軟正黑體", "Microsoft JhengHei", Times New Roman, serif;
  font-size: 1.375em;
  line-height: 150%;
  font-weight: 600;
  color: #222;
  background: url("../images/main-bg.jpg");
  background-size: 100%;
  background-position: center top;
  background-repeat: repeat-y;
}
img, object, embed, video {
  max-width: 100%;
}
a:hover {
  text-decoration: none;
}
ul.white-cube {
  list-style-image: url("../images/icon-dot-white.svg");
}
ul.yellow-cube {
  list-style-image: url("../images/icon-dot-yellow.svg");
}
li {
  margin-bottom: 10px;
}
main {
  position: relative;
  width: 100%;
  overflow: hidden;
}
.ll-hide {
  display: none;
}
.white-word {
  color: #FFFFFF !important;
  text-shadow: 1px 1px 2px #00000050;
}
/*其他常用*/
.flex-cc {
  display: flex;
  justify-content: center;
  align-items: center;
}
/*大螢幕自訂使用*/
.container-new {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
  max-width: 1500px;
}
@media (max-width: 1600px) {
  Body {
    font-size: 1.25em;
  }
  .container-new {
    max-width: 1200px;
  }
}
@media (max-width: 1400px) {
  .container-new {
    width: 1370px;
  }
}
@media (max-width: 1200px) {
  .container-new {
    width: 1170px;
  }
}
@media (max-width: 992px) {
  Body {
    font-size: 1.5em;
  }
  .container-new {
    width: 100%;
  }
}
@media (max-width: 768px) {
  Body {
    font-size: 1.0625em;
  }
  .ll-hide {
    display: block;
  }
  .ss-hide {
    display: none;
  }
  .container-new {
    width: 100%;
    padding-right: 5px;
    padding-left: 5px;
  }
}
@media (max-width: 559px) {
  Body {
    font-size: 1.125em;
  }
}
/*****主要設定從這裡開始******/
/*****標題區塊******/
.main-logo {
  position: absolute;
  left: 5%;
  top: 5%;
  z-index: 899;
  width: 20vw;
}
.main-logo > img {
  width: 100%;
}
.main-logo-inside {
  position: absolute;
  left: 3%;
  top: 3%;
  z-index: 899;
  width: 15vw;
}
.main-logo-inside > img {
  width: 100%;
}
.head-block {
  position: relative;
  padding: 0;
  background-color: #FFF;
  background: url("../images/head-bg.png");
  background-size: 100%;
  background-position: center top;
  background-repeat: no-repeat;
  padding-bottom: 82%;
}
.main-title {
  position: absolute;
  width: 100%;
  bottom: 21.8%;
}
.main-title > h1 > img {
  max-width: 1000px;
  width: 65%;
}
.col-menu01, .col-menu02, .col-menu03, .col-menu04 {
  position: absolute;
  transition: all .5s;
  cursor: pointer;
}
.col-menu01 {
  bottom: 18%;
  width: 15vw;
  left: 12vw;
  background: url("../images/mainMenu-new_01.png");
  background-size: 90%;
  padding-bottom: 43%;
  background-repeat: no-repeat;
  background-position: left top;
  animation-name: showbtn;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-delay: 0;
}
.col-menu02 {
  bottom: 25%;
  width: 13vw;
  left: 25vw;
  background: url("../images/mainMenu-new_02.png");
  background-size: 90%;
  padding-bottom: 46%;
  background-repeat: no-repeat;
  background-position: left top;
  animation-name: showbtn;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-delay: 1s;
}
.col-menu03 {
  bottom: 25%;
  width: 13vw;
  right: 25vw;
  background: url("../images/mainMenu_03.png");
  background-size: 90%;
  padding-bottom: 46%;
  background-repeat: no-repeat;
  background-position: right top;
  animation-name: showbtn;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-delay: 2s;
}
.col-menu04 {
  bottom: 18%;
  width: 15vw;
  right: 12vw;
  background: url("../images/mainMenu_04.png");
  background-size: 90%;
  padding-bottom: 43%;
  background-repeat: no-repeat;
  background-position: right top;
  animation-name: showbtn;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-delay: 3s;
}
/*柱子加上CSS動畫*/
@keyframes showbtn {
  0% {
    background-size: 90%;
    opacity: 1;
  }
  50% {
    background-size: 96%;
    opacity: .6;
  }
  100% {
    background-size: 90%;
    opacity: 1;
  }
}
.col-menu01:hover, .col-menu02:hover, .col-menu03:hover, .col-menu04:hover {
  background-size: 95%;
}
.ppl-left {
  position: absolute;
  bottom: 20%;
  left: 3vw;
  width: 17vw;
}
.ppl-left-inside {
  position: absolute;
  bottom: 32%;
  left: 3vw;
  width: 17vw;
}
.ppl-left > img {
  width: 100%;
}
.ppl-right {
  position: absolute;
  bottom: 20%;
  right: 5vw;
  width: 17vw;
}
.ppl-right-inside {
  position: absolute;
  bottom: 32%;
  right: 5vw;
  width: 17vw;
}
.ppl-right > img {
  width: 100%;
}
.icon-join {
  position: absolute;
  bottom: 8%;
  right: 10vw;
  width: 30vw;
  z-index: 900;
}
.icon-join > a > img {
  width: 95%;
  transition: all .5s;
}
.icon-join > a > img:hover {
  width: 100%;
}
/*****一、活動說明區塊******/
.intro-block {
  background: url("../images/box-1-bg.png");
  background-repeat: no-repeat;
  background-position: center top;
  background-size: 100%;
  margin-bottom: 15%;
  margin-top: 3%;
}
.intro-block-title {
  width: 100%;
  text-align: center;
  margin-top: -15%;
}
.intro-01box {
  background: url("../images/box-1-1.png");
  background-repeat: no-repeat;
  background-position: center top;
  background-size: 100%;
  padding: 72% 20% 30%;
  font-weight: 600;
  line-height: 150%;
  color: #FFFFFF;
  text-align: center;
}
.intro-02box {
  background: url("../images/box-1-2.png");
  background-repeat: no-repeat;
  background-position: center top;
  background-size: 100%;
  padding: 72% 20% 40%;
  font-weight: 600;
  line-height: 150%;
  color: #FFFFFF;
  text-align: center;
}
.intro-03box {
  background: url("../images/box-1-3.png");
  background-repeat: no-repeat;
  background-position: center top;
  background-size: 100%;
  padding: 12% 9% 25%;
  font-weight: 600;
  line-height: 150%;
  color: #FFFFFF;
}
.intro-03-note {
  font-size: 80%;
}
.btn-more {
  color: #FFFFFF;
  font-size: 75%;
  font-weight: 900;
  letter-spacing: 0;
  border-radius: 25px;
  padding: 3px 10px;
  line-height: 120%;
  border: 1px solid #fed800;
  background-image: linear-gradient(to right, #da5f00, #fda500);
  transition: all .5s;
}
.btn-sign {
  color: #c31611;
  font-size: 80%;
  letter-spacing: 2px;
  border-radius: 25px;
  padding: 3px 20px;
  line-height: 120%;
  border: 1px solid #FFFFFF;
  background-color: #fed800;
  transition: all .5s;
  animation-name: signbtn;
  animation-duration: 1s;
  animation-iteration-count: infinite;
}
/*柱子加上CSS動畫*/
@keyframes signbtn {
  0% {
    background-color: #fed800;
    color: #c31611;
  }
  50% {
    background-color: #c31611;
    color: #fed800;
  }
  100% {
    background-color: #fed800;
    color: #c31611;
  }
}
.btn-more:hover, .btn-sign:hover {
  background-image: linear-gradient(to right, #660000, #660000);
  color: #FFFFFF;
}
/*****二、活動說明區塊******/
.level-block {
  position: relative;
  background: url("../images/box-2-bg.png");
  background-repeat: no-repeat;
  background-position: center top;
  background-size: 100% 100%;
  margin-top: 10%;
}
.level-block-inside {
  position: relative;
  background: url("../images/box-2-bg.png");
  background-repeat: no-repeat;
  background-position: center top;
  background-size: 100%;
  margin-top: 10%;
  padding-bottom: 10px;
}
.level-1-line {
  margin: 8%;
}
.level-01box {
  background: url("../images/box-2-1.png");
  background-repeat: no-repeat;
  background-position: center top;
  background-size: 100%;
  padding: 25% 12% 15%;
  font-size: 110%;
  font-weight: 600;
  line-height: 150%;
  color: #FFFFFF;
}
.level-block1-photo {
  position: relative;
}
.level-block1-photo > img {
  position: absolute;
  right: 8vw;
  top: 18vw;
  width: 6vw;
}
.level-2-line {
  margin: 8% 8% 0;
}
.level-02box {
  background: url("../images/box-2-2.png");
  background-repeat: no-repeat;
  background-position: center top;
  background-size: 100%;
  padding: 25% 12% 15%;
  font-size: 110%;
  font-weight: 600;
  line-height: 150%;
  color: #FFFFFF;
}
.sign-03box {
  background: url("../images/box-2-3-m.png");
  background-repeat: no-repeat;
  background-position: center top;
  background-size: 100%;
  padding: 20% 12%;
  font-size: 110%;
  font-weight: 600;
  line-height: 150%;
  color: #FFFFFF;
}
.level-block2-photo {
  position: relative;
}
.level-block2-photo > img {
  width: 100%;
}
.level-3-line {
  margin: 0 8% 4%;
}
.level-03box {
  background: url("../images/box-2-3.png");
  background-repeat: no-repeat;
  background-position: center top;
  background-size: 100%;
  padding: 4% 15% 4% 25%;
  font-size: 110%;
  font-weight: 600;
  line-height: 150%;
  color: #FFFFFF;
    width:100%;
}
.level-4-line {
  margin: 15% 12%;
  position: relative;
}
/*****二、第二部分瘋學習區塊的龐排行榜******/
.level-04box {
  background: url("../images/box-2-2-bg.png");
  background-repeat: no-repeat;
  background-position: center top;
  background-size: 100% 100%;
  padding: 15% 7% 30%;
  font-size: 110%;
  font-weight: 600;
  line-height: 150%;
  color: #FFFFFF;
  margin-top: -15%;
}
.ranking-block-title {
  width: 100%;
  text-align: center;
  margin-top: -15%;
}
.ranking-list {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
}
#no1 {
  background: url("../images/ranking-bg-01.png");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: auto 140px;
  height: 100px;
}
#no2 {
  background: url("../images/ranking-bg-02.png");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: auto 140px;
  height: 90px;
}
#no3 {
  background: url("../images/ranking-bg-03.png");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: auto 140px;
  height: 90px;
}
.ranking-others{
  background: url("../images/ranking-bg-04.png");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: auto 140px;
  height: 85px;
}
#no4 {
  background: url("../images/ranking-bg-04.png");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: auto 140px;
  height: 85px;
}
#no5 {
  background: url("../images/ranking-bg-04.png");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: auto 140px;
  height: 85px;
  opacity: .8;
}
#no6 {
  background: url("../images/ranking-bg-04.png");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: auto 140px;
  height: 85px;
  opacity: .6;
}
.user-img {
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: 55px;
  width: 55px;
  height: 55px;
  float: left;
  border: 2px solid #FFFFFF;
  margin: 15px 15px 15px 30px;
}
.user-name {
  margin-top: 5px;
  width: 160px;
  float: right;
  overflow: hidden;
  display: flex;
    align-items: center;
}
.user-name > p > span{
  display:none;
}

.user-name > p > br{
  display:none;
}

.notice-detail{
    position: absolute;
    left:7%;
    bottom:6%;
    color:#ffff66;
    font-size:105%;
    width:70%;
}
.ranking-bottom-photo {
  position: absolute;
  bottom: 1%;
  right: -5%;
}
.ranking-bottom-photo > img {
  width: 50vw;
}
/*****三、豐厚大獎******/
.award-block {
  position: relative;
  background: url("../images/award_bg.png");
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
  margin-top: 20%;
  padding: 6% 0 0;
}
.award-block-title {
  position: absolute;
  top: -26%;
  left: 0;
  width: 100%;
  text-align: center;
}
.award-slogan {
  text-align: center;
  letter-spacing: 3px;
  text-shadow: 1px 1px 5px #00000040;
  color: #FFFFFF;
  font-size: 1.45em;
  margin: 4% 0;
  line-height: 150%;
}
#award01 {
  background: url("../images/award-01_gift.png");
  background-size: 100%;
  z-index: 100;
}
#award02 {
  background: url("../images/award-02_gift.png");
  background-size: 100%;
  margin-left: -4%;
  z-index: 99;
}
#award03 {
  background: url("../images/award-03_gift.png");
  background-size: 100%;
  margin-left: -4%;
  z-index: 98;
}
#award04 {
  background: url("../images/award-04_gift.png");
  background-size: 100%;
  margin-left: -4%;
  z-index: 97;
}
.flex-award {
  background-repeat: no-repeat !important;
  background-position: center bottom !important;
  padding-bottom: 52% !important;
  width: 28%;
}
/*****四、活動說明******/
.notice-block {
  padding: 50px 15px;
  background-color: #777777;
  font-size: 85%;
  color: #FFFFFF;
  font-weight: 400;
}
.notice-title {
  font-size: 140%;
  font-weight: 900;
  letter-spacing: 2px;
}
.email-link {
  color: #FFFFFF;
  text-decoration: underline;
}
.email-link:hover {
  color: #ffff33;
  text-decoration: none;
}
.contact-1st {}
.contact-2nd {
  border-left: 1px dashed #FFFFFF50;
  padding-left: 5%;
}
.fix-right-buttom {
  position: fixed;
  width: 350px;
  right: 10px;
  bottom: 10px;
  animation-name: showjoin;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-delay: 3s;
  z-index: 1000;
}
/*柱子加上CSS動畫*/
@keyframes showjoin {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.05);
    transform: translate(0, 15px);
    opacity: .3;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
.fix-right-buttom > a > img {
  width: 100%;
}
/*參加時跳出的修改跳出會員登入*/
.modal-content{
    background-color: #fee7a6;
    border:3px solide #ff8617;
    border-radius: 20px;
    box-shadow: 0 0 10px 0 #00000080;
}
.close > span {
    margin-top:-5%;
    font-size:200%;
}
.modal-body > div > div > a > img:hover{
    transition: all .4s;
    transform: scale(1.05);
}
/********************************************************************************************
我的學習記錄內頁
*********************************************************************************************/
.head-block-inside {
  position: relative;
  padding: 0;
  background-color: #FFF;
  background: url("../images/head-bg-inside.png");
  background-size: 100%;
  background-position: center top;
  background-repeat: no-repeat;
  padding-bottom: 50%;
}
.main-title-inside {
  position: absolute;
  width: 100%;
}
.main-title-inside > h1 > img {
  max-width: 1000px;
  width: 65%;
}
.sign-block {
  position: relative;
  background: url("../images/sign-box-bg.png");
  background-repeat: no-repeat;
  background-position: center top;
  background-size: 100%;
  margin-bottom: 15%;
  margin-top: 0;
  padding: 12% 2%;
}
.sign-block-title {
  position: absolute;
  top: -10%;
  left: 0;
  width: 100%;
  text-align: center;
  margin-top: -10%;
}
.sign-block-title > img {
  min-width: 400px;
  max-width: 450px;
  width: 35vw;
  margin: auto;
}
.flex-sign {
  margin: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 90%;
}
.sign-icon {
  background: url("../images/icon-sign-normal.png");
  color: #FFFFFF;
  background-size: 95%;
  background-repeat: no-repeat;
  background-position: center top;
  width: 14%;
  text-align: center;
  padding: 10% 1% 5%;
  margin: 0;
  cursor: pointer;
  transition: all .2s;
}
.sign-icon-finish {
  background: url("../images/icon-sign-finish.png");
  color: #ffff00;
  background-size: 95%;
  background-repeat: no-repeat;
  background-position: center top;
  width: 14%;
  text-align: center;
  padding: 10% 1% 5%;
  margin: 0;
  cursor: pointer;
  transition: all .2s;
}
.sign-icon.checked {
  background: url("../images/icon-sign-normal-ok.png");
  background-size: 95%;
  background-repeat: no-repeat;
  background-position: center top;
  cursor: default;
  color: #ffff0080;
}
.sign-icon-finish.checked {
  background: url("../images/icon-sign-finish-ok.png");
  background-size: 95%;
  background-repeat: no-repeat;
  background-position: center top;
  cursor: default;
}
.sign-icon:hover, .sign-icon-finish:hover {
  background-size: 100%;
  transform: translate(0, -10px)
}
.sign-icon.checked:hover, .sign-icon-finish.checked:hover {
  background-size: 95%;
  transform: translate(0, 0)
}
/********************************************************************************************
選單幾項RWD設定(非行動裝置)
*********************************************************************************************/
@media only screen and (max-width: 1600px) {
  .main-title > img {
    max-width: 850px;
  }
  .level-04box {
    padding: 15% 7%;
  }
  .level-4-line {
    margin: 15% 7%;
  }
  .ranking-bottom-photo > img {
    width: 43vw;
  }
  .contact-2nd {
    border-left: 1px dashed #FFFFFF50;
    padding-left: 2%;
  }
  /*內頁設定*/
  .sign-block {
    margin-top: 10%;
    padding: 16% 2%;
  }
.level-03box {
  padding: 3% 15% 4% 25%;
}
}
@media only screen and (max-width: 1400px) {
  .intro-block {
    margin-top: 7%;
  }
}
@media only screen and (max-width: 1200px) {
  .fix-right-buttom {
    position: fixed;
    width: 250px;
    right: 10px;
    bottom: 10px;
  }
}
@media only screen and (max-width: 990px) {
  .ppl-left, .ppl-right, .level-block1-photo, .level-block2-photo, .ppl-left-inside, .ppl-right-inside {
    display: none;
  }
  .intro-block {
    background: url("../images/box-1-bg-m.png");
    background-repeat: no-repeat;
    background-position: center top;
    background-size: 100%;
    margin-bottom: 15%;
  }
  .intro-01box {
    margin: 1%;
  }
  .intro-02box {
    margin: 1%;
  }
  .intro-03box {
    background: url("../images/box-1-3-m.png");
    background-repeat: no-repeat;
    background-position: center top;
    background-size: 100%;
    padding: 12% 8%;
    margin: 1%;
  }
  .level-block {
    position: relative;
    background: url("../images/box-2-bg-m.png");
    background-repeat: no-repeat;
    background-position: center top;
    background-size: 100%;
    margin-top: 10%;
  }
  .level-block-inside {
    position: relative;
    background: url("../images/box-2-bg-m.png");
    background-repeat: no-repeat;
    background-position: center top;
    background-size: 100%;
    margin-top: 10%;
    padding: 5% 6%;
  }
  .level-03box {
    background: url("../images/box-2-3-m.png");
    background-repeat: no-repeat;
    background-position: center top;
    background-size: 100%;
    padding: 15%;
    font-size: 110%;
    font-weight: 600;
    line-height: 150%;
    color: #FFFFFF;
    margin-top: 10%;
  }
  .btn-more {
    font-size: 100%;
    letter-spacing: 2px;
    border-radius: 35px;
    padding: 6px 40px;
    line-height: 120%;
  }
  /*****二、第二部分瘋學習區塊的龐排行榜******/
  .level-04box {
    background: none;
    background-image: linear-gradient(to bottom, #003abe, #3784ff);
    border: 7px solid #de943c;
    border-radius: 15px;
    padding: 15% 1% 20%;
    font-size: 110%;
    font-weight: 600;
    line-height: 150%;
    color: #FFFFFF;
    margin-top: -15%;
  }
  .ranking-bottom-photo > img {
    width: 55vw;
  }
.notice-detail{
    position: absolute;
    left:4%;
    bottom:4%;
    font-size:90%;
}
  .award-block {
    padding: 12% 0 0;
  }
  .award-slogan {
    margin: 60px 0 25px;
  }
  .contact-1st {
    padding-left: 2px;
  }
  .contact-2nd {
    border-left: 0;
    padding-left: 2px;
  }
  #no1, #no2, #no3, #no4, #no5, #no6, .ranking-others{
    font-size: 0.8em;
  }
  /*內頁文字區*/
  .flex-sign {
    flex-wrap: wrap;
    width: 95%;
  }
  .sign-block {
    background: none;
    background-image: linear-gradient(to bottom, #003abe, #3784ff);
    border: 7px solid #de943c;
    border-radius: 15px;
    padding: 15% 1% 20%;
    font-size: 110%;
    font-weight: 600;
    line-height: 150%;
    color: #FFFFFF;
    margin-top: 20%;
  }
  .sign-block-title {
    position: absolute;
    top: -10%;
    left: 0;
    width: 100%;
    text-align: center;
    margin-top: -2%;
  }
  .sign-icon, .sign-icon-finish {
    width: 24%;
    margin: 1%;
    padding: 17% 1% 5%;
  }
}
/* 行動版面: 768px 以下。 */
@media only screen and (max-width: 768px) {
  .head-block {
    position: relative;
    padding: 0;
    background-color: #FFF;
    background: url("../images/head-bg-mobile.png");
    background-size: 100%;
    background-position: center top;
    background-repeat: no-repeat;
    padding-bottom: 100%;
  }
  .main-title {
    position: absolute;
    width: 100%;
    bottom: 21.8%;
  }
  .col-menu02 {
    bottom: 45%;
    width: 20vw;
    left: 17vw;
    background-size: 90%;
    padding-bottom: 46%;
  }
  .col-menu03 {
    bottom: 45%;
    width: 20vw;
    right: 17vw;
    background-size: 90%;
    padding-bottom: 46%;
  }
  .col-menu01 {
    bottom: 38%;
    width: 20vw;
    left: 0;
    background-size: 90%;
    padding-bottom: 43%;
  }
  .col-menu04 {
    bottom: 38%;
    width: 20vw;
    right: 0;
    background-size: 90%;
    padding-bottom: 43%;
  }
  .icon-join {
    position: absolute;
    bottom: 5%;
    right: 1vw;
    width: 40vw;
  }
  .icon-join > a > img {
    width: 95%;
    transition: all .5s;
  }
  .btn-more, .btn-sign {
    font-size: 80%;
    letter-spacing: 0;
    border-radius: 35px;
    padding: 5px 20px;
    line-height: 120%;
    border: 1px solid #fed800;
  }
  .award-slogan {
    margin: 100px 0 25px;
  }
  /*內頁標頭*/
  .head-block-inside {
    position: relative;
    padding: 0;
    background-color: #FFF;
    background: url("../images/head-bg-inside-mobile.png");
    background-size: 100%;
    background-position: center top;
    background-repeat: no-repeat;
    padding-bottom: 60%;
  }
  .sign-block-title {
    position: absolute;
    top: -15%;
    left: 0;
    width: 100%;
    text-align: center;
    margin-top: -2%;
  }
}
/* 桌面版面: 559px 最大*/
@media only screen and (max-width: 559px) {
  /*一、標題區塊*/
  .main-logo {
    position: absolute;
    left: 3%;
    top: 1%;
    width: 25vw;
  }
  .main-logo-inside {
    display: none;
  }
  .main-title > h1 > img {
    max-width: 1000px;
    width: 85%;
    margin: auto;
  }
  .icon-join {
    position: absolute;
    bottom: 0;
    right: 1vw;
    width: 50vw;
  }
  .icon-join > a > img {
    width: 95%;
    transition: all .5s;
  }
  /*一、第一區塊*/
  .intro-block {
    margin-top: 25%;
  }
  .intro-01box {
    margin: 1%;
  }
  .intro-02box {
    margin: 1%;
  }
  .intro-03box {
    background: url("../images/box-1-3-mobile.png");
    background-repeat: no-repeat;
    background-position: center top;
    background-size: 100%;
    padding: 28% 15% 35%;
    font-weight: 600;
    line-height: 150%;
    color: #FFFFFF;
    text-align: left;
  }
  .btn-more {
    font-size: 80%;
    letter-spacing: 0;
    border-radius: 15px;
    padding: 2px 8px;
  }
  .btn-sign {
    font-size: 90%;
    letter-spacing: 1;
    border-radius: 15px;
    padding: 5px 12px;
  }
  .level-1-line {
    margin: 18% 0 0;
    font-size: 100%;
  }
  .level-01box {
    background: url(../images/box-2-1-mobile.png);
    background-repeat: no-repeat;
    background-position: center top;
    background-size: 100%;
    padding: 18% 12% 15% 8%;
    font-size: 95%;
  }
  .level-02box {
    background: url("../images/box-2-2-mobile.png");
    background-repeat: no-repeat;
    background-position: center top;
    background-size: 100%;
    padding: 18% 12% 15% 8%;
    font-size: 95%;
  }
  .sign-03box {
    padding: 18% 12% 15% 8%;
    font-size: 95%;
  }
  .level-03box {
    background: url("../images/box-2-3-mobile.png");
    background-repeat: no-repeat;
    background-position: center top;
    background-size: 100%;
    padding: 16%;
    font-size: 95%;
    margin-top: 2%;
  }
  .level-2-line {
    margin: 2% 0 0;
  }
  .level-3-line {
    margin: 2% 0 0;
  }
  /*****二、第二部分瘋學習區塊的龐排行榜******/
  .level-4-line {
    margin: 15% 0;
  }
  .level-04box {
    border: 3px solid #de943c;
  }
  .ranking-list {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
  }
  #no1 {
    background: url("../images/ranking-bg-01.png");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: auto 100px;
    font-size: 85%;
    height: 80px;
  }
  #no2 {
    background: url("../images/ranking-bg-02.png");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: auto 100px;
    font-size: 80%;
    height: 80px;
  }
  #no3 {
    background: url("../images/ranking-bg-03.png");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: auto 100px;
    font-size: 80%;
    height: 80px;
  }
.ranking-others {
    background: url("../images/ranking-bg-04.png");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: auto 100px;
    font-size: 80%;
    height: 80px;
  }
    #no4 {
    background: url("../images/ranking-bg-04.png");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: auto 100px;
    font-size: 80%;
    height: 80px;
  }
  #no5 {
    background: url("../images/ranking-bg-04.png");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: auto 100px;
    font-size: 80%;
    height: 80px;
    opacity: .8;
  }
  #no6 {
    background: url("../images/ranking-bg-04.png");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: auto 100px;
    font-size: 80%;
    height: 80px;
    opacity: .6;
  }
  .user-img {
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 40px;
    width: 40px;
    height: 40px;
    float: left;
    border: 1px solid #FFFFFF;
    margin: 20px 0 11px 15px;
  }
  .user-name {
    margin-top: 12px;
    margin-left: 2px;
    width: 110px;
    float: right;
    font-size: 0.9375em;
    line-height: 180%;
  }
.notice-detail{
    bottom:2%;
    width:50%;
    font-size:85%;
}
  .ranking-bottom-photo {
    position: absolute;
    bottom: 1%;
    right: -5%;
  }
  .ranking-bottom-photo > img {
    width: 250px;
  }
  .award-block {
    position: relative;
    background: url("../images/award_bg-mobile.jpg");
    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover;
    margin-top: 45%;
  }
  .award-block-title {
    top: -13%;
  }
  .award-slogan {
    text-align: center;
    letter-spacing: 0;
    text-shadow: 1px 1px 5px #00000040;
    color: #FFFFFF;
    font-size: 110%;
    margin: 60px 0 25px;
    line-height: 200%;
  }
  .flex-award {
    padding-bottom: 70% !important;
    width: 48%;
  }
  #award01 {
    padding-bottom: 85% !important;
  }
  #award02 {
    padding-bottom: 85% !important;
  }
  .fix-right-buttom {
    position: fixed;
    width: 180px;
    right: 0;
    bottom: 2px;
  }
  /*內頁*/
  .sign-block {
    border: 3px solid #de943c;
    border-radius: 25px;
    padding: 15% 1% 13%;
    font-size: 95%;
    margin: 24% 2%;
  }
  .main-title-inside > h1 > img {
    max-width: 1000px;
    width: 78%;
    margin:auto;
  }
  .sign-block-title > h2 > img {
    max-width: 250px;
    margin: auto;
  }
  .sign-icon, .sign-icon-finish {
    width: 28%;
    margin: 1%;
    padding: 19% 1% 5%;
    font-size: 90%;
  }
/*參加時跳出的修改跳出會員登入*/
.modal-content{
    border:1px solide #ff8617;
    border-radius: 10px;
}
.close > span {
    font-size:120%;
}
}