@charset "utf-8";

body {
    position: relative;
    background-color: #fef2e6;
}

header {
    background-color: #fff;
}

header::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 80px;
    background: -moz-linear-gradient(top, rgba(255, 213, 181, 1) 0%, rgba(255, 213, 181, 0) 100%);
    background: -webkit-linear-gradient(top, rgba(255, 213, 181, 1) 0%, rgba(255, 213, 181, 0) 100%);
    background: linear-gradient(to bottom, rgba(255, 213, 181, 1) 0%, rgba(255, 213, 181, 0) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffd5b5', endColorstr='#00ffd5b5', GradientType=0);
    z-index: -1;
    opacity: 0.8;
}

/*banner*/
@media screen and (min-width: 768px) {

    .banner .pad,
    .banner .phone {
        display: none;
    }
}

@media screen and (max-width: 768px) {
    .banner .pc {
        display: none;
    }
}

@media screen and (max-width: 768px) and (min-width: 393px) {
    .banner .phone {
        display: none;
    }
}

@media screen and (max-width: 393px) {
    .banner .pad {
        display: none;
    }
}

/*麵包屑*/
.bread .breadcrumb-icon {
    display: -webkit-flex;
    display:flex;
    -webkit-align-items:center;
    align-items:center;
}
.bread li a {
    color: #951C06;
    text-decoration: none;
}

.bread li .icon {
    width: 35px;
    padding: 0 3px;
}

.bread .breadcrumb-item.active {
    color: #000;
    font-weight: bold;
}

.bread .breadcrumb-item {
    line-height: 130%;
    padding: 2px 0;
}

.bread .breadcrumb-item+.breadcrumb-item::before {
    color: #951C06;
}
/*plug*/
.plug_box {
    text-align: right;
}

.plug_box ul {list-style-type: none;padding: 0;margin: 0;display: inline-block;}

.plug_box ul li {
    float: left;
    padding: 3px;
}

.plug_box ul li a {
    background-color: #8a8a8a;
    display: block;
    border-radius: 50px;
}

.plug_box ul li.fb a:hover {
    background-color: #3b5791;
}

.plug_box ul li.twitter a:hover {
    background-color: #1c9cea;
}

.plug_box ul li.google a:hover {
    background-color: #d74b38;
}

.plug_box ul li.line a:hover {
    background-color: #06c152;
}

.plug_box ul li.print a:hover {
    background-color: #c36c1b;
}

.plug_box ul li a img {
    width: 45px;
}
/*主要內容區*/
.main {
    background-image: url("../images/all/rainbow.png");
    background-position: center bottom -225px;
    background-size: cover;
    background-repeat: no-repeat;
    overflow: hidden;
}

.content .panel {
    background-color: #ffffff;
    border-radius: 25px;
    box-shadow: -13px -11px 37px 4px rgba(0, 0, 0, 0.1) inset;
    -webkit-box-shadow: -13px -11px 37px 4px rgba(0, 0, 0, 0.1) inset;
    -moz-box-shadow: -13px -11px 37px 4px rgba(0, 0, 0, 0.54) inset;
    margin: 20px auto;
    position: relative;
    z-index: 1;
    min-height: 370px;
    font-size: 1.1em;
    line-height: 180%;
}

.content .panel::after {
    content: "";
    position: absolute;
    display: block;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
    border-radius: 25px;
    box-shadow: 4px 4px 18px -2px rgba(0, 0, 0, 0.4);
    -webkit-box-shadow: 4px 4px 18px -2px rgba(0, 0, 0, 0.4);
    -moz-box-shadow: 4px 4px 18px -2px rgba(0, 0, 0, 0.76);
}

.main .content .ill05 {
    bottom: -100px;
}

.main .content .ill03 {
    left: -300px;
    bottom: 0;
}

.main .content .ill01 {
    right: -300px;
    bottom: 0;
}

@media screen and (max-width: 768px) {

    .main .content .ill01,
    .main .content .ill03 {
        display: none;
    }
}

@media screen and (min-width: 530px) {
    .content .panel {
    padding: 40px 50px 95px 50px;
}
}

@media screen and (max-width: 530px) {
     .content .panel {
    padding: 30px 30px 30px 30px;
}
}
@media screen and (min-width: 393px) {    
    .main {
        margin-top: -15%;
    }
}

@media screen and (max-width:393px) {
    .main {
        margin-top: -27%;
    }
}
/*兌換懶人包*/
.download_box .download_title {
    font-size: 155%;
    font-weight: bold;
    color: #0a6290;
    border-bottom: 1px #F0AA64 solid;
    padding: 0 0 10px 0;
}
.download_box .download_item ul {
    margin: 0 0 15px 0;
    padding: 0;
    list-style-type: none;
}
.download_box .download_item ul li a {
    display: block;
    background-image: url(../images/home/ic_download.svg);
    background-color: #D23113;
    background-repeat: no-repeat;
    background-position: right 15px top 50%;
    border-radius: 50px;
    color: #fff;
    font-weight: bold;
    text-decoration: none;
    background-size: 20px;
}
.download_box .download_item ul li a:hover {
    background-color: #ab260d;
}
@media screen and (min-width:480px) {
.download_box .download_item {
    background-image: url(../images/home/download_bg.png);
    background-size: contain;
    padding: 90px 70px 0 25px;
    width: 360px;
    background-repeat: no-repeat;
    height: 360px;
    margin: 8px;
}

.download_box .download_item:nth-child(2n+1) {
    background-image: url(../images/home/download_bg02.png);
}

.download_box .download_item ul li {
    padding: 10px 5px;
}

.download_box .download_item ul li a {
    padding: 15px 0 15px 25px;
}



.download_box .download_title {
    text-align: center;
}
}
@media screen and (max-width:480px) {
.download_box {
    padding: 0 0 25px 0;
}
.download_item {
    width: 100%;
}
.download_box .download_item ul li {
    padding: 0 0 10px 0;
}
.download_box .download_item ul li a {
    padding: 10px 0 10px 15px;
}
}
/*footer*/
footer .ill02 {
    left: 33%;
    top: -100px;
}

footer .heart {
    right: 41%;
    top: -100px;
}

@media screen and (max-width: 393px) {
    footer .ill02,footer .heart {
        display: none;
    }
}